/* THE SELECT'S FIELD. An input-shaped surface: hover is a darker border, never a wash that greys its chips
   and marks. The open edge wears the focus ring, since a pointer-opened trigger never takes focus
   (`docs/accessibility.md`). With verbs, the surrounding surface paints the box (`field_surface.css`) and
   the trigger gives up what that box owns. */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-select {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
    min-height: var(--lotics-control-height);
    margin: 0;
    /* The control inset every editor pays, so a seating surface compensates with one number
       (`--lotics-control-text-inset`, `record_facts.css`). */
    padding-block: var(--lotics-control-pad-y);
    padding-inline: var(--lotics-control-pad-x);
    border-width: 1px;
    border-style: solid;
    border-color: var(--input);
    border-radius: var(--lotics-radius-control);
    /* Raised on any ground: transparent on a tinted panel it stops reading as a field. */
    background-color: var(--card);
    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);
    text-align: start;
    appearance: none;
    /* A trigger sets a value, so the kit's cursor rule keeps the arrow. */
    cursor: default;
    outline-style: none;
    transition-property: border-color, outline-color;
    transition-duration: var(--lotics-duration-fast);
    transition-timing-function: var(--lotics-ease-standard);
  }

  /* The dense band: a 40px field would stand above `IconButton`'s `md` discs; the inset follows the
     height. */
  .lotics-select[data-size="md"] {
    min-height: var(--lotics-control-content-height);
    padding-block: 0;
  }

  .lotics-select:not([data-disabled]):not([data-seamless]):hover {
    border-color: var(--lotics-border-hover);
  }

  /* The ring is the keyboard's, and a field's open box, since a pointer-opened trigger never takes focus.
     A cell's hairline already darkens while open, so only `:focus-visible` rings it. */
  .lotics-select:not([data-seamless]):focus-visible,
  .lotics-select:not([data-seamless]):not([data-chrome="cell"])[data-popup-open] {
    outline-width: var(--lotics-ring-width);
    outline-style: solid;
    outline-color: var(--ring);
    outline-offset: 0;
  }

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

  /* With verbs the trigger gives up edge, ground, inset and ring; `min-height: 0` too, or a second 40px
     floor grows the field by its border. */
  .lotics-select[data-seamless] {
    min-height: 0;
    padding-inline: 0;
    border-width: 0;
    background-color: transparent;
  }

  /* In a register cell or a brief the select is its value in a hairline frame hugging it: the field's own
     edge, so an editable value reads as editable at rest, with no chevron and none of the field's height,
     inset or ground. Hover and an open list darken the edge. */
  .lotics-select[data-chrome="cell"] {
    width: fit-content;
    max-width: 100%;
    min-height: 0;
    padding-block: 0;
    padding-inline: var(--lotics-space-6);
    background-color: transparent;
    /* It opens a list rather than setting in place — the kit's test for the hand. */
    cursor: pointer;
  }

  .lotics-select[data-chrome="cell"][data-popup-open] {
    border-color: var(--lotics-border-hover);
  }

  /* Inside its frame: a cell's run clips at the column edge, and a ring outside the value is cut there. */
  .lotics-select[data-chrome="cell"]:focus-visible {
    outline-offset: calc(var(--lotics-ring-width) * -1);
  }

  /* Grows, so the chevron stays right whatever the selection shows. */
  .lotics-select__selection {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
    gap: var(--lotics-space-4);
  }

  /* A chip inside the field fits its content height, so a chosen set never makes the field taller than
     every other control. */
  .lotics-select__selection {
    --lotics-status-block: 0;
  }

  /* A FIELD'S BOX SETS EVERY WORD IT SEATS AT THE INPUT RUNG — an option's, a person's, the prompt — as a typed
     value is: 16 on a phone, where a picked value at 14 read smaller than the typed one under it. */
  .lotics-select__selection[data-chrome="field"] {
    --lotics-text-sm: var(--lotics-input-text);
    --lotics-leading-sm: var(--lotics-input-leading);
    --lotics-leading-tight-sm: var(--lotics-input-leading-tight);
    --lotics-tracking-sm: var(--lotics-input-tracking);
  }

  /* A MULTI-VALUE READS AS A LIST: its chosen values one a line, never chips wrapping into each other; the
     field grows to seat them. */
  .lotics-select__selection[data-multi] {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    row-gap: var(--lotics-space-4);
  }

  /* In a field, at a group's rhythm — room between the lines, the first where a one-line field's words stand —
     and the chevron on that first line rather than floating in the middle of the list. */
  .lotics-select[data-multi][data-chrome="field"] {
    align-items: flex-start;
  }

  .lotics-select__selection[data-multi][data-chrome="field"] {
    row-gap: var(--lotics-space-8);
    padding-block: calc((var(--lotics-control-content-height) - var(--lotics-leading-sm)) / 2);
  }

  .lotics-select__icon[data-multi][data-chrome="field"] {
    height: var(--lotics-control-content-height);
  }

  /* The platform `<select>` inside the same trigger, transparent (`appearance: none` drops the UA box and
     indicator); it keeps the input rung — 16px on a phone, or iOS zooms. */
  .lotics-select__selection[data-native] {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border-width: 0;
    border-style: solid;
    border-color: var(--border);
    background-color: transparent;
    background-image: none;
    color: var(--lotics-ink-default);
    font-family: var(--font-sans);
    font-size: var(--lotics-input-text);
    line-height: var(--lotics-input-leading);
    letter-spacing: var(--lotics-input-tracking);
    font-weight: var(--lotics-weight-regular);
    appearance: none;
    /* The root owns the ring. */
    outline-style: none;
    cursor: default;
  }

  /* Focus lands on the element, so the root's ring follows it. */
  .lotics-select[data-native]:focus-within {
    outline-width: var(--lotics-ring-width);
    outline-style: solid;
    outline-color: var(--ring);
    outline-offset: 0;
  }

  .lotics-select__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    --lotics-icon-color: var(--lotics-ink-muted);
  }


  .lotics-select__positioner {
    z-index: var(--lotics-z-overlay);
  }

  .lotics-select__popup {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
    min-width: max(var(--anchor-width), var(--lotics-control-min-width));
    max-width: var(--available-width);
    max-height: var(--available-height);
    padding: var(--lotics-space-12);
    border-radius: var(--lotics-radius-card);
    background-color: var(--popover);
    box-shadow: var(--lotics-shadow-raised);
    transition-property: opacity;
    transition-duration: var(--lotics-duration-fast);
    transition-timing-function: var(--lotics-ease-standard);
  }

  .lotics-select__popup[data-starting-style],
  .lotics-select__popup[data-ending-style] {
    opacity: 0;
  }

  /* ─── The sheet ─── Under 768 the popup is a modal bottom sheet, decided by the viewport; placement is
     inline (as Base UI's), the rest here. */

  .lotics-select__backdrop {
    position: fixed;
    inset: 0;
    background-color: var(--lotics-scrim);
    backdrop-filter: blur(3px);
    z-index: var(--lotics-z-overlay);
    opacity: 1;
    transition-property: opacity;
    transition-duration: var(--lotics-duration-slow);
    transition-timing-function: var(--lotics-ease-standard);
  }

  .lotics-select__backdrop[data-starting-style],
  .lotics-select__backdrop[data-ending-style] {
    opacity: 0;
  }

  /* A closing scrim is not a target (`css_contract.test.ts` § a closing scrim). */
  .lotics-select__backdrop[data-ending-style] {
    pointer-events: none;
  }

  .lotics-select__popup[data-sheet] {
    width: 100%;
    min-width: 0;
    max-width: none;
    max-height: 90vh;
    padding-bottom: var(--lotics-space-32);
    border-start-start-radius: var(--lotics-radius-card);
    border-start-end-radius: var(--lotics-radius-card);
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    transition-property: opacity, transform;
    transition-duration: var(--lotics-duration-slow);
  }

  .lotics-select__popup[data-sheet][data-starting-style],
  .lotics-select__popup[data-sheet][data-ending-style] {
    transform: translateY(100%);
  }

  .lotics-select__close {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    padding-bottom: var(--lotics-space-8);
  }
}