// Alerts
.#{$alert-prefix-cls}{
  $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,
  &__close-icon{
    top: $alert-icon-position-y;
    position: absolute;
    line-height: 1;
  }
  &__icon {
    font-size:$alert-icon-font-size;
    left: $alert-icon-position-x;
  }
  //关闭图标
  &__close-icon{
    left:auto;
    right:$alert-icon-position-x;
    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 {
    padding: $alert-padding-y $alert-with-icon-padding-x;
  }


  // 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};
          }
      }
    }
  }
}
