// @import "../_utils.scss";
// @import "./icon.scss";
.#{$alert-prefix-cls} {
  position: relative;
  padding: $alert-padding;
  border-radius: $border-radius-base;
  color: $text-color;

  @include theme-font-color($__alert_font-color);
  font-size: $font-size-small;
  line-height: $alert-line-height;
  margin-bottom: $alert-margin-bottom;
  @if $--size-switch == yes {
    font-size: $--size-font-size-base;
    @include computed-height($--size-height-base + 4);
    padding-right: $--size-offset-base + 16px;
  }
  &-with-icon {
    padding: $alert-with-icon-padding;
    @if $--size-switch == yes {
      @include computed-height($--size-height-base + 4);
      padding-left: $--size-offset-base + 16 + 8;
      padding-right: $--size-offset-base + 16px;
    }
  }

  &-icon {
    font-size: $font-size-base;
    top: $alert-icon-top;
    left: $alert-icon-left;
    position: absolute;
    @if $--size-switch == yes {
      top: computed-padding-vertical($--size-height-base + 4);
      left: $--size-offset-base;
      @include computed-line-height();
    }
  }

  &-desc {
    //font-family: MicrosoftYaHei;
    font-size: $alert-desc-font-size;
    color: $alert-desc-color;

    @include theme-font-color($__alert_font-color);
    // text-align: left;
    line-height: $alert-desc-line-height;
    text-align: justify;
    @if $--size-switch == yes {
      font-size: $--size-font-size-base;
      @include computed-line-height();
    }
  }

  &-success {
    border: 1px solid $alert-success-border-color;
    background-color: $alert-success-bgcolor;

    @include theme-border-color($__alert-success_border-color);
    @include theme-background-color($__alert-success_background-color);
    .#{$alert-prefix-cls}-icon {
      color: $alert-success-icon-color;

      @include theme-font-color($__alert-success_icon-color);
    }
  }

  &-info {
    border: 1px solid $alert-info-border-color;
    background-color: $alert-info-bgcolor;

    @include theme-border-color($__alert-info_border-color);
    @include theme-background-color($__alert-info_background-color);
    .#{$alert-prefix-cls}-icon {
      color: $alert-info-icon-color;

      @include theme-font-color($__alert-info_icon-color);
    }
  }

  &-warning {
    border: 1px solid $alert-warning-border-color;
    background-color: $alert-warning-bgcolor;

    @include theme-border-color($__alert-warning_border-color);
    @include theme-background-color($__alert-warning_background-color);
    .#{$alert-prefix-cls}-icon {
      color: $alert-warning-icon-color;

      @include theme-font-color($__alert-warning_icon-color);
    }
  }

  &-error {
    border: 1px solid $alert-error-border-color;
    background-color: $alert-error-bgcolor;

    @include theme-border-color($__alert-error_border-color);
    @include theme-background-color($__alert-error_background-color);
    .#{$alert-prefix-cls}-icon {
      color: $alert-error-icon-color;

      @include theme-font-color($__alert-error_icon-color);
    }
  }

  &-close {
    @include content-close(-3px);
    @if $--size-switch == yes {
      right: $--size-offset-base;
      top: computed-padding-vertical($--size-height-base + 4);
    }

    & i.iconfont {
      color: $alert-close-iconfont-color;

      @include theme-font-color($__common-close_icon-color);
    }

    & i:hover {
      color: $primary-color;

      @include theme-font-color( $__common-close_hover_icon-color);
    }

    @include theme-color($__common-a_font-color);

    &:hover {
      @include theme-color($__common-a_hover_font-color);
    }

    &:active {
      @include theme-color($__common-a_active_font-color);
    }
  }

  &-with-desc {
    padding: $alert-with-desc-padding;
    position: relative;
    border-radius: $border-radius-base;
    margin-bottom: $alert-with-desc-margin-bottom;
    color: $text-color;

    @include theme-font-color($__alert-desc_font-color);
    line-height: $alert-with-desc-line-heigh;
    @if $--size-switch == yes {
      @include computed-height($--size-height-base + 4);
      padding-right: $--size-offset-base + 16px;
    }
  }

  &-with-desc &-desc {
    display: block;
  }

  &-with-desc &-message {
    // font-size: 14px;
    // font-weight: 700;
    // color: $title-color;
    // display: block;
    font-size: $alert-with-desc-message-font-size;
    font-weight: bold;
    color: $alert-message-color;

    @include theme-font-color($__alert-desc_font-color);
    letter-spacing: 0;
    text-align: left;
    line-height: $alert-with-desc-message-line-height;
    display: block;
    @if $--size-switch == yes {
      @include computed-font-size(26);
      @include computed-line-height();
    }
  }

  &-with-desc &-icon {
    // top: 50%;
    left: $alert-with-desc-icon-left;
    // margin-top: -21px;
    @if $--size-switch == yes{
      left: $--size-offset-base;
    }
    & i.iconfont {
      font-size: $alert-with-desc-iconfont-font-size;
      @if $--size-switch == yes{
        position: absolute;
        top: computed-padding-vertical($--size-height-base + 4);
      }
    }
  }

  &-with-banner {
    border-radius: $alert-with-banner-border-radius;
  }
}
.#{$alert-prefix-cls}-with-desc.#{$alert-prefix-cls}-with-icon {
  padding: $alert-with-desc-icon-padding;
  @if $--size-switch == yes {
    $padding-vertical: computed-padding-vertical($--size-height-base + 4);
    padding: $padding-vertical ($--size-offset-base + 16px) $padding-vertical ($--size-offset-base + $alert-with-desc-iconfont-font-size + 8);
  }
}