/* ===============================================================
=  Choices.js — TURNOVER design system override
=================================================================
   choices.css (vendor) ships hardcoded pixel sizes and colours. This file
   re-expresses them as design tokens so an enhanced <select> is the same
   height, type size, radius and colour as a native one, in either theme and
   at every .tt-form / .tt-input-group size.

   Loaded after choices.css in core.js, so equal specificity wins here. Some
   vendor rules are scoped .choices[data-type*="…"] .foo, which is (0,3,0) —
   those need the same shape to be beaten, and are marked below.

   The visible control is .choices__inner, not .choices. .choices is only the
   positioning/flex shell, so every border, radius and background belongs on
   .choices__inner, and .tt-input-group's corner/border rules (which target the
   flex child) have to be forwarded to it.
   =============================================================== */

.choices {
    /* vendor: margin-bottom 24px + font-size 16px, both wrong in a form row */
    display: flex;
    margin-bottom: 0;
    min-width: 0;
    font-size: var(--form-input-font-size);

    --tt-choices-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3.5l9 9M12.5 3.5l-9 9' stroke='%23000' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}

/* ─── CONTROL ──────────────────────────────────────────────────── */

.choices__inner {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3xs);
    width: 100%;
    min-height: var(--form-input-height);
    padding: var(--form-input-padding);
    background-color: var(--bg-color);
    border: var(--border-thin) solid currentColor;
    border-radius: var(--input-border-radius);
    font-size: var(--form-input-font-size);
    box-sizing: border-box;
}

/* beats vendor .choices[data-type*=select-one] .choices__inner { padding-bottom: 7.5px } */
.choices[data-type*="select-one"] .choices__inner {
    padding: var(--form-input-padding);
}

/* ─── INSIDE AN INPUT GROUP ────────────────────────────────────── */
/* The group squares off interior corners and strips interior left borders on its
   direct children. .choices carries neither, so forward both to .choices__inner. */

.tt-input-group .choices {
    min-width: 0;
}

.tt-input-group .choices__inner {
    border-radius: 0;
}

.tt-input-group > .choices:first-child .choices__inner {
    border-top-left-radius: var(--input-border-radius);
    border-bottom-left-radius: var(--input-border-radius);
}

.tt-input-group > .choices:last-child .choices__inner {
    border-top-right-radius: var(--input-border-radius);
    border-bottom-right-radius: var(--input-border-radius);
}

.tt-input-group > * + .choices .choices__inner {
    border-left: 0;
}

/* ─── STATES ───────────────────────────────────────────────────── */
/* Same focus colour as every other DS control (see form-inputs.css FOCUS). */

.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
    border-color: var(--primary-color);
    /* same ring as a native grouped control — see the FOCUS note in form-widgets.css
       for the offset/width geometry this relies on */
    outline: var(--border-md) solid var(--primary-color);
    outline-offset: calc(var(--border-md) * -1);
}

/* the shell takes the tab stop; the ring belongs on the box that draws the border */
.choices:focus,
.choices .choices__input:focus {
    outline: none;
}

/* Flatten only the edge the dropdown joins, so the group corner rules above survive */
.choices.is-open:not(.is-flipped) .choices__inner {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.choices.is-flipped.is-open .choices__inner {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Validation — the original <select> keeps its tt-valid/tt-invalid class after Choices
   conceals it inside .choices__inner, so :has() can read the state off it. Declared after
   the focus rules and at higher weight, matching form-inputs.css where the validation
   border also outranks :focus. */
.choices .choices__inner:has(> select.tt-invalid) {
    border-color: var(--danger-color);
}

.choices .choices__inner:has(> select.tt-valid) {
    border-color: var(--success-color);
}

.choices.is-disabled .choices__inner,
.choices.is-disabled .choices__input {
    background-color: var(--bg-muted);
    border-color: var(--text-muted);
    color: var(--text-muted);
}

/* nothing to clear when the control can't be edited */
.choices.is-disabled .choices__button {
    display: none;
}

/* ─── SINGLE SELECT ────────────────────────────────────────────── */

.choices__list--single {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    /* room for the caret (and the clear button when a value is set) */
    padding: 0 var(--space-m) 0 0;
}

.choices__list--single .choices__item {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: inherit;
}

/* Caret — currentColor so it follows the theme; vendor hardcodes #333 */
.choices[data-type*="select-one"]::after {
    content: "";
    position: absolute;
    top: 50%;
    right: var(--space-2xs);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.3em 0.3em 0;
    border-color: currentColor transparent transparent transparent;
    margin-top: -0.15em;
    pointer-events: none;
}

.choices[data-type*="select-one"].is-open::after {
    border-width: 0 0.3em 0.3em;
    border-color: transparent transparent currentColor transparent;
    margin-top: -0.15em;
}

/* ─── MULTI SELECT — chips ─────────────────────────────────────── */

.choices__list--multiple {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3xs);
}

.choices__list--multiple .choices__item {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: var(--space-3xs) var(--space-2xs);
    /* em-relative so chips scale with the form size context */
    font-size: 0.85em;
    background-color: var(--primary-color);
    border: var(--border-thin) solid var(--primary-border-color);
    border-radius: var(--input-border-radius);
    color: var(--bg-color);
    word-break: normal;
}

.choices__list--multiple .choices__item.is-highlighted {
    background-color: var(--primary-hover-color);
    border-color: var(--primary-border-color);
}

.is-disabled .choices__list--multiple .choices__item {
    background-color: var(--text-muted);
    border-color: var(--text-muted);
}

/* ─── SEARCH INPUT ─────────────────────────────────────────────── */
/* Choices builds this as input[type="search"].choices__input, which the DS input rules
   deliberately skip (see the :where(:not(.choices__input)) guards in form-inputs.css and
   form-widgets.css). It has to read as bare text on the control, not as a field. */

.choices__input.choices__input--cloned {
    flex: 1 1 4rem;
    min-width: 4rem;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    color: inherit;
    font-size: inherit;
}

/* Single select puts its search box inside the dropdown, where it does want padding and
   a divider. Weight matches vendor's .choices[data-type*=select-one] .choices__input. */
.choices[data-type*="select-one"] .choices__list--dropdown .choices__input--cloned {
    flex: none;
    display: block;
    width: 100%;
    padding: var(--form-input-padding);
    border: 0;
    border-bottom: var(--border-thin) solid var(--border-muted);
    background-color: transparent;
    color: inherit;
}

.choices__placeholder {
    color: var(--text-muted);
    opacity: 1;
}

/* ─── DROPDOWN PANEL ───────────────────────────────────────────── */
/* Matches .tt-app-dropdown in dropdown.css so Choices reads like the app's own menus. */

.choices__list--dropdown,
.choices__list[aria-expanded] {
    background-color: var(--bg-color);
    border: var(--border-thin) solid var(--border-muted);
    border-radius: 0 0 var(--input-border-radius) var(--input-border-radius);
    box-shadow: var(--shadow-dropdown);
    color: var(--paragraph-color);
    word-break: normal;
    z-index: 20;
}

.is-flipped .choices__list--dropdown,
.is-flipped .choices__list[aria-expanded] {
    border-radius: var(--input-border-radius) var(--input-border-radius) 0 0;
}

.is-open .choices__list--dropdown,
.is-open .choices__list[aria-expanded] {
    border-color: var(--primary-color);
}

.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
    padding: var(--space-2xs) var(--space-xs);
    font-size: var(--form-input-font-size);
    color: inherit;
}

.choices__list--dropdown .choices__item--selectable,
.choices__list[aria-expanded] .choices__item--selectable {
    border-left: var(--border-md) solid transparent;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: var(--bg-muted);
    border-left-color: var(--primary-color);
    color: var(--heading-color);
}

.choices__heading {
    padding: var(--space-2xs) var(--space-xs);
    font-size: 0.85em;
    font-weight: var(--font-weight-semibold);
    border-bottom: var(--border-thin) solid var(--border-muted);
    color: var(--text-muted);
}

/* ─── CLEAR BUTTONS ────────────────────────────────────────────── */
/* Vendor paints a baked-in black (single) / white (chip) SVG. Masking currentColor
   instead makes one icon work on both surfaces and in both themes. */

/* The mask clips the element's whole rendering, borders included, so the icon and any
   divider can't share one box — hence spacing, not a border, separates chip and ×.
   .choices .choices__button beats .tt-input-group button { flex: 1 } from form-widgets.css. */
.choices .choices__button {
    flex: none;
    border: 0;
    border-radius: 0;
    background-color: currentColor;
    background-image: none;
    -webkit-mask-image: var(--tt-choices-x);
    mask-image: var(--tt-choices-x);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 0.6em;
    mask-size: 0.6em;
}

/* same weight as vendor .choices[data-type*=select-one] .choices__button */
.choices[data-type*="select-one"] .choices__button {
    right: calc(var(--space-2xs) + 0.9em);
    margin-right: 0;
    margin-top: -0.5em;
    width: 1em;
    height: 1em;
    background-image: none;
    opacity: 0.5;
}

.choices[data-type*="select-multiple"] .choices__button,
.choices[data-type*="text"] .choices__button {
    margin: 0 0 0 var(--space-2xs);
    padding: 0;
    width: 0.6em;
    height: 0.6em;
    background-image: none;
    opacity: 0.75;
}

.choices .choices__button:hover,
.choices .choices__button:focus {
    opacity: 1;
}

.choices[data-type*="select-one"] .choices__button:focus {
    box-shadow: 0 0 0 2px var(--primary-color);
}