/* ============================================================
   Select — a standalone picker: site/src/components/Select.astro
   The native <select> as a control: as tall as the XS / S button (54), radius 12 (controls, as chips and XS buttons),
   the button XS type (16, Medium 500), a chevron 16 wide, 24 in from the right. White with the subtle stroke, so it reads on
   light pages and on dark ones. A field inside a form is Form's own select (form.css), not this one.
   ============================================================ */
.select { display: block; }
.select__label { display: block; margin-bottom: var(--space-xs); color: var(--color-text-grey-inverted); }
.theme-dark .select__label { color: var(--color-text-grey); }
.select__control {
  display: block;
  width: 100%;
  height: var(--btn-h-xs);
  padding: 0 var(--space-lg) 0 var(--space); /* the text stops 8 before the chevron (24 in, 16 wide) */
  font-family: inherit;
  font-size: var(--text-btn-xs-size);
  font-weight: 500;
  color: var(--color-text-inverted);
  border: var(--border-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-white) url("../icons/chevron-down.svg") right var(--space) center / var(--space-sm) no-repeat;
  appearance: none;
  cursor: pointer;
}
.select__control:focus-visible { outline: var(--border-thick) solid var(--color-accent-indigo); outline-offset: var(--border-thin); }
.select__control option { color: initial; }