/*
 * toasts.css
 * Toast = surface + fixed positioning. overlays.css owns the motion;
 * this file states the direction and where it sits.
 *
 * Usage:
 *   <div class="toast success">Saved!</div>
 *
 * It leaves with `el.hidden = true` — the exit is a transition on the
 * hidden attribute, so there is no dismissing class to remember.
 *
 * For stacking multiple toasts, wrap in a .toast-stack container
 * (position: fixed; bottom; right; display: flex; flex-direction:
 * column-reverse; gap: 8px) and let toasts flow inside.
 */

.toast {
  position:   fixed;
  bottom:     1rem;
  right:      1rem;
  min-width:  240px;
  max-width:  360px;
  padding:    var(--space-lg) var(--space-2xl);
  box-shadow: var(--shadow-lg);
  z-index:    100;
  --overlay-from: translateY(8px);
}

.toast-stack {
  position:       fixed;
  bottom:         1rem;
  right:          1rem;
  display:        flex;
  flex-direction: column-reverse;
  gap:            var(--space-sm);
  z-index:        100;
  pointer-events: none;
}
.toast-stack > .toast {
  position:        static;
  pointer-events:  auto;
}