/* Select-field component — the app's one-of-N picker shape on a native select.
   Public API (variables only; set them on any ancestor, never re-declare
   properties or re-style .select-field* from a page sheet — rake lint:hig):
     --select-field-width       (auto)   set 100% to fill, or a length
     --select-field-flex        (0 1 auto) set `1` to fill a flex row; pair it
                                          with --select-field-width: 0 so the
                                          control cannot size the row itself
     --select-field-min-height  (2.75rem) the touch floor; do not go under 44px
     --select-field-font-size   (0.9rem)
     --select-field-font-weight (600)
     --select-field-radius      (--radius-pill)
     --select-field-border      (--rule)
     --select-field-bg          (--input-bg)
     --select-field-color       (--text)
     --select-field-chevron     (--text-soft)
   The host owns the visible <label for>; the component owns only the control.

   Shape is deliberately the store lens's (groceries.css § Store lens picker):
   #3855 settles that a control's LOOK follows the shape of the choice — both
   are one-of-N over a user-authored set — while only its element and ARIA
   follow navigate-vs-mutate, which is invisible to the eye. Two pickers of the
   same shape that look different is the inconsistency that ruling prevents.

   Collaborators: components/_select_field.html.erb.
   State ladder: docs/wiki/style.md § The state ladder. */

.select-field {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: var(--select-field-width, auto);
  flex: var(--select-field-flex, 0 1 auto);
  max-width: 100%;
  min-width: 0;
}

/* appearance:none drops the UA arrow so the shared glyph is the only one;
   padding-right reserves its column. min-width:0 + ellipsis because the label
   can run to a domain maximum the control cannot widen for. */
.select-field__control {
  width: 100%;
  min-width: 0;
  min-height: var(--select-field-min-height, 2.75rem);
  appearance: none;
  box-sizing: border-box;
  padding: 0.3rem 1.8rem 0.3rem 0.7rem;
  border: 1px solid var(--select-field-border, var(--rule));
  border-radius: var(--select-field-radius, var(--radius-pill, 999px));
  background: var(--select-field-bg, var(--input-bg));
  color: var(--select-field-color, var(--text));
  font-family: inherit;
  font-size: var(--select-field-font-size, 0.9rem);
  font-weight: var(--select-field-font-weight, 600);
  text-overflow: ellipsis;
  cursor: pointer;
  outline: none;
}

/* The shared chevron glyph points UP (row_tools flips it with a `flipped:`
   option this does not take), and a closed picker wants a DOWN chevron —
   rotating here rather than adding a second glyph keeps icon_helper_test's
   ERB/JS parity assertion intact. Same reasoning as .store-lens__trigger svg. */
.select-field svg {
  position: absolute;
  right: 0.7rem;
  flex-shrink: 0;
  color: var(--select-field-chevron, var(--text-soft));
  transform: rotate(180deg);
  pointer-events: none;
}

@media (any-hover: hover) {
  .select-field__control:hover { border-color: var(--red); }
}

.select-field__control:active { box-shadow: var(--shadow-press); }

.select-field__control:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.select-field__control:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (any-hover: hover) {
  .select-field__control:disabled:hover { border-color: var(--select-field-border, var(--rule)); }
}

/* Interactive chrome carries no meaning on paper — print the chosen value as
   plain text rather than an empty pill with a chevron. */
@media print {
  .select-field svg { display: none; }
  .select-field__control {
    appearance: none;
    border: 0;
    padding: 0;
    background: none;
    font-weight: 400;
  }
}