@if (isRendered) {
  <div
    class="frg-toast"
    [ngClass]="toastClassMap"
    role="status"
    aria-live="polite"
    [attr.aria-label]="ariaLabel"
    [style.--frg-toast-motion]="motionDuration + 'ms'"
  >
    <div class="frg-toast__accent"></div>
    @if (statusIconClass) {
      <span class="frg-toast__status-icon" [ngClass]="statusIconClass" aria-hidden="true"></span>
    }
    <div class="frg-toast__content">
      @if (title) {
        <div class="frg-toast__title">{{ title }}</div>
      }
      <ng-content select="[frg-toast-title]"></ng-content>
      @if (message) {
        <div class="frg-toast__message">{{ message }}</div>
      }
      <ng-content select="[frg-toast-body]"></ng-content>
      <ng-content></ng-content>
    </div>
    @if (hasCloseButton) {
      <button
        type="button"
        class="frg-toast__close"
        aria-label="Close notification"
        (click)="onCloseClick()"
      >
        &times;
      </button>
    }
  </div>
}