<div
  class="sky-alert"
  role="alert"
  [skyThemeClass]="{
    'sky-rounded-corners': 'default',
    'sky-box sky-elevation-1': 'modern'
  }"
  [hidden]="closed"
  [ngClass]="{
    'sky-alert-info': alertTypeOrDefault === 'info',
    'sky-alert-success': alertTypeOrDefault === 'success',
    'sky-alert-warning': alertTypeOrDefault === 'warning',
    'sky-alert-danger': alertTypeOrDefault === 'danger',
    'sky-alert-closeable': closeable
  }"
>
  <div aria-hidden="true" class="sky-alert-icon-theme-modern">
    <sky-icon-stack [baseIcon]="alertBaseIcon" [topIcon]="alertTopIcon" />
  </div>
  @if (descriptionComputed) {
    <span class="sky-screen-reader-only">
      {{ descriptionComputed }}
    </span>
  }
  <div class="sky-alert-content">
    <ng-content />
  </div>
  <button
    class="sky-alert-close"
    type="button"
    [attr.aria-label]="'skyux_alert_close' | skyLibResources"
    [hidden]="!closeable"
    (click)="close()"
  >
    <span aria-hidden="true">
      <sky-icon icon="close" />
    </span>
  </button>
</div>
