.#{$notice-prefix-cls} {
  position: fixed;
  z-index: $zindex-notification;
  width: $notice-width;
  margin-right: $notice-spacer-right;

  &-notice {
    //border: 1px solid @border-color-split;
    @include border-radius($border-radius);
    position: relative;
    padding: nth($notice-padding-y, 1) $notice-padding-x nth($notice-padding-y, 2) $notice-padding-x;
    margin-bottom: $notice-spacer-bottom;
    overflow: hidden;
    line-height: 1;
    background: #fff;
    box-shadow: $shadow-base;

    &-content {
      margin-bottom: -4px;
    }

    &-close {
      position: absolute;
      top: 50%;
      right: $notice-padding-x;
      cursor: pointer;
      outline: none;
      transform: translateY(-50%);

      i {
        font-size: $notice-close-icon-font-size;
        color: $notice-close-icon-color;
        transition: color $transition-time ease;

        &:hover {
          color: $notice-close-icon-hover-color;
        }
      }
    }

    &-with-desc {
      .#{$notice-prefix-cls}-notice-close {
        top: nth($notice-padding-y, 1) + $notice-icon-size / 2;
      }
    }
  }

  &-title {
    padding-right: $notice-close-icon-font-size;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &-with-icon {
    margin-left: $notice-icon-spacer-right + 16px;
  }

  &-desc {
    font-size: $notice-desc-font-size;
    line-height: 1.5;
    color: $notice-desc-color;
    text-align: justify;
  }

  &-icon {
    position: absolute;
    left: $notice-padding-x;
    font-size: 16px;

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

    &-info {
      color: $brand-info;
    }

    &-warning {
      color: $brand-warning;
    }

    &-danger {
      color: $brand-danger;
    }
  }

  &-with-desc {
    &.#{$notice-prefix-cls}-with-icon {
      margin-left: $notice-icon-spacer-right + $notice-icon-size;
    }

    .#{$notice-prefix-cls}-notice {
      &-content {
        margin-bottom: 0;
      }
    }

    .#{$notice-prefix-cls}-icon {
      font-size: $notice-icon-size;
    }

    .#{$notice-prefix-cls}-title {
      margin-bottom: $notice-title-spacer-bottom;
      font-size: $notice-title-font-size;
      font-weight: 500;
      line-height: $notice-icon-size;
      color: $gray-light-85;
    }
  }
}