<aside
  class="tw-mb-4 tw-box-border tw-border tw-border-solid tw-rounded-lg tw-bg-background tw-ps-4 tw-pe-4 tw-py-3 tw-leading-5 tw-flex tw-gap-2"
  [ngClass]="[calloutClass()]"
  [attr.aria-labelledby]="titleId"
>
  @let title = titleComputed();
  @let icon = iconComputed();

  @if (icon) {
    <i
      class="bwi tw-relative"
      [ngClass]="[icon, title ? 'tw-top-[3px] tw-self-start' : 'tw-top-[1px]']"
      aria-hidden="true"
    ></i>
  }
  <div class="tw-flex tw-flex-col tw-gap-0.5">
    @if (title) {
      <header id="{{ titleId }}" class="tw-text-base tw-font-semibold">
        {{ title }}
      </header>
    }
    <div bitTypography="body2">
      <ng-content></ng-content>
    </div>
  </div>
</aside>
