/* Every form control in the drawer is drawn here, none by the browser: the
   dropdown, the number box, the slider, the colour well, loose ticks and
   radios. Same language as the rest of the drawer: ink outline, solid fill,
   hard offset shadow, blue and yellow. They stay the real elements
   (keyboard, labels, form.js), only their look changes; the list a dropdown
   opens is the system's. The sliding switch for .row.check ticks is in
   admin-surface.css. */

#admin select, #modal-root select {
  -webkit-appearance: none; appearance: none; padding-right: 34px; font-weight: 700;
  background-color: var(--surface); background-image: url(../img/ui/chevron.svg); background-repeat: no-repeat;
  background-position: right 9px center; background-size: 15px 15px; box-shadow: 2px 2px 0 var(--ink-line);
}
:is(#admin, .print-help) select:hover { background-color: var(--yellow-light); }
#admin select:active { box-shadow: none; translate: 2px 2px; }
body[data-admin-theme="dark"] :is(#admin, .print-help) select { background-image: url(../img/ui/chevron-light.svg); }
body[data-admin-theme="dark"] :is(#admin, .print-help) select:hover { background-color: var(--blue-deep); }

/* Number boxes: no browser spinner; the arrow keys and the wheel still step. */
:is(#admin, .print-help) input[type="number"] { -moz-appearance: textfield; appearance: textfield; font-weight: 700; font-variant-numeric: tabular-nums; }
:is(#admin, .print-help) input[type="number"]::-webkit-outer-spin-button, #admin input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Slider: an ink track and a yellow block for a thumb. */
#admin input[type="range"] { -webkit-appearance: none; appearance: none; height: 22px; background: transparent; cursor: pointer; }
#admin input[type="range"]::-webkit-slider-runnable-track { height: 8px; border: 2px solid var(--ink-line); border-radius: 999px; background: var(--blue-soft); }
#admin input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 22px; margin-top: -9px; border: 2px solid var(--ink-line); border-radius: 5px;
  background: var(--yellow); box-shadow: 2px 2px 0 var(--ink-line);
}
#admin input[type="range"]:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
#admin input[type="range"]:focus-visible::-webkit-slider-thumb { background: var(--blue); }

/* Colour well. */
#admin input[type="color"] { -webkit-appearance: none; appearance: none; padding: 0; height: 34px; border: 2px solid var(--ink-line); border-radius: 5px; box-shadow: 2px 2px 0 var(--ink-line); overflow: hidden; }
#admin input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
#admin input[type="color"]::-webkit-color-swatch { border: 0; }

/* A tick that is not a .row.check switch (chips, gallery cards), and radios. */
#admin input[type="checkbox"]:not(.row.check input), #admin input[type="radio"] {
  -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin: 0; cursor: pointer;
  border: 2px solid var(--ink-line); border-radius: 5px; background: var(--surface) center / 15px 15px no-repeat;
}
#admin input[type="radio"] { border-radius: 50%; }
#admin input[type="checkbox"]:not(.row.check input):checked { background-color: var(--yellow); background-image: url(../img/ui/check.svg); }
#admin input[type="radio"]:checked { background-color: var(--yellow); box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 10px var(--blue); }
#admin input[type="checkbox"]:not(.row.check input):focus-visible, #admin input[type="radio"]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--yellow); }
#admin input[type="checkbox"]:disabled, #admin input[type="radio"]:disabled, #admin select:disabled { opacity: .5; cursor: default; }

/* The keyboard's ring on the two controls this file draws with an id in the
   selector. `.row select:focus-visible` in admin.css and admin-surface.css
   cannot beat `#admin select` on specificity, so until 0.21 a dropdown or a
   colour well took the hard shadow and no ring at all: tabbing through
   Cameras, Look or Output showed nothing moving. Same halo as a button, over
   the same hard shadow (test/smoke-stress.mjs walks every panel by Tab). */
#admin select:focus-visible, #modal-root select:focus-visible, #admin input[type="color"]:focus-visible {
  outline: none; border-color: var(--blue); box-shadow: 2px 2px 0 var(--ink-line), 0 0 0 3px var(--yellow);
}