@if (visibleToasts.length) {
  <div
    class="frg-toast-stack"
    [ngClass]="{
      'frg-toast-stack--top-left': position === 'top-left',
      'frg-toast-stack--top-right': position === 'top-right',
      'frg-toast-stack--bottom-left': position === 'bottom-left',
      'frg-toast-stack--bottom-right': position === 'bottom-right'
    }"
  >
    @for (toast of visibleToasts; track toast.id) {
      <frg-toast
        [open]="true"
        [title]="toast.title || ''"
        [message]="toast.message || ''"
        [styleType]="toast.styleType || 'primary'"
        [size]="toast.size || 'medium'"
        [autoClose]="toast.autoClose ?? false"
        [duration]="toast.duration ?? 4000"
        [hasCloseButton]="toast.hasCloseButton ?? true"
        [ariaLabel]="toast.ariaLabel || 'Notification'"
        [stacked]="true"
        [closing]="isClosing(toast.id)"
        [position]="position"
        [motionDuration]="motionDuration"
        (closed)="onToastClosed(toast.id, $event)"
      ></frg-toast>
    }
  </div>
}