/* Toast: a flash message in a pill at the top of the page, in for a few
   seconds and out again (the flash controller hides it on animationend, so
   the animation keeps its length even with reduced motion; only the slide
   goes). Hovering or focusing it holds it. data-tone="danger" for an alert. */
.toast {
  animation: toast-in-out 4s 200ms both;
  background: var(--color-surface-3);
  border: 0;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-overlay);
  color: var(--color-text);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  inline-size: min(calc(100% - 2 * var(--gutter)), 32rem);
  inset: var(--space-s) auto auto 50%;
  line-height: var(--leading-snug);
  margin: 0;
  padding: var(--space-xs) var(--space-m);
  position: fixed;
  text-align: center;
  translate: -50% 0;
  z-index: var(--z-overlay);

  &:is(:hover, :focus-within) {
    animation-play-state: paused;
  }
}

.toast[data-tone="danger"] {
  color: var(--color-red);
}

@keyframes toast-in-out {
  0% { opacity: 0; translate: -50% -0.5rem; }
  5%, 75% { opacity: 1; translate: -50% 0; }
  100% { opacity: 0; translate: -50% -0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  @keyframes toast-in-out {
    0%, 100% { opacity: 0; }
    5%, 75% { opacity: 1; }
  }
}