/* ── Keyframe animations ────────────────────────────────
   These cannot be expressed as Tailwind utilities so they
   live here as plain CSS.
─────────────────────────────────────────────────────── */

/* Toast slides in from the right with a spring overshoot */
@keyframes flash-in {
  from { opacity: 0; transform: translateX(20px) scale(0.97); }
  to   { opacity: 1; transform: translateX(0)    scale(1);    }
}

/* Toast slides back out to the right on dismiss */
@keyframes flash-out {
  from { opacity: 1; transform: translateX(0)    scale(1);    }
  to   { opacity: 0; transform: translateX(20px) scale(0.96); }
}

/* Progress bar drains left-to-right, duration set per type below */
@keyframes flash-progress {
  from { width: 100%; }
  to   { width: 0%;   }
}


/* ── Toast enter / exit ─────────────────────────────── */

.flash-toast {
	animation: flash-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Added by flash_controller.js #dismissToast() */
.flash-toast.dismissing {
	animation: flash-out 0.3s ease forwards;
}

/* ── Left accent strip (::before) ──────────────────── */
/* A 4 px coloured bar pinned to the left edge of each toast */

.flash-toast { border: 1px solid var(--color-light-dark); }
.flash-notice  { border-left: var(--color-accent); }
.flash-success { border-left: var(--color-sage); }
.flash-alert   { border-left: var(--color-gold); }
.flash-error   { border-left: var(--color-error); }
.flash-info    { border-left: var(--color-plum); }

.flash-toast::before {
	content: '';
	position: absolute;
	inset-block: 0;   /* top: 0; bottom: 0 */
	left: 0;
	width: 4px;
	border-radius: 12px 0 0 12px;
}

.flash-notice::before  { background-color: var(--color-accent); }
.flash-success::before { background-color: var(--color-sage); }
.flash-alert::before   { background-color: var(--color-gold); }
.flash-error::before   { background-color: var(--color-error); }
.flash-info::before    { background-color: var(--color-plum); }

/* ── Auto-dismiss progress bar ──────────────────────── */
/* The animationend event on this element triggers        */
/* flash_controller.js #autoDismiss()                    */

.flash-progress {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 2px;
	border-radius: 0 0 0 12px;
	opacity: 0.5;
	animation: flash-progress linear forwards;
}

/* Per-type colours and durations */
.flash-notice  .flash-progress { background-color: var(--color-accent);       animation-duration: 5s; }
.flash-success .flash-progress { background-color: var(--color-sage);        animation-duration: 4s; }
.flash-alert   .flash-progress { background-color: var(--color-gold);        animation-duration: 6s; }
.flash-error   .flash-progress { background-color: var(--color-error);       animation-duration: 8s; }
.flash-info    .flash-progress { background-color: var(--color-plum); animation-duration: 5s; }


/* ── Dev preview pause state ───────────────────────── 
 * Pauses the progress bar animation when the container has
 * data-flash-paused="true" — used by the dev preview page.
 */
 
[data-flash-paused="true"] .flash-progress {
  animation-play-state: paused;
}
 
[data-flash-paused="true"] .flash-toast {
  animation: none;
}