/* Opmaak van de raskeuze. Eén bestand, want de widget staat op vier pagina's
   die elk hun eigen <style> hebben. Gebruikt de kleurvariabelen die op al die
   pagina's bestaan, met een terugval voor het geval er ooit één ontbreekt. */
.raskeuze { display: flex; flex-direction: column; gap: .4rem; }
.raskeuze .raszoek,
.raskeuze .rasselect,
.raskeuze .rasander {
  width: 100%;
  font: inherit;
  color: var(--ink, #2A2622);
  background: var(--paper, #FAF6EC);
  border: 2px solid var(--ink, #2A2622);
  border-radius: 10px;
  padding: .5rem .6rem;
}
.raskeuze .raszoek {
  background: var(--card, #FFFDF7);
  font-size: .92rem;
}
.raskeuze .raszoek::placeholder { color: var(--graphite, #6E6558); }
.raskeuze .rasselect { cursor: pointer; }
.raskeuze .raszoek:focus-visible,
.raskeuze .rasselect:focus-visible,
.raskeuze .rasander:focus-visible {
  outline: 3px solid var(--honey, #B98A46);
  outline-offset: 2px;
}
.raskeuze [hidden] { display: none !important; }