<aside
  [@skyAnimationEmerge]="isOpen ? 'open' : 'closed'"
  (@skyAnimationEmerge.done)="onAnimationDone($event)"
>
  <div
    class="sky-toast sky-shadow sky-rounded-corners sky-box sky-elevation-24"
    [ngClass]="classNames"
    [attr.aria-live]="ariaLive"
    [attr.role]="ariaRole"
  >
    <div aria-hidden="true" class="sky-toast-icon-theme-default">
      <sky-icon [icon]="icon" />
    </div>
    <div aria-hidden="true" class="sky-toast-icon-theme-modern">
      <sky-icon-stack [baseIcon]="baseIcon" [topIcon]="topIcon" />
    </div>
    <div #toastContent class="sky-toast-content" skyId="toastContent">
      <ng-content />
    </div>
    <button
      class="sky-toast-btn-close"
      type="button"
      [attr.title]="'skyux_toast_close_button_title' | skyLibResources"
      [attr.aria-labelledby]="toastCloseMessage.id + ' ' + toastContent.id"
      (click)="close()"
    >
      <sky-icon icon="close" />
    </button>
  </div>
  <span
    #toastCloseMessage
    class="sky-screen-reader-only"
    skyId="toastCloseMessage"
    >{{ 'skyux_toast_close_button_aria_label' | skyLibResources }}</span
  >
</aside>
