@import '~antd/es/alert/style/index.less';
@import '../variable.less';

@alert-prefix-cls: ~'@{ant-prefix}-alert';

.@{alert-prefix-cls} {
  font-size: @alert-font-size;
  line-height: @alert-line-height;
  padding: @alert-padding;
  border: 0;

  &-info {
    background-color: @alert-background-color-info;
  }

  &-warning {
    background-color: @alert-background-color-warning;
  }

  &-error {
    background-color: @alert-background-color-error;
  }

  &-success {
    background-color: @alert-background-color-success;
  }

  &&-no-icon {
    padding: @alert-no-icon-padding;
  }

  &-icon {
    position: absolute;
    top: @alert-padding-vertical;
    left: @alert-padding-left;
  }

  &&-closable {
    padding-right: @alert-padding-left + @icon-size + @alert-close-right;
  }

  &-close-icon {
    top: @alert-padding-vertical;
    right: @alert-close-right;
    height: @icon-size;
    line-height: @icon-size;
  }

  &-message {
    color: @alert-message-color;
  }

  &-with-description {
    padding: @alert-with-description-padding;
  }

  &-with-description &-message {
    font-family: @font-family-bold;
    font-weight: @font-weight-bold;
    font-size: @font-size-base;
    line-height: @line-height-base;
    margin-bottom: @alert-with-description-message-margin-bottom;
  }

  &-with-description &-description {
    font-size: @alert-font-size;
    line-height: @alert-line-height;
    color: @alert-description-color;
  }

  &-with-description &-icon {
    top: @alert-with-description-padding-vertical;
    left: @alert-with-description-padding-horizontal;
    svg {
      font-size: @alert-with-description-icon-size;
    }
  }

  &-with-description &-close-icon {
    top: @alert-padding-vertical;
    right: @alert-close-right;
  }
}