/*入场动画开始*/
.fade-enter {
  opacity: 0;
}

/*入场动画过程*/
.fade-enter-active {
  opacity: 1;
  transition: opacity 1s;
}

/*入场动画结束*/
.fade-enter-done {
  opacity: 1;
}

/*离场动画开始*/
.fade-exit {
  opacity: 1;
}

/*离场动画过程*/
.fade-exit-active {
  opacity: 0;
  transition: opacity 1s;
}

/*离场动画结束*/
.fade-exit-done {
  opacity: 0;
}

/*页面第一次加载时的开始状态*/
.fade-appear {
  opacity: 0;
}

/*页面第一次加载时的动画过程*/
.fade-appear-active {
  opacity: 1;
  transition: opacity 1s;
}

.nut-notify {
  box-sizing: border-box;
  padding: $notify-padding;
  color: $notify-text-color;
  font-size: $notify-font-size;
  white-space: pre-wrap;
  text-align: center;
  word-wrap: break-word;
  height: $notify-height;

  &--popup-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    overflow-y: auto;
    transition: transform 0.3s;
    z-index: 9999;
  }

  &--popup-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow-y: auto;
    transition: transform 0.3s;
    z-index: 9999;
  }

  &--base {
    background: $notify-base-background-color;
  }

  &--primary {
    background: $notify-primary-background-color;
  }

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

  &--danger {
    background: $notify-danger-background-color;
  }

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