/* ds:toast v0.1
   ============================================================
   Oganiko Toast — og-toast
   Canonical component · OS-000 Toast (snackbar / ephemeral notice)
   Source of truth: OS-000-Design-System/components/toast/toast.css
   ------------------------------------------------------------
   Corner notice. Assimilated from shadcn Sonner patterns —
   principles only; restyled with ODS tokens. ODS-owned contract,
   not a Sonner re-export. Not a raw dump.
   Token names only; fallbacks repeat current token values so the
   file works in the static catalogue. Do not invent new token values.
   version: 0.1.0 (2026-09-23) · maturity: experimental
   ------------------------------------------------------------
   Markup:
     <div class="og-toast-viewport og-toast-viewport--bottom-end"
          role="region" aria-label="Notices">
       <div class="og-toast og-toast--success" role="status" data-open="true">
         <span class="og-toast__icon" aria-hidden="true">…</span>
         <div class="og-toast__body">
           <p class="og-toast__title">Wednesday morning saved</p>
           <p class="og-toast__description">…</p>
         </div>
         <div class="og-toast__actions">
           <button type="button" class="og-toast__action">Undo</button>
           <button type="button" class="og-toast__close" aria-label="Dismiss">…</button>
         </div>
       </div>
     </div>
   Mount the viewport on document.body. --inline is for in-flow previews.
   ============================================================ */

.og-toast-viewport {
  position: fixed;
  z-index: var(--z-modal, 100);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3, 0.75rem);
  width: min(22rem, calc(100% - var(--spacing-8, 2rem)));
  pointer-events: none;
}

.og-toast-viewport--bottom-end {
  right: var(--spacing-4, 1rem);
  bottom: var(--spacing-4, 1rem);
}

.og-toast-viewport--bottom-start {
  left: var(--spacing-4, 1rem);
  bottom: var(--spacing-4, 1rem);
}

.og-toast-viewport--top-end {
  right: var(--spacing-4, 1rem);
  top: var(--spacing-4, 1rem);
}

.og-toast-viewport--top-start {
  left: var(--spacing-4, 1rem);
  top: var(--spacing-4, 1rem);
}

/* In-flow preview. Product pages use a corner position on document.body. */
.og-toast-viewport--inline {
  position: static;
  z-index: auto;
  width: min(22rem, 100%);
  pointer-events: auto;
}

.og-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3, 0.75rem);
  padding: var(--spacing-4, 1rem);
  background: var(--color-bg, #ffffff);
  color: var(--color-text, #000000);
  font-family: var(--font-primary, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));
  opacity: 0;
  transform: translateY(var(--spacing-2, 0.5rem));
  transition:
    opacity var(--transition-base, 200ms ease),
    transform var(--transition-base, 200ms ease);
}

.og-toast-viewport--top-end .og-toast,
.og-toast-viewport--top-start .og-toast {
  transform: translateY(calc(var(--spacing-2, 0.5rem) * -1));
}

.og-toast[data-open='true'] {
  opacity: 1;
  transform: none;
}

.og-toast__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-text-secondary, #333333);
}

.og-toast--success .og-toast__icon {
  color: var(--color-success, #34c755);
}

.og-toast--error .og-toast__icon {
  color: var(--color-error, #e53e3e);
}

.og-toast--info .og-toast__icon {
  color: var(--color-info, #3182ce);
}

.og-toast__icon svg,
.og-toast__icon iconify-icon {
  width: 24px;
  height: 24px;
  font-size: 24px;
  color: currentColor;
}

.og-toast__body {
  flex: 1;
  min-width: 0;
}

.og-toast__title {
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-semibold, 600);
  line-height: var(--leading-snug, 1.25);
  color: var(--color-text, #000000);
}

.og-toast__description {
  margin: var(--spacing-1, 0.25rem) 0 0;
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-regular, 400);
  line-height: var(--leading-normal, 1.5);
  color: var(--color-text-secondary, #333333);
}

.og-toast__actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-1, 0.25rem);
}

.og-toast__action {
  font-family: inherit;
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-medium, 500);
  line-height: var(--leading-snug, 1.25);
  color: var(--color-text, #000000);
  background: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: var(--radius-md, 8px);
  padding: var(--spacing-1, 0.25rem) var(--spacing-3, 0.75rem);
  cursor: pointer;
  transition:
    background-color var(--transition-fast, 150ms ease),
    border-color var(--transition-fast, 150ms ease);
}

.og-toast__action:hover {
  background: var(--color-bg-muted, #f5f5f3);
}

.og-toast__action:focus-visible,
.og-toast__close:focus-visible {
  outline: 2px solid var(--color-border-focus, #34c755);
  outline-offset: 2px;
}

.og-toast__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md, 8px);
  background: transparent;
  color: var(--color-text-secondary, #333333);
  cursor: pointer;
  transition: background-color var(--transition-fast, 150ms ease);
}

.og-toast__close:hover {
  background: var(--color-bg-muted, #f5f5f3);
  color: var(--color-text, #000000);
}

.og-toast__close svg,
.og-toast__close iconify-icon {
  width: 24px;
  height: 24px;
  font-size: 24px;
  color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .og-toast,
  .og-toast__action,
  .og-toast__close {
    transition: none;
  }

  .og-toast,
  .og-toast-viewport--top-end .og-toast,
  .og-toast-viewport--top-start .og-toast {
    transform: none;
  }
}