/**
 * @file src/toast.css
 * @description ALs-COMP-Toast — styles.
 *   Uses CSS-only stacking (flex column-reverse) — no JS position arithmetic.
 *   ALs-Petrol colour palette as CSS custom properties (--bg, --panel, etc.)
 *   All animations disabled when prefers-reduced-motion: reduce is active,
 *   but auto-dismiss (setTimeout) continues to work unchanged.
 */

/* ---------------------------------------------------------------------------
   Design tokens — ALs-Petrol palette
   Override these in consuming projects to customise colours.
--------------------------------------------------------------------------- */
.als-toast-host {
  --toast-bg:         #1A2F44;   /* panel-like surface */
  --toast-border:     #243D55;   /* subtle border */
  --toast-text:       #E6EEF5;   /* primary text */
  --toast-sub:        #8FA6BC;   /* secondary / muted text */
  --toast-shadow:     rgba(0, 0, 0, .45);

  /* Accent colours per variant (left border + icon) */
  --toast-success:    #26B896;   /* teal */
  --toast-error:      #FF6B6B;   /* red */
  --toast-warning:    #F0A500;   /* amber */
  --toast-info:       #5B9BD5;   /* blue */

  /* Countdown bar colours (slightly darker than accent) */
  --toast-bar-success: #1d9478;
  --toast-bar-error:   #cc5555;
  --toast-bar-warning: #c08400;
  --toast-bar-info:    #4a80b3;

  /* Sizing */
  --toast-width:      22rem;
  --toast-radius:     .45rem;
  --toast-icon-size:  1.25rem;
}

/* ---------------------------------------------------------------------------
   Container — fixed bottom-right, CSS stacking via flex column-reverse
   No JS position arithmetic needed; new toasts slide in at the bottom and
   the stack grows upward automatically.
--------------------------------------------------------------------------- */
.als-toast-host {
  /* Stacking context isolation — prevents z-index bleed from host page */
  position: fixed;
  inset: auto 1rem 1rem auto;   /* bottom-right anchor */
  z-index: 9999;

  display: flex;
  flex-direction: column-reverse; /* newest toast appears at bottom visually */
  gap: .75rem;

  /* Pointer events only on toast items, not the transparent gap area */
  pointer-events: none;

  /* Cap total height so the stack doesn't overflow short viewports */
  max-height: calc(100vh - 2rem);
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Individual toast
--------------------------------------------------------------------------- */
.als-toast {
  pointer-events: all;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .75rem 1rem .625rem;

  width: var(--toast-width);
  max-width: calc(100vw - 2rem);

  background: var(--toast-bg);
  border: 1px solid var(--toast-border);
  border-left: 3px solid var(--accent, var(--toast-info)); /* variant accent */
  border-radius: var(--toast-radius);
  box-shadow: 0 4px 16px var(--toast-shadow);

  position: relative;            /* needed for .als-toast__bar */
  overflow: hidden;

  /* Slide-in animation — overridden to none in reduced-motion mode */
  animation: als-toast-slide-in .3s ease forwards;
}

/* Variant accent colours applied via inline CSS variable on the element */
.als-toast[data-variant="success"] { --accent: var(--toast-success); }
.als-toast[data-variant="error"]   { --accent: var(--toast-error);   }
.als-toast[data-variant="warning"] { --accent: var(--toast-warning);  }
.als-toast[data-variant="info"]    { --accent: var(--toast-info);     }

/* ---------------------------------------------------------------------------
   Icon (inline SVG)
--------------------------------------------------------------------------- */
.als-toast__icon {
  flex-shrink: 0;
  width: var(--toast-icon-size);
  height: var(--toast-icon-size);
  margin-top: .1rem;    /* optical alignment with first text line */
  fill: var(--accent, var(--toast-info));
}

/* ---------------------------------------------------------------------------
   Body (text content area)
--------------------------------------------------------------------------- */
.als-toast__body {
  flex: 1;
  min-width: 0;    /* allow text to shrink inside flex */
}

.als-toast__text {
  margin: 0;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--toast-text);

  /* Prevent XSS via word-break — text is always set via textContent */
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------------
   Close button
--------------------------------------------------------------------------- */
.als-toast__close {
  /* Reset browser button defaults */
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;

  /* Minimum touch target 44×44 px (WCAG 2.5.5 AAA / 2.5.8 AA) */
  min-width: 44px;
  min-height: 44px;

  /* Visual size smaller than touch target — centred inside */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  color: var(--toast-sub);
  border-radius: .25rem;
  margin: -.4rem -.5rem -.4rem 0;   /* negative margin to use padding space */
  transition: color .15s, background .15s;
}

.als-toast__close:hover,
.als-toast__close:focus-visible {
  color: var(--toast-text);
  background: rgba(255, 255, 255, .08);
  outline: 2px solid var(--accent, var(--toast-info));
  outline-offset: -2px;
}

.als-toast__close svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
  pointer-events: none;   /* prevent click target confusion */
}

/* ---------------------------------------------------------------------------
   Countdown progress bar (bottom edge)
--------------------------------------------------------------------------- */
.als-toast__bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;

  /* Variant-specific bar colour */
  background: var(--bar-color, var(--toast-bar-info));

  /* Countdown animation — shrinks from 100% to 0 */
  animation: als-toast-timer linear forwards;
  /* duration is set inline via style="animation-duration: Xms" */
  transform-origin: left center;
}

.als-toast[data-variant="success"] .als-toast__bar { --bar-color: var(--toast-bar-success); }
.als-toast[data-variant="error"]   .als-toast__bar { --bar-color: var(--toast-bar-error);   }
.als-toast[data-variant="warning"] .als-toast__bar { --bar-color: var(--toast-bar-warning);  }
.als-toast[data-variant="info"]    .als-toast__bar { --bar-color: var(--toast-bar-info);     }

/* ---------------------------------------------------------------------------
   Exit animation (class added by JS before removal)
--------------------------------------------------------------------------- */
.als-toast.als-toast--leaving {
  animation: als-toast-slide-out .25s ease forwards;
}

/* ---------------------------------------------------------------------------
   Keyframes
--------------------------------------------------------------------------- */
@keyframes als-toast-slide-in {
  from {
    transform: translateX(120%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes als-toast-slide-out {
  from {
    transform: translateX(0);
    opacity: 1;
    max-height: 10rem;
    margin-bottom: 0;    /* gap handled by flex */
  }
  to {
    transform: translateX(120%);
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}

@keyframes als-toast-timer {
  from { width: 100%; }
  to   { width: 0;    }
}

/* ---------------------------------------------------------------------------
   Reduced-motion override
   Animations are removed; auto-dismiss via setTimeout still works normally.
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .als-toast {
    animation: none;
    /* Ensure toast is visible immediately (no slide-in) */
    transform: translateX(0);
    opacity: 1;
  }

  .als-toast.als-toast--leaving {
    animation: none;
    /* Hide immediately without slide-out */
    opacity: 0;
    pointer-events: none;
  }

  .als-toast__bar {
    /* Still animate the bar (non-decorative: shows remaining time),
       but use a simple opacity fade instead of motion */
    animation: als-toast-timer-reduced linear forwards;
  }
}

@keyframes als-toast-timer-reduced {
  from { opacity: 1; }
  to   { opacity: 0; }
}