@import "../mixins/index";

@notification-prefix-cls: ~"@{css-prefix}notification";

@notice-width: 335px;
@notice-padding: 16px;
@notice-margin-bottom: 10px;

.@{notification-prefix-cls} {
  position: fixed;
  z-index: 1000;
  width: @notice-width;
  margin-right: 24px;

  &-notice {
    padding: @notice-padding;
    border-radius: @border-radius-base;
    box-shadow: 0 0 4px @legend-border-color;
    background: @body-background;
    line-height: 1.5;
    position: relative;
    margin-bottom: @notice-margin-bottom;
    overflow: hidden;

    &-content {
      &-message {
        font-size: 14px;
        color: @text-color;
        margin-bottom: 4px;
      }
      &-description {
        font-size: @font-size-base;
        color: @legend-color;
      }
    }

    &-content-icon {
      position: relative;
      &-message {
        font-size: 14px;
        color: @text-color;
        margin-left: 51px;
        margin-bottom: 4px;
      }
      &-description {
        margin-left: 51px;
        font-size: @font-size-base;
        color: @legend-color;
      }
      &-icon {
        position: absolute;
        left: 16px;
        top: 50%;
        margin-top: -26px;
        font-size: 35px;

        &-success {
          color: @success-color;
        }
        &-info {
          color: @primary-color;
        }
        &-warn {
          color: @warning-color;
        }
        &-error {
          color: @error-color;
        }
      }
    }

    &-close-x:after {
      font-size: 12px;
      content: "\e61e";
      font-family: "anticon";
      cursor: pointer;
    }

    &-close {
      position: absolute;
      right: 16px;
      top: 10px;
      color: #999;
      outline: none;
    }

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

  .fade-effect() {
    animation-duration: 0.3s;
    animation-fill-mode: both;
    animation-timing-function: @ease-in-out;
  }

  &-fade-enter {
    opacity: 0;
    .fade-effect();
    animation-play-state: paused;
  }

  &-fade-leave {
    .fade-effect();
    animation-play-state: paused;
  }

  &-fade-enter&-fade-enter-active {
    animation-name: NotificationFadeIn;
    animation-play-state: running;
  }

  &-fade-leave&-fade-leave-active {
    animation-name: NotificationFadeOut;
    animation-play-state: running;
  }

  @keyframes NotificationFadeIn {
    0% {
      opacity: 0;
      left: @notice-width;
    }
    100% {
      left: 0;
      opacity: 1;
    }
  }

  @keyframes NotificationFadeOut {
    0% {
      opacity: 1;
      margin-bottom: @notice-margin-bottom;
      padding-top: @notice-padding;
      padding-bottom: @notice-padding;
      max-height: 150px;
    }
    100% {
      opacity: 0;
      margin-bottom: 0;
      padding-top: 0;
      padding-bottom: 0;
      max-height: 0;
    }
  }
}