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

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

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

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

/*离场动画过程*/
.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms ease-out;
}

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

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

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

.nut-notify {
  position: fixed;
  left: scale-px(8px);
  right: scale-px(8px);
  z-index: $notify-z-index;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: $notify-height;
  padding: $notify-padding;
  border-radius: $notify-border-radius;
  box-shadow: $notify-box-shadow;
  background-color: $notify-background-color;

  &-content {
    flex: 1;
    text-align: center;
    min-width: 0;
    font-size: $notify-font-size;
    color: $notify-text-color;
    white-space: nowrap;
    overflow: hidden;
  }

  &-ellipsis {
    text-overflow: ellipsis;
  }

  &-layout-left {
    text-align: left;
  }

  &-left-icon,
  &-right-icon {
    /* #ifdef dynamic*/
    display: flex;
    /* #endif */
    /* #ifndef dynamic*/
    display: inline-flex;
    /* #endif */
  }

  &-left-icon {
    margin-right: scale-px(6px);
    .nut-icon {
      height: scale-px(16px);
      width: scale-px(16px);
    }
  }

  &-right-icon {
    margin-left: scale-px(6px);
    .nut-icon {
      height: scale-px(12px);
      width: scale-px(12px);
    }
  }

  &-close-icon {
    height: $icon-size-12;
    width: $icon-size-12;
  }
}