/* Floating cards centred at the top. Base UI's collapsed stack is not taken: a burst of reports reads as a
   short list, and collapsing hides failures. The viewport takes no pointer events so the empty strip
   swallows no press; hover still pauses timers because the event bubbles. The mark gutter is a 4-grid
   offset from the rungs, so a theme moving the scale moves it (as in `callout.css`). */
@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, or a one-line report becomes a banner. */
    max-width: 560px;
    margin-inline: auto;
    padding-top: var(--lotics-space-16);
    pointer-events: none;
    /* Over every overlay: a toast reports the action the `Alert` below just confirmed. */
    z-index: var(--lotics-z-notification);
  }

  /* F6 focuses the strip, so it rings like a keyboard stop; otherwise it wears the UA outline the reset
     leaves on `lotics-` elements. */
  .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 its rung, so nothing falls back to the UA 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;
    /* Focusable but not a control: one Tab reaches it and Escape dismisses it. */
    cursor: default;
    /* From above, where the strip hangs; the tokens collapse under `prefers-reduced-motion`, so no media
       query. */
    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%);
  }

  /* Still mounted so it can animate out. */
  .lotics-toast[data-limited] {
    opacity: 0;
  }

  /* An intrinsic size, 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);
  }

  /* Stated, not borrowed from `Text`, 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;
  }

  /* A `Button`, so this states only that it must not shrink; `muted`, since a filled control on a floating
     card would read as the report's subject. */
  .lotics-toast__action {
    flex-shrink: 0;
  }
}