/* Toast: a flash message in a pill at the top of the page, with a button that
   closes it. It stays until then or the next page (layouts/shop/_flash).
   data-tone="danger" for an alert. */
.toast {
  align-items: center;
  animation: toast-in var(--duration-slow) var(--ease-out) 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);
  gap: var(--space-2xs);
  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-3xs) var(--space-3xs) var(--space-3xs) var(--space-m);
  position: fixed;
  translate: -50% 0;
  z-index: var(--z-overlay);

  /* Shown as a row only while open: [popover] hides itself with display */
  &:popover-open {
    display: flex;
  }
}

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

.toast__message {
  flex: 1;
  padding-block: var(--space-2xs);
}

.toast__close {
  align-items: center;
  appearance: none;
  aspect-ratio: 1;
  background: transparent;
  block-size: 2.25rem;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  justify-content: center;
  transition: background var(--duration-fast) var(--ease-out);

  &:hover {
    background: var(--color-surface-2);
    color: var(--color-text);
  }
}

@keyframes toast-in {
  from {
    opacity: 0;
    translate: -50% -0.5rem;
  }
}

/* Contrast themes (forced colors) drop the pill's fill: it and its close
   button keep an edge */
@media (forced-colors: active) {
  .toast,
  .toast__close {
    border: var(--border-width) solid CanvasText;
  }
}