/* Native select widgets vary substantially between browser engines. In
   particular, WebKit can paint its platform menu button over the background,
   padding, and font already supplied by CrysViz's component styles. Keep the
   component-specific colours and dimensions, but normalize the native chrome
   and provide one small shared chevron. */

select {
  -webkit-appearance: none;
  appearance: none;
  /* Was `color-scheme: dark`, hardcoded. That is what the UA uses to paint the
     native dropdown popup and the field's default chrome, so on a light theme
     every select rendered as a dark widget on a cream panel — unreadable, and
     unreachable from a theme file. */
  color-scheme: var(--color-scheme);
  font-size: var(--fs-base);
  line-height: 1.2;
  padding-right: 21px !important;
  /* A field has to look like a field. Without these the select blended into
     whatever group box it sat in. */
  background-color: var(--input-bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--fg-1);
  /* var() cannot resolve INSIDE a data: URI, so the whole URI is the token —
     that is the only way a theme can recolour the chevron. */
  background-image: var(--select-chevron) !important;
  background-position: right 6px center !important;
  background-repeat: no-repeat !important;
  background-size: 8px 5px !important;
}

select option {
  background-color: var(--chrome-2);
  color: var(--ink-6);
}