@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: @box-shadow-base;
    border: 1px solid @border-color-base;
    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: -17px;
        font-size: 34px;

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

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

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

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

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

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

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

  &-fade-enter&-fade-enter-active,
  &-fade-appear&-fade-appear-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;
  }
}