/*入场动画开始*/
.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: 8px;
  right: 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: 6px;
    .nut-icon {
      height: 16px;
      width: 16px;
    }
  }

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