/* Combo box — COMBOBOX (INVENTORY L3; SPEC.md §4.14), measured on the Font, Display › Settings and Run dialogs.
   Built by js/components/combobox.js. */
.w2k-combo {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  height: var(--metric-combo-height);
  background: var(--sys-window);
  box-shadow: var(--edge-sunken);
  color: var(--sys-window-text);
  outline: none;
  user-select: none;
  vertical-align: top;
}
.w2k-combo[data-style="simple"] { display: inline-flex; flex-direction: column; height: auto; background: none; box-shadow: none; }
.w2k-combo__options { display: none; }

/* Drop-down list field: the selection rect is the inner area inset 1px (stopping 1px before the button); the text pen
   1px inside it, the line centered (floor) in the inner height. */
.w2k-combo__field {
  position: absolute;
  left: 3px;
  top: 3px;
  bottom: 3px;
  right: calc(2px + var(--metric-scrollbar-size) + 1px);
  overflow: hidden;
  white-space: pre;
}
.w2k-combo__field > span {
  position: absolute;
  left: 1px;
  top: round(down, (100% + 2px - var(--line-height-ui)) / 2 - 1px, 1px);
}
.w2k-combo[role="combobox"]:is(:focus, .is-focus):not([data-open]) > .w2k-combo__field { background: var(--color-row-hilight, var(--sys-hilight)); color: var(--color-row-hilight-text, var(--sys-hilight-text)); }

/* ComboBoxEx (L4): the 16px icon 3px into the field at its top, the text 20px after the icon's left (Look in). */
.w2k-combo[data-ex] { height: var(--metric-comboex-height); }
.w2k-combo__field > .w2k-combo__icon { position: absolute; left: 3px; top: 0; width: 16px; height: 16px; }
.w2k-combo__field > .w2k-combo__icon:not([src]) { display: none; }
.w2k-combo[data-ex] > .w2k-combo__field > span { left: 23px; }
/* ComboBoxEx list rows: as tall as the field's inside, the 16px icon centred, the text on the row's middle. */
.w2k-combo__list[data-ex] [role="option"] { height: var(--metric-comboex-item-height); line-height: var(--metric-comboex-item-height); }
.w2k-combo__list [role="option"] > .w2k-combo__icon { width: 16px; height: 16px; margin: calc((var(--metric-comboex-item-height) - 16px) / 2) 4px 0 calc(var(--indent, 0) * 10px); vertical-align: top; }

/* Color combo (owner-drawn): a 24×12 swatch framed in WindowText 1px into the field, the text 27px into it. */
.w2k-combo[data-swatches] > .w2k-combo__field::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 1px;
  width: 24px;
  height: 12px;
  box-sizing: border-box;
  border: 1px solid var(--sys-window-text);
  background: var(--swatch, transparent);
}
.w2k-combo[data-swatches] > .w2k-combo__field > span { left: 27px; }
.w2k-combo__list [role="option"][style*="--swatch"] { position: relative; padding-left: 28px; }
.w2k-combo__list [role="option"][style*="--swatch"]::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0;
  width: 24px;
  height: 12px;
  box-sizing: border-box;
  border: 1px solid var(--sys-window-text);
  background: var(--swatch);
}

/* Editable (drop-down / simple): an edit without its own edge. */
.w2k-combo__edit {
  position: absolute;
  left: 2px;
  top: calc(2px + var(--metric-edit-text-top));   /* the line 1px below the inner edge, as in an edit (Run) */
  height: var(--line-height-ui);
  right: calc(2px + var(--metric-scrollbar-size));
  box-sizing: border-box;
  margin: 0;
  border: 0;
  padding: 0 0 0 var(--metric-edit-margin);
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: var(--line-height-ui);
  caret-color: var(--sys-window-text);
  outline: none;
}
.w2k-combo__edit::selection { background: var(--sys-hilight); color: var(--sys-hilight-text); }
.w2k-combo[data-style="simple"] > .w2k-combo__edit {
  position: static;
  display: block;
  width: 100%;
  height: var(--metric-edit-height);
  /* an input centres its line in the content box: the bottom padding pins the line to the top (as input.w2k-edit) */
  padding: calc(2px + var(--metric-edit-text-top)) 0 calc(var(--metric-edit-height) - 2px - var(--metric-edit-text-top) - var(--line-height-ui)) calc(2px + var(--metric-edit-margin));
  background: var(--sys-window);
  box-shadow: var(--edge-sunken);
}
.w2k-combo__simple-list { flex: 1; min-height: 0; }   /* the list fills the rest of the control, right below the edit */

/* The button: a scroll-bar-style arrow button filling the inner height — inside the 2px client edge; a theme with a
   thinner edge grows it by --metric-drop-button-grow on every side. */
.w2k-combo__button {
  position: absolute;
  top: calc(2px - var(--metric-drop-button-grow));
  right: calc(2px - var(--metric-drop-button-grow));
  bottom: calc(2px - var(--metric-drop-button-grow));
  width: calc(var(--metric-scrollbar-size) + 2 * var(--metric-drop-button-grow));
  background: var(--color-control-face);
  box-shadow: var(--edge-control-raised);
}
.w2k-combo__button::before {
  content: "6";
  position: absolute;
  left: calc(var(--metric-scrollbar-glyph-left) + var(--metric-drop-button-grow));
  /* Centred at floor: the same in 16 and 17px buttons (Font, Run), 1px lower in an 18px one (Open's 22px combos). */
  top: calc(var(--metric-scrollbar-glyph-top) + round(down, (100% - 16px) / 2, 1px));
  font: var(--font-glyph-scroll);
  color: var(--sys-btn-text);
}
.w2k-combo__button[data-pressed], .w2k-combo__button.is-active { box-shadow: inset 0 0 0 1px var(--sys-btn-shadow); }
.w2k-combo__button:is([data-pressed], .is-active)::before { transform: translate(1px, 1px); }

/* Disabled: ButtonFace, GrayText, embossed arrow (knowledge). */
.w2k-combo[aria-disabled="true"], .w2k-combo:has(> .w2k-combo__edit:disabled) { background: var(--color-surface); color: var(--sys-gray-text); }
.w2k-combo:is([aria-disabled="true"], :has(> .w2k-combo__edit:disabled)) > .w2k-combo__button::before {
  color: var(--color-disabled-text);
  text-shadow: 1px 1px 0 var(--color-disabled-emboss);
}

/* Open list: a list box in a 1px WindowFrame border (knowledge), above everything; slides open per Effects. Doubled
   class: it wins over the list box's own client edge and padding whatever order the style sheets load in. */
.w2k-listbox.w2k-combo__list, .w2k-combo__list {
  position: absolute;
  z-index: 2000000;
  box-sizing: border-box;
  padding: 1px;
  box-shadow: inset 0 0 0 1px var(--sys-window-frame);
  font: inherit;
}
html[data-combo-slide="true"] .w2k-combo__list[data-opening="down"] { animation: w2k-combo-slide-down var(--duration-combo) ease-out; }
html[data-combo-slide="true"] .w2k-combo__list[data-opening="up"] { animation: w2k-combo-slide-up var(--duration-combo) ease-out; }
@keyframes w2k-combo-slide-down { from { clip-path: inset(0 0 100% 0); } }
@keyframes w2k-combo-slide-up { from { clip-path: inset(100% 0 0 0); } }