/* Two weights. The family is data, so its four roles arrive as custom properties; the defaults are the
   neutral family's. `tonal` is the family's tone ground with its tone ink, never the solid with white
   (composition.md §"A `Status` means STATE"), since a saturated fill per item turns a register into a
   paint chart; the solid is for the dot alone. */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-status {
    --lotics-status-dot: var(--lotics-tone-zinc-solid);
    --lotics-status-wash: var(--lotics-tone-zinc);
    --lotics-status-edge: var(--lotics-tone-zinc-strong);
    --lotics-status-ink: var(--lotics-tone-zinc-ink);
    display: flex;
    flex-direction: row;
    align-items: center;
    /* Six pixels of ink need less air than a bordered ground. */
    gap: var(--lotics-space-6);
    min-width: 0;
    margin: 0;
    padding: 0;
    border-width: 0;
    border-style: solid;
    border-color: transparent;
    border-radius: 0;
    background: transparent;
  }

  /* Single- and multi-select values are one field seen twice, so one box. */
  .lotics-status[data-list] {
    flex-wrap: wrap;
    gap: var(--lotics-space-4);
  }

  /* `--lotics-status-block` is a container's channel: a field seating chips at its own height. */
  .lotics-status[data-variant="tonal"] {
    gap: var(--lotics-space-4);
    padding-block: var(--lotics-status-block, var(--lotics-space-4));
    padding-inline: var(--lotics-space-8);
    border-width: 1px;
    border-color: var(--lotics-status-edge);
    border-radius: var(--lotics-radius-control);
    background: var(--lotics-status-wash);
  }

  .lotics-status__dot {
    position: relative;
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: var(--lotics-radius-full);
    background: var(--lotics-status-dot);
  }

  /* A channel's mark in the dot's place, on the same gap. */
  .lotics-status__brand {
    display: flex;
    flex-shrink: 0;
  }

  /* The family's ink, not its solid: a stroke reads at text contrast, while the dot carries by area. */
  .lotics-status__glyph {
    --lotics-icon-color: var(--lotics-status-ink);
  }

  /* A disc one pixel proud of the dot, fading between full and a third, so the mark reads as running. Auto
     margins against a zero inset centre it without knowing the dot's size. */
  .lotics-status__glow {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 8px;
    height: 8px;
    border-radius: var(--lotics-radius-full);
    background: var(--lotics-status-dot);
    animation: lotics-status-pulse calc(var(--lotics-duration-slow) * 12.5) ease-in-out infinite;
  }

  /* The duration tokens cannot retime an infinite animation: at 1ms it strobes, so this one stops
     (docs/theming.md §2.3). */
  @media (prefers-reduced-motion: reduce) {
    .lotics-status__glow {
      animation: none;
    }
  }

  @keyframes lotics-status-pulse {
    from,
    to {
      opacity: 1;
    }
    50% {
      opacity: 0.3;
    }
  }

  /* The word, not the mark before it, is the status's baseline: a line lining it up by baselines (a phone's fact,
     label and value on one line) set its word by the dot's foot, two pixels under the label's. */
  /* `--lotics-status-weight` is a container's channel: a field reads its option as it reads any value. */
  .lotics-status__label {
    align-self: baseline;
    min-width: 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-status-weight, var(--lotics-weight-medium));
    font-feature-settings: var(--lotics-font-features);
    color: var(--lotics-ink-default);
    text-align: start;
    /* The ellipsis too where the line may not wrap, as on a folded run. */
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
    overflow-wrap: break-word;
  }

  .lotics-status[data-variant="tonal"] .lotics-status__label {
    color: var(--lotics-status-ink);
  }

  /* Folded onto a supporting line, it takes the line's rung, weight and ink, so the dot alone marks it as
     a state — and is words among the line's words, so the line's ellipsis cuts inside its label rather
     than leave a lone dot. */
  .lotics-status[data-size="xs"] {
    display: inline;
  }

  /* Whatever mark leads the word — the dot, a channel's brand, an icon — is inline on the word's line, centred
     on it, at the gap it keeps in a column: a brand left a flex box broke the line, stood a line above its word
     and pushed the word under the line's clip, and a glyph touched its word. */
  .lotics-status[data-size="xs"] .lotics-status__dot,
  .lotics-status[data-size="xs"] .lotics-status__brand,
  .lotics-status[data-size="xs"] .lotics-status__glyph {
    display: inline-flex;
    vertical-align: middle;
    margin-inline-end: var(--lotics-space-6);
  }

  .lotics-status[data-size="xs"] + .lotics-status[data-size="xs"] {
    margin-inline-start: var(--lotics-space-6);
  }

  .lotics-status[data-size="xs"] .lotics-status__label {
    display: inline;
    font-size: var(--lotics-text-xs);
    line-height: var(--lotics-leading-xs);
    letter-spacing: var(--lotics-tracking-xs);
    font-weight: var(--lotics-weight-regular);
    color: var(--lotics-ink-muted);
  }

  /* Only when asked, so a label otherwise inherits its container's `user-select`. */
  .lotics-status__label[data-select="none"] {
    user-select: none;
  }
  .lotics-status__label[data-select="auto"] {
    user-select: auto;
  }
}