/* =============================================================================
   FILE: resources/css/components/toast.css
   Frontend Spec Section 5.12 — Toast / Snackbar
============================================================================= */

#toast-root {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--tabbar-height) + var(--space-4) + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  pointer-events: none;
}

/* Hide above the sticky footer instead of the tab bar when one is present
   on the current screen — toggled via body class from screen JS if needed. */
body.has-sticky-footer #toast-root {
  bottom: calc(72px + var(--space-4));
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background-color: var(--color-ink);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  max-width: calc(100% - (var(--space-4) * 2));
  box-shadow: var(--shadow-sheet);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--ease-toast-in), transform var(--ease-toast-in);
}

.toast__check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.toast.is-leaving {
  transition: opacity var(--ease-toast-out), transform var(--ease-toast-out);
  opacity: 0;
}