// Alerts
.#{$alert-prefix-cls}{
  display: flex;
  align-items: center;
  $root: #{&};
  position: relative;
  padding:$alert-padding-y $alert-padding-x;
  @include border-radius($alert-border-radius);
  color: $alert-text-color;
  border-width:$alert-border-width;
  border-style:solid;
  font-size: $alert-font-size;
  line-height: $alert-line-height;
  margin-bottom: $alert-margin-bottom;
  min-height:$alert-min-height;

  &__icon {
    font-size:$alert-icon-font-size;
    margin-right: 8px;
  }
  //关闭图标
  &__close-icon{
    margin-left: auto;
    font-size: $alert-close-icon-font-size;
    cursor: $alert-close-icon-cursor;
    i{
      font-size:$alert-icon-font-size;
    }
    @include hover{
      i {
        color: $body-color;
      }   
    }
  }

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

  //带有图标
  &--with-icon {
    &.#{$alert-prefix-cls}--with-desc {
      align-items: flex-start;
      .#{$alert-prefix-cls}__message {
        font-size: $font-size-base;
        color: $gray-dark;
        font-weight: 500;
      }
      .#{$alert-prefix-cls}__icon {
        font-size:$alert-icon-desc-font-size;
      }
    }
  }


  // Alternate styles
  //
  // Generate contextual modifier classes for colorizing the alert.
  @each $statu,$val in $alert-style-panel {
    $key: '';
    @if($statu){
      $key: --#{$statu}
    }
    &#{$key} {
      @include alert-variant(nth($val,1),nth($val,2));
      @if ($statu) {
          #{$root}__icon{
            @extend .icon-gradient-#{$statu};
          }
      }
    }
  }
}