Snackbar With Action

<!--
  A dark snackbar carrying one reversible action ("Undo"). role="status" keeps it
  polite. The action is a real <button>, not the whole bar - a bar-wide click
  target is a trap for anyone who meant to read it. Width caps at the viewport with
  max-w-[calc(100vw-2rem)]; the message is min-w-0 flex-1 so it wraps rather than
  shoving the buttons off-screen at 320px.
-->
<div role="status" aria-live="polite" class="pointer-events-auto flex w-full max-w-[calc(100vw-2rem)] items-center gap-3 rounded-lg bg-gray-900 px-4 py-3 shadow-[0_10px_30px_-10px_rgba(0,0,0,0.5)] dark:bg-gray-100">
  <p class="min-w-0 flex-1 text-sm text-gray-100 dark:text-gray-900">Message moved to Archive</p>
  <button type="button" class="flex-none rounded text-sm font-semibold text-blue-300 transition hover:text-blue-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-300 motion-reduce:transition-none dark:text-blue-700 dark:hover:text-blue-600 dark:focus-visible:ring-blue-600">Undo</button>
  <button type="button" aria-label="Dismiss" class="flex h-7 w-7 flex-none items-center justify-center rounded-md text-gray-400 transition hover:bg-white/10 hover:text-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-300 motion-reduce:transition-none dark:text-gray-500 dark:hover:bg-black/10 dark:hover:text-gray-900 dark:focus-visible:ring-blue-600">
    <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M6.3 6.3a1 1 0 0 1 1.4 0L10 8.6l2.3-2.3a1 1 0 1 1 1.4 1.4L11.4 10l2.3 2.3a1 1 0 0 1-1.4 1.4L10 11.4l-2.3 2.3a1 1 0 0 1-1.4-1.4L8.6 10 6.3 7.7a1 1 0 0 1 0-1.4Z" /></svg>
  </button>
</div>