/* Eyeston select - brands every dropdown. The native ) keep the native input, so a clinician can still type a value that is not in the list. eyeston-combobox.js wraps the input and adds a dropdown arrow as its own region, so the cursor is a hand over the arrow and the text caret inside the field. It also strips the `list` attribute (killing the browser's own datalist popup) and shows the branded panel instead. */ .eyeston-combobox { position: relative; display: block; width: 100%; min-width: 0; } .eyeston-combobox > input { width: 100%; } input.eyeston-combobox-input { padding-right: 30px !important; /* keep typed text clear of the arrow */ } .eyeston-combobox-arrow { position: absolute; top: 0; right: 0; height: 100%; width: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; /* hand over the arrow */ color: #64748b; z-index: 2; } :root[data-theme="dark"] .eyeston-combobox-arrow { color: #a7a29a; } .eyeston-combobox-chevron { width: 14px; height: 14px; pointer-events: none; /* clicks land on the arrow span, not the svg */ } /* Contexts that size their selects via CSS rules (which target