@notify-prefix: ~'@{prefix}notify';
@notice-width: 335px;
@notice-padding: 16px;
@notice-margin-bottom: 10px;
.@{notify-prefix} {
  z-index: @zindex-notify;
  position: relative;
  .@{notify-prefix} {
    &-wrap {
      position: fixed;
      overflow: auto;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: @zindex-notify;
    }
    &-container {
      transition: @transition-time;
      opacity: 0;
    }
    &-content {
      background-color: @white-color;
      border-radius: 3px;
      box-shadow: @box-shadow-notify;
    }
    &-body {
      position: relative;
    }
    &-close {
      display: block;
      position: absolute;
      right: 8px;
      top: 12px;
      font-size: 14px;
      line-height: 1;
      text-align: center;
      z-index: 1;
      .h-func-dark-text-hover();
    }

    &-mask {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      transition: opacity @transition-time;
      background: rgba(0, 0, 0, 0.16);
      z-index: @zindex-modal;
      opacity: 0;
    }
  }
  &.@{notify-prefix} {
    &-show {
      .@{notify-prefix}-mask {
        opacity: 1;
      }
      .@{notify-prefix}-container {
        opacity: 1;
      }
    }
  }
}