/*
 * Re-skins SweetAlert2's toast (see flash_controller.js) to match the app's
 * own type scale/shadow/brand color, on top of the vendored
 * sweetalert2.min.css.
 *
 * Not run through the Tailwind build, and not a <link>ed asset — read from
 * disk and inlined by ThemeHelper::SWEETALERT2_CSS. See that constant for
 * why (a <link> raced the toast's first fire against its own CSS loading).
 *
 * `var(--store-primary)` resolves fine here even though it's declared in
 * application.css's :root — custom property lookups aren't scoped to
 * whichever <style>/<link> the reader happens to be in.
 */
/* The toast's grid row/cell track sizes to something far larger than its
   content on some pages (observed 1200px+ tall; not reproducible in a
   bare-bones test page, and confining the toast to a single grid cell
   — instead of SweetAlert2's own default 3-row span — didn't stop it
   either, so the exact trigger in the row/track sizing algorithm is still
   unclear). `height: auto` is what lets the item stretch to fill whatever
   its track resolves to; an explicit, non-auto height sidesteps that
   entirely — a definite size on the item itself isn't affected by track or
   stretch sizing, so this is a hard ceiling regardless of root cause. */
.swal2-popup.swal2-toast {
  height: 4.5rem !important;
  overflow: hidden;
  gap: 0.75rem;
  border-radius: 0.5rem;
  padding: 0.75rem 0.75rem 0.75rem 1rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  font-family: inherit;
}

/* SweetAlert2's own CSS spans the icon `grid-row: 1 / 99` (meant to
   vertically center it regardless of how many internal rows the popup
   ends up with) — but on the pages hitting the height bug above, that
   phantom 99-row span centers the icon against whatever huge height the
   popup WOULD have had, landing it hundreds of px below the now-capped
   box (invisible, not just clipped). Pinning it to the single real
   content row keeps its `align-self: center` centering against that row
   instead. */
.swal2-popup.swal2-toast .swal2-icon {
  grid-row: 1 !important;
}

.swal2-popup.swal2-toast .swal2-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: #1e293b;
}

.swal2-popup.swal2-toast .swal2-timer-progress-bar {
  background-color: var(--store-primary, #4f46e5);
}

.swal2-popup.swal2-toast .swal2-icon.swal2-success [class^="swal2-success-line"] {
  background-color: var(--store-primary, #4f46e5);
}

.swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-ring {
  border-color: color-mix(in srgb, var(--store-primary, #4f46e5) 30%, transparent);
}

.swal2-popup.swal2-toast .swal2-icon.swal2-error {
  border-color: #ef4444;
  color: #ef4444;
}