index.less

@import '../../style/mixins/reset.less';
@import './mixin.less';

.@{alert-prefix} {
  .reset-component-new();

  @line-height: calc(var(--ix-font-size) + var(--ix-line-height-gutter));

  font-size: var(--ix-font-size);
  line-height: @line-height;
  display: flex;
  padding: calc((@alert-height - @line-height - 2px) / 2) 8px;
  border: 1px solid transparent;
  border-radius: @alert-border-radius;

  .alert-status-color(success, @alert-success-color, @alert-success-background-color);
  .alert-status-color(info, @alert-info-color, @alert-info-background-color);
  .alert-status-color(warning, @alert-warning-color, @alert-warning-background-color);
  .alert-status-color(error, @alert-error-color, @alert-error-background-color);
  .alert-status-color(offline, @alert-offline-color, @alert-offline-background-color);

  &-banner {
    padding: calc((@alert-height - @line-height - 2px) / 2) 16px;
    border-bottom-color: @alert-banner-border-color;
  }

  &-icon {
    margin-right: 8px;
  }

  &-close-icon {
    cursor: pointer;
    margin-left: 16px;
    color: @alert-icon-color;
    transition: color var(--ix-transition-duration-fast);

    &:hover {
      color: @alert-icon-color-hover;
    }
  }

  &-icon,
  &-close-icon {
    font-size: var(--ix-font-size-icon);
  }

  &-content {
    flex: 1;
    min-width: 0;
  }

  &-description {
    .reset-font-size();
  }

  &-with-description &-title {
    .reset-font-size(calc(var(--ix-font-size) + 2px));

    margin-bottom: 4px;
  }

  &-pagination {
    margin-left: 16px;

    &.@{pagination-prefix} {
      color: @alert-icon-color;
      background-color: transparent;

      .@{pagination-prefix}-item:hover,
      .@{pagination-prefix}-item.@{pagination-prefix}-item-active,
      .@{pagination-prefix}-item.@{pagination-prefix}-item-disabled {
        .@{pagination-prefix}-item-content {
          background-color: transparent;
        }
      }

      .@{pagination-prefix}-item {
        padding: 0;
      }
    }
  }
}