// Alerts
.#{$alert-prefix-cls} {
  $root: #{&};
  @include border-radius($alert-border-radius);
  position: relative;
  display: flex;
  align-items: center;
  padding: $alert-padding-y $alert-padding-x;
  margin-bottom: $alert-margin-bottom;
  font-size: $alert-font-size;
  line-height: $alert-line-height;
  color: $alert-text-color;
  background: rgba(11, 105, 255, .1);

  &__icon {
    font-size: $alert-icon-font-size;
    line-height: 1;
    color: $brand-info;
  }
  //关闭图标
  &__close-icon {
    @include hover {
      i {
        color: $body-color;
      }
    }
    margin-left: auto;
    line-height: 1;
    cursor: $alert-close-icon-cursor;

    i {
      font-size: $alert-close-icon-font-size;
    }
  }

  //描述
  &__desc {
    padding: $alert-desc-padding-y 0;
  }

  &--with-icon {
    .#{$alert-prefix-cls}__content {
      margin-right: $alert-content-margin-x;
      margin-left: $alert-content-margin-x;
    }
  }

  &--with-desc {
    align-items: flex-start;
    padding: $alert-with-desc-padding-y $alert-padding-x;

    .#{$alert-prefix-cls}__message {
      font-size: 16px;
      font-weight: 500;
      color: $gray-light-85;
    }
  }

  // Alternate styles
  //
  // Generate contextual modifier classes for colorizing the alert.
  @each $statu, $val in $alert-style-panel {
    &--#{$statu} {
      background: $val;

      #{$root}__icon {
        @extend .icon-#{$statu};
      }
    }
  }
}