/* The layouts of multiple choices (dynamic_forms/fields/multiple_*.html). The search, the closed dropdown and the checkboxes take the fields'
   classes (classes.control, classes.arrow, classes.check); the rest the --df-* colours of fields.css and --df-radius, the corners of boxes, cards and chips */

/* In the layer "components" too (fields.css) */
@layer components {

.dfm-multi [hidden] { display: none !important; }

/* The search and the number chosen, over the options */
.dfm-toolbar { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.dfm-toolbar > input { flex: 1; min-width: 0; }
/* Nothing to show (no search for a short list, nothing chosen to count): no row */
.dfm-toolbar:not(:has(input, .dfm-multi-count:not(:empty))) { display: none; }
.dfm-multi-count { margin-left: auto; font-size: .75rem; color: var(--df-muted); white-space: nowrap; }

/* A box of options, and an option: its checkbox and its text */
.dfm-box { border: 1px solid var(--df-border); border-radius: var(--df-radius, 4px); background: var(--df-background); }
.dfm-multi-list { max-height: 15rem; overflow: auto; overscroll-behavior: contain; padding: .35rem; }
/* The text of the options: --df-option-size, as that of the fields */
.dfm-multi-option { display: flex; align-items: center; gap: .75rem; padding: .55rem .6rem; border-radius: var(--df-radius, 4px); font-size: var(--df-option-size, .875rem); line-height: 1.4; color: var(--df-text); cursor: pointer; overflow-wrap: anywhere; transition: background-color .2s, border-color .2s, color .2s; }
.dfm-multi-option:hover { background: var(--df-option-hover); }
/* An option that cannot be chosen (the most are chosen, or the empty option of a required field) */
.dfm-multi-option:has(:disabled) { cursor: default; background: none; }

/* Dropdown: closed, a control like a select; open, the options in a box under it */
.dfm-dropdown { position: relative; }
.dfm-dropdown > .dfm-summary { position: relative; display: flex; align-items: center; padding-right: 2.75rem; list-style: none; cursor: pointer; }
.dfm-summary::-webkit-details-marker { display: none; }
.dfm-summary-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--df-muted); }
.dfm-summary-text.dfm-chosen { color: var(--df-text); }
.dfm-dropdown[open] .dfm-arrow .df-arrow-icon { transform: rotate(180deg); }
/* Its background, border and the colour of its shadow: --df-popup-background (by default --df-background, that of the fields), --df-popup-border
   (by default --df-border) and --df-popup-shadow */
.dfm-popup { position: absolute; inset-inline: 0; top: calc(100% + .25rem); z-index: 40; padding: .75rem; border: 1px solid var(--df-popup-border, var(--df-border)); border-radius: var(--df-radius, 4px); background: var(--df-popup-background, var(--df-background)); box-shadow: 0 16px 36px -12px var(--df-popup-shadow, rgb(0 0 0 / .3)); }
/* A dropdown's list scrolls once taller than --df-list-height (about nine options); then it gets room on its right (.dfm-scrolls, set by
   dynamic_forms/js/multiple.js) for its thin scrollbar, so the options, and their tint while pointed at, end before it, whether the scrollbar
   floats over the list (phones, Mac, Windows 11) or takes its own room; the list is that much wider */
.dfm-popup .dfm-multi-list { max-height: var(--df-list-height, 20rem); padding: 0; scrollbar-width: thin; }
.dfm-popup .dfm-multi-list.dfm-scrolls { padding-inline-end: .625rem; }
/* With JS a popover above the page, placed under the control by dynamic_forms/js/multiple.js: as wide as its longest option, at least as the control
   and at most --df-popup-max-width, centred on the control */
.dfm-popup[popover] { position: fixed; inset: auto; width: max-content; max-width: min(var(--df-popup-max-width, 22rem), calc(100vw - 1rem)); margin: 0; overflow: visible; color: inherit; }

/* In a dropdown the chosen options are tinted. When only one can be chosen they are plain rows, their input hidden (multiple_options.html plain,
   kept for the keyboard and screen readers); when several can, they keep their checkboxes. The empty option of an optional one muted */
.dfm-dropdown .dfm-multi-option { position: relative; }
.df-plain-input { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); }
/* Pointed at: --df-option-hover; chosen: --df-option-chosen with --df-option-chosen-text (plain colours, set by the project to its theme's) */
.dfm-dropdown .dfm-multi-option:has(:checked) { background: var(--df-option-chosen); color: var(--df-option-chosen-text); font-weight: 600; }
.dfm-dropdown .dfm-multi-option:has(:focus-visible) { outline: 2px solid var(--df-accent); outline-offset: -2px; }
/* The empty option (the placeholder) reads as the placeholder, never as a choice: muted, no tint or weight even while it is the one checked */
.dfm-dropdown .dfm-multi-option:has(input[value=""]), .dfm-dropdown .dfm-multi-option:has(input[value=""]:checked) { color: var(--df-muted); background: none; font-weight: inherit; }
.dfm-dropdown .dfm-multi-option:has(input[value=""]:not(:disabled)):hover { background: var(--df-option-hover); }

/* Chips: no box, the checkbox hidden, filled when chosen */
.dfm-chip-list { display: flex; flex-wrap: wrap; gap: .5rem; max-height: none; padding: 0; overflow: visible; }
.dfm-chip-list .dfm-multi-option { position: relative; padding: .45rem .9rem; border: 1px solid var(--df-border); background: var(--df-background); }
.dfm-chip-list .df-check-wrap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.dfm-chip-list .dfm-multi-option:hover { border-color: var(--df-accent); background: var(--df-background); }
.dfm-chip-list .dfm-multi-option:has(:checked) { border-color: var(--df-accent); background: var(--df-accent); color: var(--df-background); }
.dfm-chip-list .dfm-multi-option:has(:focus-visible) { outline: 2px solid var(--df-accent); outline-offset: 2px; }

/* Cards: no box, each option a card with its checkbox on the right, outlined when chosen */
.dfm-card-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: .75rem; max-height: none; padding: 0; overflow: visible; }
.dfm-card-list .dfm-multi-option { flex-direction: row-reverse; justify-content: space-between; min-height: 3.25rem; padding: .75rem; border: 1px solid var(--df-border); background: var(--df-background); }
.dfm-card-list .dfm-multi-option:hover, .dfm-card-list .dfm-multi-option:has(:checked) { border-color: var(--df-accent); background: var(--df-background); }

}