/*
 * Component: Notification / Toast (.toast-host / .toast)
 * Rebuilt 2026-07-22 to match the source exactly (turn t4 "Toast notifications"): a light
 * tinted card with a 3px semantic left border, not a filled pill. No generic dismiss button —
 * success/error/favorite auto-dismiss with a leading glyph; info may carry an inline
 * "Скасувати" (Undo) text action instead. Success/info auto-dismiss ~3.5s, error persists.
 * A11y: role="status" (success/info/favorite) or role="alert" (error) — set in toast.js.
 */
.toast-host {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-toast-gap); /* 10px — matches source exactly */
  align-items: center;
  width: calc(100% - var(--space-8));
  max-width: 420px; /* matches source exactly */
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-toast-padding-y) var(--space-4); /* 13px/16px — matches source exactly */
  border-radius: var(--radius-small); /* 4px — matches source, not radius-medium */
  border-left: 3px solid var(--color-border-default);
  font-size: var(--font-size-button); /* 13px — matches source */
  background: var(--color-background-surface);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
  width: 100%;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast__icon { flex-shrink: 0; line-height: 1; }
.toast__action {
  margin-left: auto;
  flex-shrink: 0;
  color: inherit;
  text-decoration: underline;
  background: none;
  border: none;
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
  padding: var(--space-1);
}

.toast--success { background: color-mix(in srgb, var(--color-success) 10%, var(--color-background-surface)); border-left-color: var(--color-success); }
.toast--error   { background: color-mix(in srgb, var(--color-error) 10%, var(--color-background-surface));   border-left-color: var(--color-error); }
.toast--favorite { background: color-mix(in srgb, var(--color-accent-terracotta) 12%, var(--color-background-surface)); border-left-color: var(--color-accent-terracotta); }
.toast--info    { background: var(--color-background-surface); border-left-color: var(--color-text-muted); }