/*
 * Tint surface, soft hairline edge, deep icon — the kit's toned-surface convention; a heavier edge
 * reads as a generic library alert. Gutters are offsets from the rungs so a theme moving the scale
 * moves them.
 */
@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;
    /* Holds 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 glyph inherits the tone's ink and each `Text` paints its own, so a theme moves all five
   * tones in one place.
   */
  .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);
  }

  /* One title line tall, so the glyph centres on the title's first line, not on the body. */
  .lotics-callout__icon {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    height: var(--lotics-leading-sm);
  }

  /* Titles and descriptions flush left under one another; a description binds to its title, and a next
     title stands a rung clear of the description above it. */
  .lotics-callout__body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    gap: 0;
  }

  .lotics-callout__description + .lotics-callout__title,
  .lotics-callout__title + .lotics-callout__title {
    margin-block-start: var(--lotics-space-6);
  }

  /* A way to the place that clears it: words in the link's ink, underlined on reach, never a button's box. */
  .lotics-callout__link {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    align-self: flex-start;
    gap: var(--lotics-space-4);
    margin-block-start: var(--lotics-space-6);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--lotics-accent);
    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-medium);
    text-align: start;
    appearance: none;
    cursor: pointer;
    touch-action: manipulation;
  }

  .lotics-callout__link:hover {
    text-decoration-line: underline;
  }

  .lotics-callout__link:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: 0;
    border-radius: var(--lotics-radius-control);
  }

  .lotics-callout__arrow {
    flex-shrink: 0;
  }

  .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);
  }
}