@for (toast of toasts(); track toast.id) {
  <div
    class="pointer-events-auto flex w-80 max-w-[calc(100vw-2rem)] items-start gap-3 rounded-xl border border-edge bg-surface p-4 shadow-overlay animate-slide-in-right"
    role="status"
  >
    <i class="mt-0.5 text-lg" [class]="'fa-solid ' + iconOf(toast.type)" aria-hidden="true"></i>
    <p class="flex-1 text-sm leading-relaxed text-ink">{{ toast.message }}</p>
    <button
      type="button"
      class="mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md text-muted transition-colors hover:bg-surface-hover hover:text-ink"
      (click)="remove(toast.id)"
      aria-label="关闭消息"
    >
      <i class="fa-solid fa-xmark text-xs" aria-hidden="true"></i>
    </button>
  </div>
}