/* ════════════════════════════════════════════════════════════════════════
   DS Select primitive (DS sub-step 2 — primitive 6)
   Auto-upgrades any `select.form-control` to a cross-browser-consistent
   styled dropdown: native focus / keyboard / option list preserved, just
   visual chrome standardized. Consumes tokens.css + ds-input.css. No JS.

   Approach: `appearance:none` + chevron SVG via background-image (data URI,
   no extra request). Sizes inherit from .form-control--sm/md/lg with
   padding-right adjusted per size to make room for the chevron.

   Escape hatch: `.form-control--native` opts back to native select UI for
   any consumer that needs OS-rendered dropdowns.

   States inherited from Input primitive: :focus-visible ring, :disabled,
   .form-control--error.
   ════════════════════════════════════════════════════════════════════════ */

select.form-control {
  /* strip native chrome (Safari needs -webkit) */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* make room for chevron on the right */
  padding-right: 32px;

  /* chevron — accent-bg-friendly grey stroke, sits at right:12px, vertically centered */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
}

/* Size-specific padding-right adjustments (tighter chevron room on sm, generous on lg) */
select.form-control--sm { padding-right: 28px; background-position: right 10px center; background-size: 10px 10px; }
select.form-control--lg { padding-right: 38px; background-position: right 14px center; background-size: 14px 14px; }

/* Hover/focus chevron darkens to match border accent */
select.form-control:hover:not(:disabled):not([readonly]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Disabled chevron — muted */
select.form-control:disabled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23D1D5DB' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Error chevron — red */
select.form-control--error,
select.form-control[aria-invalid="true"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23DC2626' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ── Escape hatch — opt back to native rendering ─────────── */
select.form-control--native {
  appearance: auto;
  -webkit-appearance: auto;
  -moz-appearance: auto;
  padding-right: 12px;
  background-image: none;
}