Toast Stack

<div class="ws-notification-widget flex flex-col gap-2 max-w-sm w-full"
     style="
       --ws-notification-widget-bg: oklch(0.99 0.005 75);
       --ws-notification-widget-text: oklch(0.25 0.02 75);
       --ws-notification-widget-text-soft: oklch(0.40 0.015 75);
       --ws-notification-widget-text-muted: oklch(0.55 0.01 75);
       --ws-notification-widget-border: oklch(0.90 0.01 75);
       --ws-notification-widget-accent: oklch(0.55 0.15 250);
       --ws-notification-widget-accent-soft: oklch(0.92 0.04 250);
       --ws-notification-widget-danger: oklch(0.55 0.2 25);
       --ws-notification-widget-warning: oklch(0.70 0.15 85);
       --ws-notification-widget-success: oklch(0.55 0.15 155);
     ">

  <!-- Success Toast -->
  <div class="rounded-2xl border px-5 py-4 flex items-start gap-3 shadow-sm"
       role="status"
       style="
         background: var(--ws-notification-widget-bg);
         border-color: var(--ws-notification-widget-border);
         border-left: 4px solid var(--ws-notification-widget-success);
       ">
    <span class="mt-0.5 text-base shrink-0" style="color: var(--ws-notification-widget-success);" aria-hidden="true">&#10003;</span>
    <div class="min-w-0 flex-1">
      <p class="text-sm font-semibold leading-snug" style="color: var(--ws-notification-widget-text);">Changes saved successfully</p>
      <p class="mt-0.5 text-xs" style="color: var(--ws-notification-widget-text-muted);">Your preferences have been updated</p>
    </div>
    <button type="button" class="shrink-0 text-sm leading-none p-1 rounded-lg" style="color: var(--ws-notification-widget-text-muted);" aria-label="Dismiss notification">&times;</button>
  </div>

  <!-- Warning Toast — offset -->
  <div class="rounded-2xl border px-5 py-4 flex items-start gap-3 shadow-sm -mt-1"
       role="status"
       style="
         background: var(--ws-notification-widget-bg);
         border-color: var(--ws-notification-widget-border);
         border-left: 4px solid var(--ws-notification-widget-warning);
       ">
    <span class="mt-0.5 text-base shrink-0" style="color: var(--ws-notification-widget-warning);" aria-hidden="true">&#9888;</span>
    <div class="min-w-0 flex-1">
      <p class="text-sm font-semibold leading-snug" style="color: var(--ws-notification-widget-text);">Storage almost full (92%)</p>
      <p class="mt-0.5 text-xs" style="color: var(--ws-notification-widget-text-muted);">Free up space or upgrade your plan</p>
    </div>
    <button type="button" class="shrink-0 text-sm leading-none p-1 rounded-lg" style="color: var(--ws-notification-widget-text-muted);" aria-label="Dismiss notification">&times;</button>
  </div>

  <!-- Error Toast — offset -->
  <div class="rounded-2xl border px-5 py-4 flex items-start gap-3 shadow-sm -mt-1"
       role="status"
       style="
         background: var(--ws-notification-widget-bg);
         border-color: var(--ws-notification-widget-border);
         border-left: 4px solid var(--ws-notification-widget-danger);
       ">
    <span class="mt-0.5 text-base shrink-0" style="color: var(--ws-notification-widget-danger);" aria-hidden="true">&#10007;</span>
    <div class="min-w-0 flex-1">
      <p class="text-sm font-semibold leading-snug" style="color: var(--ws-notification-widget-text);">Payment failed</p>
      <p class="mt-0.5 text-xs" style="color: var(--ws-notification-widget-text-muted);">Please check your card details and try again</p>
    </div>
    <button type="button" class="shrink-0 text-sm leading-none p-1 rounded-lg" style="color: var(--ws-notification-widget-text-muted);" aria-label="Dismiss notification">&times;</button>
  </div>

</div>