// @import "../../style/themes/default";
// @import "../../style/mixins/index";

$ant-prefix : "upaas";

$message-prefix-cls: "#{$ant-prefix}-notification";
$zindex-message : 1010;
$border-radius-base: 4px;
$shadow-2: 0 4px 12px rgba(0, 0, 0, .15);
$component-background: #fff;

$success-color:#52c41a;
$error-color:#f5222d;
$warning-color: #faad14;
$info-color: #1890ff;

@keyframes MessageMoveOut {
  0% {
    opacity: 1;
    max-height: 150px;
    padding: 8px;
  }
  100% {
    opacity: 0;
    max-height: 0;
    padding: 0;
  }
}
@keyframes MessageMoveIn {
  0% {
    opacity: 0;
    max-height: 0;
    padding: 0;
  }
  100% {
    opacity: 1;
    max-height: 150px;
    padding: 8px;
  }
}

.#{$message-prefix-cls} {
  position: fixed;
  z-index:  $zindex-message;
  width: 100%;
  top: 16px;
  left: 0;
  pointer-events: none;
  &-notice {
    padding: 8px;
    text-align: center;
    &:first-child {
      margin-top: -8px;
    }
  }

  &-notice-content {
    padding: 30px 80px;
    border-radius: $border-radius-base;
    box-shadow: $shadow-2;
    background: $component-background;
    display: inline-block;
    pointer-events: all;
  }

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

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

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

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

  // 临时代码 start
  &-icon {
    margin-right: 8px;
    top: 1px;
    font-size: 24px;
    position: relative;
    vertical-align: top;
  }
  &-content {
    line-height: 24px;
    font-size: 16px;
    display: inline-block;
    vertical-align: top;
  }
  // 临时代码 end
  .#{$message-prefix-cls}-fade-leave,.#{$message-prefix-cls}-fade-leave-active {
    animation-name: MessageMoveOut;
    overflow: hidden;
    animation-duration: .3s;
  }

  .#{$message-prefix-cls}-fade-enter,.#{$message-prefix-cls}-fade-enter-active {
    animation-name: MessageMoveIn;
    overflow: hidden;
    animation-duration: .3s;
  }


  // .fade-effect() {
  //   animation-duration: 0.3s;
  //   animation-fill-mode: both;
  //   animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
  // }

  // &-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: rcNotificationFadeIn;
  //   animation-play-state: running;
  // }

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

  // @keyframes rcNotificationFadeIn {
  //   0% {
  //     opacity: 0;
  //   }
  //   100% {
  //     opacity: 1;
  //   }
  // }

  // @keyframes rcDialogFadeOut {
  //   0% {
  //     opacity: 1;
  //   }
  //   100% {
  //     opacity: 0;
  //   }
  // }
}