@import '../../styles/variables.less';
@import '../../styles/themes/@{so-theme}.less';

@message-prefix: ~'@{so-prefix}-message';
@alert-prefix: ~'@{so-prefix}-alert';
@message-animation-duration: 0.2s;

.@{message-prefix} {
  position: fixed;
  z-index: @zindex-popover;
  left: 50%;
  max-width: 50%;
  @media (max-width: @screen-desktop) {
    max-width: none;
  }

  @keyframes-left-in: ~'@{message-prefix}-left-in';
  @keyframes-right-in: ~'@{message-prefix}-right-in';

  @keyframes @keyframes-left-in {
    0% {
      transform: translateX(-100%);
    }

    100% {
      transform: translateX(0);
    }
  }

  @keyframes @keyframes-right-in {
    0% {
      transform: translateX(100%);
    }

    100% {
      transform: translateX(0);
    }
  }

  &-top {
    top: 20px;
    transform: translateX(-50%);
  }

  &-middle {
    top: 50%;
    transform: translate(-50%, -50%);
  }

  &-item {
    display: flex;
    transition: all @message-animation-duration;
    z-index: 1;
  }

  &-item-show-top,
  &-item-show-middle {
    animation-name: MoveUpShow;
    animation-duration: @message-animation-duration;
  }

  &-item-dismissed-bottom-right {
    opacity: 0;
    z-index: -1;
    transform: translateX(100%);
  }

  &-item-dismissed-bottom-left {
    opacity: 0;
    z-index: -1;
    transform: translateX(-100%);
  }

  &-msg {
    display: inline-flex;
    margin: 0 auto 20px;
    border-color: @message-border-color;
    background: @alert-default-bg;
    box-shadow: @message-box-shadow;
    color: @message-text-color;
    font-weight: @message-font-weight;
    .@{alert-prefix}-icon {
      margin-top: @message-icon-margin-top;
    }
  }

  &-top-right,
  &-top-bottom {
    right: 20px;
    left: auto;

    .@{message-prefix}-msg {
      min-width: 340px;
      padding: 20px;
      animation: @keyframes-right-in @message-animation-duration ease-out;
    }
  }

  &-top-right,
  &-top-left {
    top: 20px;
  }

  &-bottom-right,
  &-bottom-left {
    top: auto;
    bottom: 0px;
  }

  &-top-right,
  &-bottom-right {
    right: 20px;
    left: auto;

    .@{message-prefix}-msg {
      min-width: 340px;
      padding: 20px;
      animation: @keyframes-right-in @message-animation-duration ease-out;
    }
  }

  &-top-left,
  &-bottom-left {
    left: 20px;

    .@{message-prefix}-msg {
      min-width: 340px;
      padding: 20px;
      animation: @keyframes-left-in @message-animation-duration ease-out;
    }
  }

  .@{alert-prefix}-close svg path {
    fill: @message-close-color;
  }

  @keyframes MoveUpShow {
    0% {
      transform: translateY(-25px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

}