/*
 * A strip of floating cards centred at the top of the window. Base UI's own
 * stacking model (absolute toasts collapsed behind the frontmost one) is
 * deliberately NOT taken: two or three outcome reports read as a short list,
 * and a collapsed stack hides the ones a burst of failures produced.
 *
 * The viewport takes no pointer events, so the empty strip does not swallow a
 * press on whatever is under it; each toast takes them back, and hover still
 * pauses the timers because the event bubbles to the viewport.
 *
 * The gutter between the mark and the message is a 4-grid the 8-grid does not
 * name, written as an offset from the rungs so a theme that moves the scale
 * moves the toast with it (the convention `callout.css` set).
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-toast__viewport {
    position: fixed;
    top: 0;
    left: var(--lotics-space-32);
    right: var(--lotics-space-32);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--lotics-space-8);
    /* A reading width, like `PageContent`'s cap — a report is one line and a
       full-bleed strip makes it a banner. */
    max-width: 560px;
    margin-inline: auto;
    padding-top: var(--lotics-space-16);
    pointer-events: none;
    /* Over every overlay: a toast reports the outcome of the action the `Alert`
       on the rung below just confirmed, and a report nobody can read is not one. */
    z-index: var(--lotics-z-notification);
  }

  /* F6 focuses the strip itself, so it is a keyboard stop and rings like one —
     without this it wears the UA outline, which the kit's reset deliberately no
     longer suppresses on a `lotics-` element. */
  .lotics-toast__viewport:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: 0;
  }

  .lotics-toast {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-space-10);
    padding: var(--lotics-space-16);
    border-radius: var(--lotics-radius-control);
    background: var(--card);
    box-shadow: var(--lotics-shadow-raised);
    /* §5 rule 1: the card states the rung its message is set at, so nothing it
       hands down falls back to the UA's own face. */
    font-family: var(--font-sans);
    font-size: var(--lotics-text-sm);
    line-height: var(--lotics-leading-sm);
    letter-spacing: var(--lotics-tracking-sm);
    color: var(--lotics-ink-default);
    pointer-events: auto;
    /* A focusable card that is not a control: F6 reaches the strip, one Tab
       reaches this, and Escape then dismisses it — reading, not pressing. */
    cursor: default;
    /* It arrives from ABOVE, which is where the strip hangs from, and leaves the
       same way. The tokens collapse under `prefers-reduced-motion`, so there is
       no media query here — a transition that ends at once is not a strobe. */
    transition-property: opacity, transform;
    transition-duration: var(--lotics-duration-base);
    transition-timing-function: var(--lotics-ease-standard);
  }

  .lotics-toast:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: 0;
  }

  .lotics-toast[data-starting-style],
  .lotics-toast[data-ending-style] {
    opacity: 0;
    transform: translateY(-100%);
  }

  /* Dropped by the queue's limit — it is still mounted so it can animate out. */
  .lotics-toast[data-limited] {
    opacity: 0;
  }

  /* An 8px disc — an intrinsic size, not a gutter, and the full rung on a box
     that small IS the circle. */
  .lotics-toast__mark {
    display: block;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: var(--lotics-radius-full);
    background: var(--lotics-tone-zinc-solid);
  }

  .lotics-toast[data-type="success"] .lotics-toast__mark {
    background: var(--lotics-tone-green-solid);
  }
  .lotics-toast[data-type="error"] .lotics-toast__mark {
    background: var(--lotics-tone-red-solid);
  }
  .lotics-toast[data-type="warning"] .lotics-toast__mark {
    background: var(--lotics-tone-orange-solid);
  }

  /* The `sm` rung, stated rather than borrowed from `Text`: the message is this
     component's own element, so the three type tokens travel together. */
  .lotics-toast__title {
    display: block;
    min-width: 0;
    flex: 1;
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--lotics-text-sm);
    line-height: var(--lotics-leading-sm);
    letter-spacing: var(--lotics-tracking-sm);
    font-weight: var(--lotics-weight-regular);
    color: var(--lotics-ink-default);
    font-feature-settings: var(--lotics-font-features);
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }

  /* THE WAY BACK is a `Button`, so its box, its ink, its press target and its
     focus ring are the kit's and this sheet states only where it sits in the
     row: it must not shrink under the message beside it. The one control on an
     otherwise-reading card is `muted` — the card is already a floating surface,
     and a second filled control inside it would read as the report's subject
     rather than as the offer to undo it. */
  .lotics-toast__action {
    flex-shrink: 0;
  }
}