/* ============================================
   xm-select — single-select dropdown for XmField (Story 2.3).

   Composes XmField (chrome) + xm-overlay (anchored listbox). This file styles
   ONLY the bespoke parts: the closed control (a full-bleed <button> inside the
   base's .field__control wrapper), the chevron, and the listbox panel content
   projected into the overlay. Positioning / elevation of the panel surface is
   owned by xm-overlay; here we style the option rows inside it.

   Surface & ink (AD-13):
     • Closed control rides the inverse-surface card tier → inverse-on-surface
       ink, inverse-on-surface-muted for the placeholder.
     • The listbox rows sit on the overlay's inverse-surface panel → ink stays
       inverse-on-surface; hover uses the MD3 state layer.
     • The SELECTED option tints with the coral primary-container and pairs
       on-primary-container ink (matching that surface). Coral = selection only,
       never severity (AD-11).

   BEM block: `select`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
   ============================================ */

/* ---------- Closed control — full-bleed button in the field wrapper ---------- */
.select__control {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  appearance: none;
  border: none;
  outline: none;
  background: transparent;
  color: var(--md-sys-color-inverse-on-surface);
  font:
    var(--md-sys-typescale-body-large-weight)
    var(--md-sys-typescale-body-large-size) /
    var(--md-sys-typescale-body-large-line-height)
    var(--md-sys-typescale-body-large-font);
  padding: 0 var(--s-3);
  text-align: left;
  cursor: pointer;
}
.select__control:disabled {
  cursor: not-allowed;
}

/* ---------- Value / placeholder ---------- */
.select__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.select__value--placeholder {
  color: var(--xm-color-inverse-on-surface-muted);
}

/* ---------- Chevron — rotates on open (short3, standard) ---------- */
.select__chevron {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--md-sys-color-inverse-on-surface);
  transition: transform var(--md-sys-motion-duration-short3)
    var(--md-sys-motion-easing-standard);
}
.select__chevron--open {
  transform: rotate(180deg);
}

/* ---------- Listbox panel content (inside the overlay) ---------- */
.select__listbox {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-0-5);
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--xm-scrollbar-thumb-inverse) transparent;
}
.select__listbox::-webkit-scrollbar {
  width: var(--s-scrollbar-w);
}
.select__listbox::-webkit-scrollbar-track {
  background: transparent;
}
.select__listbox::-webkit-scrollbar-thumb {
  background: var(--xm-scrollbar-thumb-inverse);
  border-radius: var(--md-sys-shape-corner-full);
  border: 2px solid transparent;
  background-clip: content-box;
}
.select__listbox::-webkit-scrollbar-thumb:hover {
  background: var(--xm-scrollbar-thumb-inverse-hover);
  background-clip: content-box;
}

/* ---------- Option rows ---------- */
.select__option {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--md-sys-shape-corner-small);
  color: var(--md-sys-color-inverse-on-surface);
  font:
    var(--md-sys-typescale-body-medium-weight)
    var(--md-sys-typescale-body-medium-size) /
    var(--md-sys-typescale-body-medium-line-height)
    var(--md-sys-typescale-body-medium-font);
  cursor: pointer;
  user-select: none;
}
.select__option-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.select__option-check {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--md-sys-color-primary);
}

/* Active (keyboard / pointer hover) — the MD3 state layer over the panel ink. */
.select__option--active {
  background: color-mix(
    in oklab,
    var(--md-sys-color-inverse-on-surface)
      var(--md-sys-state-hover-state-layer-opacity),
    transparent
  );
}

/* Selected — coral primary-container tint + on-primary-container ink (AD-13). */
.select__option--selected {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
.select__option--selected .select__option-check {
  color: var(--md-sys-color-on-primary-container);
}
/* Selected AND active — keep the coral identity, lift slightly via the state
   layer so the keyboard focus is still legible on the tint. */
.select__option--selected.select__option--active {
  background: color-mix(
    in oklab,
    var(--md-sys-color-on-primary-container)
      var(--md-sys-state-hover-state-layer-opacity),
    var(--md-sys-color-primary-container)
  );
}

/* Disabled option — reduced emphasis, no pointer. */
.select__option--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}