<div class="relative flex w-full items-start gap-3 rounded-lg border bg-popover p-4 text-popover-foreground shadow-lg pointer-events-auto duration-300 fill-mode-forwards data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-bottom-2 [&>i]:translate-y-0.5 [&>i]:shrink-0 [&>i]:text-emerald-600 dark:[&>i]:text-emerald-400" role="status" aria-live="polite" data-controller="ui--toast" data-ui--toast-duration-value="5000" data-action="mouseenter->ui--toast#pause mouseleave->ui--toast#resume" data-state="open" data-slot="toast"><i data-lucide="circle-check" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
  <div class="flex-1 min-w-0 space-y-1">
    <p class="text-sm font-semibold leading-none" data-ui--toast-target="title">Saved</p>
    <p class="text-sm opacity-90" data-ui--toast-target="description">Your changes have been saved.</p>
  </div>
  <button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:pointer-events-none disabled:text-muted-foreground! disabled:bg-transparent! h-7 w-7 disabled:cursor-not-allowed shrink-0 -m-1 text-current/70 hover:text-current hover:bg-current/10" aria-label="Dismiss" data-action="click->ui--toast#dismiss"><i data-lucide="x" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
  </button>
</div>