/*
 * ONE choice, two skins.
 *
 * `segmented` is a RECESSED TRACK with one cell raised out of it. The track is
 * the muted ground at the system control height, so the control lines up with
 * the inputs and buttons in a toolbar band; the checked cell takes the card
 * ground and the hairline lift, which is what makes it read as ON TOP rather
 * than as merely a different colour. Its unchecked cells lift TOWARD that white
 * on hover rather than washing darker: the neutral wash ladder is invisible
 * against the track, which is already at its first rung.
 *
 * `chips` is free-standing pills at the same control height, and THE CHOSEN CHIP
 * IS AN EDGE, NOT A GROUND. Its ground is every other chip's, and it takes a
 * doubled `--primary` border instead — a ground is the row's language and a chip
 * is a control, so painting a selection as a fill makes two altitudes say the
 * same thing in the same paint, and it spends the brand on a selection. The
 * second pixel is an INSET ring: a border would grow the box and reflow the
 * chip's neighbours the moment it was picked.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-choice-strip {
    display: flex;
    flex-direction: row;
    min-width: 0;
    margin: 0;
  }

  .lotics-choice-strip[data-variant="segmented"] {
    align-items: stretch;
    /* The track hugs its content; a call site that wants it to fill its parent
       passes `style={{ alignSelf: "stretch" }}`. */
    align-self: flex-start;
    height: var(--lotics-control-height);
    /* 2 and 3 — the seam between cells and the track's own lip, each a
       fraction of the smallest rung rather than a number of its own. */
    gap: var(--lotics-space-2);
    padding: var(--lotics-space-2);
    border-radius: var(--lotics-radius-control);
    background: var(--muted);
  }

  .lotics-choice-strip[data-variant="chips"] {
    align-items: center;
    flex-wrap: wrap;
    gap: var(--lotics-space-8);
  }

  /* One row, the tail a swipe away. The trailing gutter keeps the last chip off
     the frame edge mid-scroll. */
  .lotics-choice-strip[data-variant="chips"][data-overflow="scroll"] {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-right: var(--lotics-space-8);
    scrollbar-width: none;
  }

  .lotics-choice-strip[data-disabled] {
    opacity: var(--lotics-disabled-opacity);
  }

  .lotics-choice-strip__cell {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--lotics-space-6);
    min-width: 0;
    margin: 0;
    appearance: none;
    background-image: none;
    color: var(--lotics-ink-default);
    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);
    font-feature-settings: var(--lotics-font-features);
    /* A cell SETS A VALUE — a parameter of the view, not an act. */
    cursor: default;
    touch-action: manipulation;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--lotics-duration-fast) var(--lotics-ease-standard);
  }

  .lotics-choice-strip__cell:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: 0;
  }

  .lotics-choice-strip[data-variant="segmented"] .lotics-choice-strip__cell {
    /* Grow to share a stretched track equally, but keep an `auto` basis so a
       hug-content track (the common toolbar case) sizes each cell to its
       label instead of collapsing it (a 0 basis truncates the text). */
    flex-grow: 1;
    flex-basis: auto;
    min-height: 30px;
    padding-block: var(--lotics-space-6);
    padding-inline: var(--lotics-space-12);
    border: 0 solid transparent;
    /* The track's radius less its lip, so the two curves stay concentric. */
    border-radius: calc(var(--lotics-radius-control) - var(--lotics-space-2));
    background: transparent;
  }

  .lotics-choice-strip[data-variant="segmented"] .lotics-choice-strip__cell:hover {
    background: color-mix(in srgb, var(--card) 50%, transparent);
  }

  .lotics-choice-strip[data-variant="segmented"] .lotics-choice-strip__cell:active {
    background: var(--card);
  }

  .lotics-choice-strip[data-variant="segmented"] .lotics-choice-strip__cell[data-checked] {
    background: var(--card);
    box-shadow: var(--lotics-shadow-hairline);
  }

  .lotics-choice-strip[data-variant="chips"] .lotics-choice-strip__cell {
    flex-shrink: 0;
    height: var(--lotics-control-height);
    padding-block: 0;
    padding-inline: var(--lotics-space-12);
    border-width: 1px;
    border-style: solid;
    border-color: var(--border);
    border-radius: var(--lotics-radius-control);
    background: var(--card);
  }

  .lotics-choice-strip[data-variant="chips"] .lotics-choice-strip__cell:hover {
    background: var(--lotics-wash-selected);
  }

  .lotics-choice-strip[data-variant="chips"] .lotics-choice-strip__cell:active {
    background: var(--lotics-wash-press);
  }

  .lotics-choice-strip[data-variant="chips"] .lotics-choice-strip__cell[data-checked] {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
  }

  .lotics-choice-strip__dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: var(--lotics-radius-full);
    background: var(--lotics-choice-strip-dot, var(--lotics-tone-zinc-solid));
  }

  .lotics-choice-strip__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-regular);
    font-feature-settings: var(--lotics-font-features);
    color: var(--lotics-ink-muted);
    /* One line, clipped — a cell that wraps breaks the strip's height. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .lotics-choice-strip__cell:hover .lotics-choice-strip__label,
  .lotics-choice-strip__cell[data-checked] .lotics-choice-strip__label {
    color: var(--lotics-ink-default);
  }

  /* The chosen option steps regular → medium, which is the step `Tabs` takes for
     the same question. Semibold would be a third signal on top of the ground and
     the ring, and the heading ramp is semibold at every rung — a filter value at
     heading weight. */
  .lotics-choice-strip__cell[data-checked] .lotics-choice-strip__label {
    font-weight: var(--lotics-weight-medium);
  }

  /* A count is two or three figures and never clips — the label it qualifies is
     the item that yields inside a squeezed cell. */
  .lotics-choice-strip__count {
    flex-shrink: 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);
    font-feature-settings: var(--lotics-font-features);
    color: var(--lotics-ink-muted);
    user-select: none;
  }
}