/* ============================================================
 * ds-snackbar — MUI Snackbar (transient floating toast).
 *
 * Visual layer is shared with [[ds-alert]]: every snackbar
 * stacks the alert classes (`ds-snackbar ds-alert ds-alert--{severity}`)
 * so palette + auto-icons + typography come from one place. This
 * component owns ONLY what snackbar-specific:
 *
 *   - .ds-snackbar-container — fixed top-right viewport positioning
 *   - .ds-snackbar           — MUI 3-layer Snackbar shadow + slide animation
 *                              + min/max width + pointer-events
 *   - .ds-snackbar__actions  — right-aligned action button group
 *   - .ds-snackbar__label    — uppercase "UNDO"-style action button
 *
 * Severity coloring + icon + body padding all come from ds-alert.
 * Mirrors MUI's <Snackbar><Alert/></Snackbar> composition.
 *
 * Behavior (timer, queue, dismiss, slide-out) lives in
 * `public/shared/dom.js → showToast`.
 * ============================================================ */
@layer components {

.ds-snackbar-container {
  position: fixed;
  top: 80px;                                       /* clear the 64px app-top-header + 16px gap */
  right: 24px;
  z-index: 10003;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;                            /* clicks pass through gaps to the page */
}

.ds-snackbar {
  /* No severity class set → MUI "Simple Snackbar" plain white surface.
   * `--alert-*` vars are read by the shared ds-alert visual layer.
   * When a `.ds-alert--{severity}` class is added, those vars override
   * and the snackbar takes the MUI tinted-alert palette. */
  --alert-bg: #fff;
  --alert-text: rgba(0, 0, 0, 0.87);
  --alert-icon: rgba(0, 0, 0, 0.54);

  /* Override alert's `align-items: flex-start` — snackbars are usually
   * single-line so center is more balanced. */
  align-items: center;
  min-width: 288px;
  max-width: 480px;
  /* MUI Snackbar 3-layer shadow (elevation-6). */
  box-shadow:
    0 3px 5px -1px rgba(0, 0, 0, 0.20),
    0 6px 10px 0   rgba(0, 0, 0, 0.14),
    0 1px 18px 0   rgba(0, 0, 0, 0.12);
  pointer-events: auto;
  animation: ds-snackbar-in 0.225s ease-out;
}

/* Auto-icon (inherited from ds-alert ::before) needs vertical
 * centering instead of flex-start margin-top for the single-line case. */
.ds-snackbar:not(:has(.ds-alert__icon))::before {
  margin-top: 0;
}

.ds-snackbar__actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* MUI Snackbar action button — uppercase "UNDO"-style label.
 * Distinct from .ds-alert__action because it's the snackbar idiom. */
.ds-snackbar__label {
  background: transparent;
  border: none;
  padding: 6px 8px;
  color: var(--color-accent);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.46px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 4px;
  transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ds-snackbar__label:hover { background: rgba(63, 91, 255, 0.08); }
.ds-snackbar__label:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

/* Exit animation — JS adds this class right before removing the node. */
.ds-snackbar--leaving {
  animation: ds-snackbar-out 0.195s ease-in forwards;
}

@keyframes ds-snackbar-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ds-snackbar-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
  .ds-snackbar,
  .ds-snackbar--leaving { animation: none; }
}

} /* end @layer components */