/**
 * Shared toast construct for every Torchbearer surface (admin, user pages, AudioLab, WireLab,
 * VideoLab, MediaLab, ExportLab, LiveLab, public pages).
 *
 * Per-site overrides: torchbearer-assets/{site-slug}/css/{site-slug}-toasts.css
 * (admin-site-toasts-editor). Timings: {site-slug}-toasts.js via window.__TB_TOAST_CONFIG.
 *
 * Also hosts the #adminTopbar boot-glow construct (stage rules + default tokens). Per-site glow
 * colour overrides belong in the same {slug}-toasts.css file as a separate block.
 *
 * Layout overrides (per surface via [data-tb-surface]):
 *   --tb-toast-inset-left  (default 230px)  settle distance from the left
 *   --tb-toast-inset-top   (default -2px)   settle distance from the top
 *   --tb-toast-height      (default 50px)   toast strip height
 *
 * Defaults live on :root so non-toast surfaces (e.g. /exporter/ status) can share the same X
 * token. Per-site {slug}-toasts.css should set the vars on `:root, .tb-toast-stack`.
 */

:root {
  --tb-toast-inset-left: 230px;
  --tb-toast-inset-top: -2px;
  --tb-toast-height: 50px;
}

/* Must stay above web/components/mve_nav_topbar.css (.mve-topbar 9000, flyout 9010). */
.tb-toast-stack {
  position: fixed;
  top: var(--tb-toast-inset-top, -2px);
  left: 0;
  z-index: 10050;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 1px;
  box-sizing: border-box;
  width: max-content;
  max-width: none;
  min-height: 0;
  padding: 0;
  /* px from the left after fly-in. Per-site {slug}-toasts.css sets --tb-toast-inset-left. */
  padding-left: var(--tb-toast-inset-left, 230px);
  margin: 0;
  pointer-events: none;
  overflow: visible;
}

.tb-toast-stack > * {
  pointer-events: auto;
}

.tb-toast {
  box-sizing: border-box;
  flex: 0 0 350px;
  width: 380px;
  height: var(--tb-toast-height, 50px);
  display: flex;
  align-items: center;
  padding: 8px 12px;
  margin-top: 1px;
  border-radius: 0;
  font-size: 14px;
  line-height: 1.35;
  word-break: break-word;
  animation: tb-toast-in var(--tb-toast-enter-ms, 520ms) ease-out;

  background: rgba(255, 255, 0, .25);
  border: 1px solid rgba(0, 0, 0, .6);
  color: rgba(255, 255, 255, .82);
  box-shadow: inset 0 0 24px rgba(255, 255, 255, .12);
}

.tb-toast--success {
  background: rgba(0, 255, 0, .1);
  border: 1px solid rgba(0, 250, 0, .15);
}

.tb-toast--warning {
  background: rgba(255, 95, 55, .52);
  border: 1px solid rgba(255, 95, 55, .15);
}

.tb-toast--error {
  background: rgba(255, 0, 0, .5);
  border: 1px solid rgba(255, 0, 0, .15);
}

.tb-toast--out {
  opacity: 0;
  transform: translateX(1000px);
  transition:
    opacity var(--tb-toast-out-ms, 200ms) ease,
    transform var(--tb-toast-out-ms, 200ms) ease;
}

@keyframes tb-toast-in {
  from {
    opacity: 0;
    transform: translateX(-1000px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tb-toast {
    animation: none;
  }

  .tb-toast--out {
    transition: opacity var(--tb-toast-out-ms, 200ms) ease;
    transform: none;
  }
}

/*
 * Per-surface hooks: shared-toasts.js adds `{surface}-toast-bg` to every toast and
 * `data-tb-surface="{surface}"` to the stack, so a per-site file can address one surface:
 * .admin-toast-bg, .user-toast-bg, .al-toast-bg, .wl-toast-bg, .vl-toast-bg,
 * .ml-toast-bg, .el-toast-bg, .public-toast-bg.
 * They are intentionally undeclared here — the neutral defaults above apply to all of them.
 */

/* Aux documents (LiveLab mixer float, popups) have no main content tile to anchor to. */
.tb-toast-stack--floating {
  padding-left: var(--tb-toast-inset-left-floating, 12px);
}

/*
 * #adminTopbar boot-glow construct (loaded on every toast-bearing surface).
 * Stage classes: .admin-topbar-init (server) → .admin-topbar-booting → .admin-topbar-loaded
 * (topbarBootGlow.js). Per-site colour/geometry tokens live in {slug}-toasts.css.
 */
.admin-topbar {
  --tb-topbar-glow-rgb: 209 255 0;
  --tb-topbar-glow-x: 0px;
  --tb-topbar-glow-y: -18px;
  --tb-topbar-glow-blur: 27px;
  --tb-topbar-glow-alpha-init: 0%;
  --tb-topbar-glow-alpha-boot: 40%;
  --tb-topbar-glow-alpha-loaded: 100%;
  --tb-topbar-glow-duration: 700ms;
  --tb-topbar-glow-ease: ease-out;
}

/* Glow on a pseudo so it never covers logo / burger / flyouts. */
.admin-topbar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  box-shadow: inset var(--tb-topbar-glow-x) var(--tb-topbar-glow-y) var(--tb-topbar-glow-blur)
    rgb(var(--tb-topbar-glow-rgb) / var(--tb-topbar-glow-alpha-init));
  transition: box-shadow var(--tb-topbar-glow-duration) var(--tb-topbar-glow-ease);
}
.admin-topbar.admin-topbar-booting::before {
  box-shadow: inset var(--tb-topbar-glow-x) var(--tb-topbar-glow-y) var(--tb-topbar-glow-blur)
    rgb(var(--tb-topbar-glow-rgb) / var(--tb-topbar-glow-alpha-boot));
}
.admin-topbar.admin-topbar-loaded::before {
  box-shadow: inset var(--tb-topbar-glow-x) var(--tb-topbar-glow-y) var(--tb-topbar-glow-blur)
    rgb(var(--tb-topbar-glow-rgb) / var(--tb-topbar-glow-alpha-loaded));
}
@media (prefers-reduced-motion: reduce) {
  .admin-topbar::before {
    transition: none;
  }
}

.admin-topbar > .left,
.admin-topbar > .admin-topbar-middle,
.admin-topbar > .right {
  position: relative;
  z-index: 1;
}