/*
 * Tint surface + SOFT hairline edge + deep icon — the kit's toned-surface
 * convention, which is the tone roles: the family's wash under its own edge,
 * with an ink role carrying the valence. A heavier edge and a mid-rung glyph
 * read as a generic library alert.
 *
 * The gutters are a 4-grid the 8-grid does not name, written as offsets from the
 * rungs so a theme that moves the scale moves the callout with it.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-callout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    /* A `View` never shrank: the band held its size in a constrained row rather
       than squashing its message. */
    flex-shrink: 0;
    min-width: 0;
    gap: var(--lotics-space-10);
    padding: var(--lotics-space-12);
    border-width: 1px;
    border-style: solid;
    border-radius: var(--lotics-radius-control);
  }

  /* THE TONE'S INK IS A ROLE, on the surface that owns it: the glyph inherits it
     and every `Text` inside paints its own, so one declaration decides what a
     warning looks like and a theme moves all five together. */
  .lotics-callout[data-tone="info"] {
    color: var(--lotics-accent);
    background: var(--lotics-tone-blue);
    border-color: var(--lotics-tone-blue-strong);
  }
  .lotics-callout[data-tone="success"] {
    color: var(--lotics-ink-success);
    background: var(--lotics-tone-emerald);
    border-color: var(--lotics-tone-emerald-strong);
  }
  .lotics-callout[data-tone="warning"] {
    color: var(--lotics-ink-warning);
    background: var(--lotics-tone-amber);
    border-color: var(--lotics-tone-amber-strong);
  }
  .lotics-callout[data-tone="error"] {
    color: var(--lotics-ink-danger);
    background: var(--lotics-tone-red);
    border-color: var(--lotics-tone-red-strong);
  }
  .lotics-callout[data-tone="neutral"] {
    color: var(--lotics-ink-muted);
    background: var(--lotics-tone-zinc);
    border-color: var(--lotics-tone-zinc-strong);
  }

  .lotics-callout__body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    gap: var(--lotics-space-2);
    /* A quarter-rung nudge: the glyph's box is 18 and the first line's is 24, so
       the text sits a pixel high against it without it. */
    padding-block-start: var(--lotics-space-2);
  }

  .lotics-callout__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
    min-width: 0;
    gap: var(--lotics-space-8);
    margin-block-start: var(--lotics-space-6);
  }
}