/*
 * Controls: one set of visual cues for every control in the app, so how a thing looks says what it does.
 *   select      a button that opens a list: a raised face, a chevron, a pointer
 *   text field  a place to type: an inset well, a text cursor
 *   button      something to press: a pointer, and it says when it cannot be pressed
 * Every component draws its own colours; none of them draws these cues, so a component's background can never take a chevron away. The
 * cues use the palette's own tokens (with fallbacks, for the pages that carry only some of them). Loaded after the shell and deck sheets.
 */

/* ---- selects: the chevron is two strokes of the text-dim colour, drawn in the background so it follows the theme ---------------------- */
select:not([multiple]):not([size]) {
  --chevron: var(--text-dim, #b0c0bd);
  appearance: none !important; -webkit-appearance: none !important;
  cursor: pointer !important;
  padding-right: 2.2em !important;
  background-image:
    linear-gradient(to top right, transparent calc(50% - 1px), var(--chevron) calc(50% - 1px), var(--chevron) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to top left, transparent calc(50% - 1px), var(--chevron) calc(50% - 1px), var(--chevron) calc(50% + 1px), transparent calc(50% + 1px)) !important;
  background-size: 0.5em 0.5em, 0.5em 0.5em !important;
  background-position: calc(100% - 1.15em) 52%, calc(100% - 0.7em) 52% !important;
  background-repeat: no-repeat !important;
  background-color: color-mix(in srgb, var(--text, #e8eee9) 9%, var(--surface, #182429)) !important; /* a raised face: lighter than the wells beside it */
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.3);
}
select:not([multiple]):not([size]):hover:not(:disabled) { --chevron: var(--text, #e8eee9); border-color: var(--text-dim, #b0c0bd); }
select:not([multiple]):not([size]):disabled { --chevron: var(--text-faint, #8aa09d); cursor: not-allowed !important; opacity: 0.55; }
select option { color: var(--text, #e8eee9); background-color: var(--surface, #182429); }

/* ---- text fields: an inset well with a text cursor ----------------------------------------------------------------------------------- */
textarea,
input:not([type]), input[type="text"], input[type="search"], input[type="number"], input[type="url"], input[type="email"], input[type="password"], input[type="tel"] {
  cursor: text;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
  background-color: color-mix(in srgb, #000 22%, var(--surface, #182429)); /* a well: darker than the raised controls beside it */
}
textarea:disabled, input:disabled { cursor: not-allowed; opacity: 0.55; }
textarea[readonly], input[readonly] { box-shadow: none; }

/* ---- buttons and links: pressable things say so, and say when they are not ------------------------------------------------------------ */
button:not(:disabled), [role="button"]:not([aria-disabled="true"]), summary, label[for], a[href], input[type="checkbox"], input[type="radio"], input[type="file"] { cursor: pointer; }
button:disabled, [role="button"][aria-disabled="true"] { cursor: not-allowed; opacity: 0.55; }
button:not(:disabled):active { transform: translateY(1px); }

/* ---- keyboard focus: the same visible ring on every control ---------------------------------------------------------------------------- */
:is(select, textarea, input, button, summary, a[href], [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--focus, #f4d98f);
  outline-offset: 1px;
}

@media (forced-colors: active) {
  select:not([multiple]):not([size]) { --chevron: ButtonText; border: 1px solid ButtonText; }
  button:disabled, select:disabled, input:disabled, textarea:disabled { opacity: 1; color: GrayText; border-color: GrayText; }
}