.messagebox {
  width           : 310px;
  min-height      : 100px;
  max-height      : 500px;
  overflow        : auto;
  background-color: #fff;
  border-radius   : 12px;

  position        : fixed;
  top             : 40%;
  left            : 50%;
  transform       : translate(-50%, -50%);

  z-index: 4;

  display: none;

  &.active {
    display: block;
    // _animation.scss
    animation: scaleDown 0.2s linear;
  }

  &>div {
    padding: 8px;
  }

  .messagebox-header,
  .messagebox-footer {
    border-bottom: 1px solid transparent;
  }
  .messagebox-content {
    padding-top  : 16px;
    border-bottom: 1px solid #efefef;
  }

  .messagebox-footer {
    .close-messagebox-button {
      border           : 0;
      background-color : transparent;
      cursor           : pointer;
      width            : 100%;
      display          : block;
      outline          : none;
    }
  }
}