/*
 * ONE choice, two skins. `segmented` is a recessed track with the checked cell raised on the card
 * ground; unchecked cells lift toward white on hover, since the wash ladder is invisible on the
 * track. `chips` marks the chosen chip with a doubled `--primary` edge, not a ground (a fill is the
 * row's language and spends the brand); the second pixel is an inset ring so picking never reflows
 * neighbours.
 */
@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;
    /* Hugs its content; pass `style={{ alignSelf: "stretch" }}` to fill. */
    align-self: flex-start;
    height: var(--lotics-control-height);
    /* The seam and the track's lip, as fractions of the smallest rung. */
    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);
  }

  /* 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;
  }

  /*
   * Equal columns, as many as whole answers allow; the floor seats a word like "Interested" whole
   * beside its dot and key.
   */
  .lotics-choice-strip[data-variant="tiles"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(var(--lotics-control-height) * 3 + var(--lotics-space-16)), 1fr));
    gap: var(--lotics-space-8);
  }

  .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 view parameter, 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 {
    /* An `auto` basis so a hug-content track sizes cells to their labels; a 0 basis truncates. */
    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;
    /* Concentric with the track. */
    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);
  }

  /* A chip grown to a target, so the three skins read as one control. */
  .lotics-choice-strip[data-variant="tiles"] .lotics-choice-strip__cell {
    justify-content: flex-start;
    min-height: calc(var(--lotics-control-height) + var(--lotics-space-16));
    padding-block: var(--lotics-space-8);
    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);
    cursor: pointer;
  }

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

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

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

  /* A tile wraps where a strip's cell clips. */
  .lotics-choice-strip[data-variant="tiles"] .lotics-choice-strip__label {
    flex: 1 1 auto;
    white-space: normal;
    text-align: start;
    color: var(--lotics-ink-default);
    font-weight: var(--lotics-weight-medium);
  }

  /* The label wraps; the key keeps its width. */
  .lotics-choice-strip__key {
    flex-shrink: 0;
    margin-inline-start: auto;
  }

  /*
   * A key answering another strip keeps its place but goes quiet, so the armed strip reads as
   * armed.
   */
  .lotics-choice-strip__key[data-idle] {
    opacity: var(--lotics-disabled-opacity);
  }

  .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);
    /* A cell that wraps breaks the strip's height. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* A hidden copy at the chosen weight sizes the label, so a pick never widens its cell. */
  .lotics-choice-strip__label::after {
    content: attr(data-label);
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    font-weight: var(--lotics-weight-medium);
    user-select: none;
    pointer-events: none;
  }

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

  /* Regular → medium, as `Tabs`; semibold would be a third signal and heading weight. */
  .lotics-choice-strip__cell[data-checked] .lotics-choice-strip__label {
    font-weight: var(--lotics-weight-medium);
  }

  /* The label yields inside a squeezed cell; the count never clips. */
  .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;
  }
}