/*
 * THE STATUS INDICATOR, in two weights.
 *
 * The family is DATA, so the four roles arrive as custom properties the
 * component sets on itself and this sheet reads. The values below are the
 * neutral family's, which is what a mark with no colour named wears.
 *
 * `tonal` is the family's TONE ground with its TONE ink, never the solid shade
 * with white on it (composition.md §"A `Status` means STATE") — a saturated
 * fill per item turns a dense register into a paint chart. The solid keeps one
 * job, the dot, where the contrast is the point and the area is six pixels.
 */
@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;
    /* The dot sits closer to its word than a tonal pill's own contents do: 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;
  }

  /* A stored SELECT VALUE, whatever its arity: a single- and a multi-select
     value are the same field seen twice, so they get the same box. */
  .lotics-status[data-list] {
    flex-wrap: wrap;
    gap: var(--lotics-space-4);
  }

  .lotics-status[data-variant="tonal"] {
    gap: var(--lotics-space-4);
    padding-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);
  }

  /*
   * THE LIVE HALF BREATHES — a disc one pixel proud of the dot, in the dot's own
   * shade, fading between full and a third, so the mark reads as RUNNING rather
   * than as merely green. Centred by auto margins against a zero inset, the one
   * spelling that does not have to know 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;
  }

  /*
   * An INFINITE animation is the one thing the duration tokens cannot retime
   * safely: collapsed to 1ms the loop becomes a strobe. So this one stops
   * instead — see 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;
    }
  }

  .lotics-status__label {
    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-weight-medium);
    font-feature-settings: var(--lotics-font-features);
    color: var(--lotics-ink-default);
    text-align: start;
    /* A status reads on one line and truncates. */
    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);
  }

  /* Only when ASKED for — a label left to inherit takes its container's answer,
     which is what a container setting `user-select` is trying to say. */
  .lotics-status__label[data-select="none"] {
    user-select: none;
  }
  .lotics-status__label[data-select="auto"] {
    user-select: auto;
  }
}