/* =========================================================================
   Core — swatch / thumbnail dropdown (CoreSwatchDropdown, `.cms-*`)

   The custom control core-swatch-dropdown.js builds on top of a hidden native
   <select data-swatch>: a `.cms-button` trigger that mimics `.core-select`, and
   a body-appended `.cms-listbox` of `.cms-option` rows, each drawing a
   `.cms-swatch` tile (material texture, handle thumbnail, …).

   These rules used to be a JS string injected by the script at first mount —
   which kept the component invisible to CSS audits and off the theme palette
   (efficiency #224). Registered as the `core-material-swatch` style handle and
   pulled in as a dep of `core-configurator` and the room planner (the door
   rail's material selects render the same widget inline since D2's Door
   Style modal retirement).

   One stylesheet deliberately narrows this on its own surface — Sheet/Trim's
   bulk-table row height (core-bulk-table.css) — which outranks these
   single-class rules on specificity, so load order doesn't matter.
   ========================================================================= */

.cms-wrap {
    position: relative;
}

/* The trigger IS a select — it replaces one — so it carries `.core-select` in
   its markup and takes the field box model (padding / border / radius / font /
   background / focus) from core-controls.css rather than restating it here
   (efficiency #229). It used to "match the native .core-select box exactly" by
   copying every value, which is how a material picker and the thickness
   <select> beside it could drift apart one declaration at a time. Only what a
   <select> is not stays below: a flex row with a label and a swatch in it.

   No dropdown arrow: the theme strips it from every native select
   (`select { appearance: none }` in main.css), so the swatch button matches by
   not drawing one either.

   font-family / font-weight are declared because a <button> inherits
   neither. */
.cms-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-family: inherit;
    font-weight: var(--fw-regular);
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.cms-button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.cms-button__label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Body-appended and position:fixed, so this competes directly with the modal
   tier — it must outrank any modal (--z-modal + 1).

   Deliberately NOT a `.core-popover` consumer, though it floats and was
   counted as one of the six popover-tier bodies in efficiency #230:
   Design.md §6.1 seats "dropdown listboxes" on rung 3 WITH the modal
   panels, not on rung 2 with popovers and tooltips — which is the same
   reason it sits above --z-modal here. --shadow-3 is correct; don't step
   it down to --shadow-2 in a later alignment pass. The --r-sm radius is
   likewise deliberate: it matches `.cms-button` above, so the open
   listbox reads as the same control as its closed trigger. */
.cms-listbox {
    position: fixed;
    z-index: calc(var(--z-modal) + 2);
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--paper);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-3);
    max-height: 320px;
    overflow: auto;
    box-sizing: border-box;
}

/* <optgroup> labels render as non-selectable header rows. */
.cms-group {
    padding: 6px 6px 2px;
    font-size: var(--fs-12);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
}

.cms-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px;
    border-radius: var(--r-sm);
    cursor: pointer;
}

/* .cms-active is the keyboard cursor; it and pointer hover read the same. */
.cms-option:hover,
.cms-option.cms-active {
    background: var(--paper-sunk);
}

.cms-option[aria-selected="true"] {
    font-weight: var(--fw-semibold);
}

.cms-option__label {
    flex: 1 1 auto;
}

/* The per-row tile. background-image is painted by the variant's paintTile;
   the flat background-color shows through until (or instead of) a texture. */
.cms-swatch {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border: 1px solid var(--rule-interactive);
    border-radius: var(--r-sm);
    background-size: cover;
    background-position: center;
    background-color: var(--rule-strong);
}

/* Image-less handle rows: reserve the column but draw nothing. */
.cms-swatch--blank {
    border: none;
    background: transparent;
}