/*
 * THE SELECT'S FIELD. The trigger is an INPUT-shaped surface, so its hover
 * affordance is its BORDER and never a content wash, which would grey the chips
 * and marks it exists to show. The open edge wears the SAME ring keyboard focus
 * does, because a pointer-opened trigger never takes focus
 * (`docs/accessibility.md`).
 *
 * With VERBS on the field the surface around this trigger paints the box
 * (`field_surface.css`) and the trigger surrenders every property 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, the same one every other editor pays: a surface seating a
       field pulls it back by `--lotics-control-text-inset` (`record_facts.css`),
       and that compensation is one number. */
    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);
    /* The field surface is a RAISED one on ANY ground — on a tinted panel a
       transparent field inherits the tint and stops reading as one. */
    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 field trigger SETS a value rather than acting on its own — the kit's
       cursor rule keeps the arrow for it. */
    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: beside `IconButton`'s `md` discs a 40px field stands a rung
     above them and grows the band. The inset goes with the height. */
  .lotics-select[data-size="md"] {
    min-height: var(--lotics-control-content-height);
    padding-block: 0;
  }

  /* HOVER IS A DARKER EDGE — it reads as interactive without greying what the
     trigger is showing. */
  .lotics-select:not([data-disabled]):not([data-seamless]):hover {
    border-color: var(--lotics-border-hover);
  }

  .lotics-select:not([data-seamless]):focus-visible,
  .lotics-select:not([data-seamless])[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 is a box INSIDE the field's surface, so it gives up the
     edge, the ground, the inset and the ring. `min-height: 0` with them: a second
     40px floor inside a 40px box grows the field by its own border. */
  .lotics-select[data-seamless] {
    min-height: 0;
    padding-inline: 0;
    border-width: 0;
    background-color: transparent;
  }

  /* Grows, so the chevron stays pinned to the right edge whatever the selection
     is — a chip box, a comma summary or a placeholder. */
  .lotics-select__selection {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
    gap: var(--lotics-space-4);
  }

  /* NATIVE — the platform's own `<select>` inside the SAME trigger, transparent
     (`appearance: none` drops the UA's box and its indicator). The element still
     owns the input type ramp, 16px on a phone or iOS zooms a focused field. */
  .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, so the element inside it must not draw a second. */
    outline-style: none;
    cursor: default;
  }

  /* Focus lands on the element, not on the root, 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;
    /* Never narrower than the trigger, never wider than the room there is. */
    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 instead of an anchored panel — the
     VIEWPORT decides, never the column the trigger sits in. The placement is
     inline (Base UI's own is), and this is everything else. */

  .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 scrim on its way out is not a target — `css_contract.test.ts` § a closing
     scrim, which is where the reason is. */
  .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);
  }
}