@import './../theme/vars.scss';

$toast-prefix-cls: amos-toast;
$toast-width: 381px;
$toast-padding-vertical: 16px;
$toast-padding-horizontal: 24px;
$toast-padding: $toast-padding-vertical $toast-padding-horizontal;
$toast-margin-bottom: 16px;

// 动画
%toast-animate-effect {
  animation-duration: 0.24s;
  animation-timing-function: $ease-in-out;
  animation-fill-mode: both;
}

.#{$toast-prefix-cls} {
  position: fixed;
  z-index: $zindex-toast;
  width: $toast-width;
  max-width: calc(100vw - 32px);
  margin-right: 24px;

  &-topLeft,
  &-bottomLeft,
  &-topMiddle,
  &-bottomMiddle {
    margin-right: 0;
    margin-left: 24px;

    .#{$toast-prefix-cls}-fade-enter.#{$toast-prefix-cls}-fade-enter-active,
    .#{$toast-prefix-cls}-fade-appear.#{$toast-prefix-cls}-fade-appear-active {
      animation-name: toastLeftFadeIn;
    }
  }

  // 部分情况下，会出现 x 滚动
  &-topRight {
    overflow: hidden;
  }

  &-close-icon {
    font-size: $font-size-base;
    cursor: pointer;
  }

  &-inner {
    position: relative;
    padding: $toast-padding;
    margin-bottom: $toast-margin-bottom;
    overflow: hidden;
    line-height: 1.5;
    background: $component-background;
    border-radius: $border-radius-lg;
    box-shadow: $shadow-3;

    &-title {
      display: inline-block;
      margin-bottom: 8px;
      font-size: $font-size-lg;
      line-height: 24px;
      color: $heading-color;

      &-single-line-auto-margin {
        display: block;
        width: calc(#{$toast-width} - #{$toast-padding-horizontal} * 2 - 24px - 48px - 100%);
        max-width: 4px;
        pointer-events: none;
        background-color: transparent;

        &::before {
          display: block;
          content: '';
        }
      }
    }

    &-content {
      font-size: $font-size-base;
    }

    &-closable &-title {
      padding-right: 24px;
    }

    &-with-icon &-title {
      margin-bottom: 4px;
      margin-left: 48px;
      font-size: $font-size-lg;
    }

    &-with-icon &-content {
      margin-left: 48px;
      font-size: $font-size-base;
    }

    // Icon & color style in different selector level
    &-icon {
      position: absolute;
      margin-left: 4px;
      font-size: 24px;
      line-height: 24px;
    }

    .#{$iconfont-css-prefix}.#{$toast-prefix-cls}-inner-icon {
      &-success {
        color: $success-color;
      }

      &-info {
        color: $info-color;
      }

      &-warning {
        color: $warning-color;
      }

      &-error {
        color: $error-color;
      }
    }

    &-close {
      position: absolute;
      top: 16px;
      right: 22px;
      color: $text-color-secondary;
      outline: none;

      &:hover {
        color: lighten($text-color-secondary, 40%);
      }
    }

    &-footer {
      float: right;
      margin-top: 16px;
    }
  }

  .toast-fade-effect {
    animation-duration: 0.24s;
    animation-timing-function: $ease-in-out;
    animation-fill-mode: both;
  }

  &-fade-enter,
  &-fade-appear,
  &-scale-enter,
  &-scale-appear {
    @extend %toast-animate-effect;

    opacity: 0;
    animation-play-state: paused;
  }

  &-fade-leave,
  &-scale-leave {
    @extend %toast-animate-effect;

    animation-duration: 0.2s;
    animation-play-state: paused;
  }

  &-fade-enter.#{$toast-prefix-cls}-fade-enter-active,
  &-fade-appear.#{$toast-prefix-cls}-fade-appear-active {
    animation-name: toastFadeIn;
    animation-play-state: running;
  }

  &-fade-leave.#{$toast-prefix-cls}-fade-leave-active {
    animation-name: toastFadeOut;
    animation-play-state: running;
  }

  // scale animate
  &-scale-enter.#{$toast-prefix-cls}-scale-enter-active,
  &-scale-appear.#{$toast-prefix-cls}-scale-appear-active {
    animation-name: toastScaleIn;
    animation-play-state: running;
  }

  &-scale-leave.#{$toast-prefix-cls}-scale-leave-active {
    animation-name: toastScaleOut;
    animation-play-state: running;
  }
}

@keyframes toastFadeIn {
  0% {
    left: $toast-width;
    opacity: 0;
  }

  100% {
    left: 0;
    opacity: 1;
  }
}

@keyframes toastLeftFadeIn {
  0% {
    right: $toast-width;
    opacity: 0;
  }

  100% {
    right: 0;
    opacity: 1;
  }
}

@keyframes toastFadeOut {
  0% {
    max-height: 150px;
    padding-top: $toast-padding;
    padding-bottom: $toast-padding;
    margin-bottom: $toast-margin-bottom;
    opacity: 1;
  }

  100% {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    opacity: 0;
  }
}

// scale animate

@keyframes toastScaleIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  100% {
    opacity: 1;
    transform: translate(0);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
}

@keyframes toastScaleOut {
  0% {
    opacity: 1;
    transform: translate(0);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}