/*
 * Checkbox dropdown ("select box with checkboxes"), shared by two markups:
 * - ".multi-select" (product detail: ProductEcosystem.html, Mixed/VariantSelector.html; JS: multi-select.js,
 *   state classes ".-open"/".-checkedInside")
 * - ".filter_item.dropdown" (product filter: Filter/Item.html; JS: product-filters.js, state classes
 *   ".show" on the item, ".active" on the chosen ".dropdown-item")
 * Selectors are listed per markup instead of a shared class on purpose: adding "multi-select" to the
 * filter markup would make multi-select.js bind to the filter checkboxes on the detail page.
 *
 * Defaults = product detail look. Variants override the custom properties below (e.g. product-filter.scss).
 */
@layer molecules {
  .multi-select,
  .filter_item.dropdown {
    --multi-select-border: var(--color-primary-orange);
    --multi-select-color: var(--font-color-secondary);
    --multi-select-padding-block: 0;
    --multi-select-panel-bg: var(--shade-white);
    --multi-select-panel-padding: var(--padding-button-t-b) var(--padding-button-l-r);
    --multi-select-panel-gap: var(--gap-s);
    --multi-select-item-padding: 0;
    --multi-select-checked-bg: transparent;
    --multi-select-checked-color: var(--color-primary-anthracite);
    --multi-select-label-gap: var(--gap-s);
    position: relative;
  }
  .multi-select {
    flex-grow: 1;
    display: flex;
  }
  /* "all: unset" also neutralises any ".btn" styling the toggle might carry. */
  .multi-select > button,
  .filter_item > .dropdown-toggle {
    all: unset;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-s);
    min-height: 48px;
    padding: var(--multi-select-padding-block) var(--padding-button-l-r, 16px);
    border-radius: var(--border-radius-button, 12px);
    border: var(--border-default-width, 2px) solid var(--multi-select-border);
    color: var(--multi-select-color);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
  }
  .multi-select > button::after,
  .filter_item > .dropdown-toggle::after {
    content: "\e06d";
    font-family: "lucide";
    font-weight: normal;
    font-size: 24px;
    transition: transform 0.2s ease;
  }
  :is(.multi-select.-checkedInside, .filter_item:has(.dropdown-item.active)) > :is(button, .dropdown-toggle),
  :is(.multi-select.-open, .filter_item.show) > :is(button, .dropdown-toggle) {
    color: var(--shade-white);
    background: var(--color-primary-orange);
    border-color: var(--color-primary-orange);
  }
  :is(.multi-select.-open, .filter_item.show) > :is(button, .dropdown-toggle) {
    border-radius: var(--border-radius-button, 12px) var(--border-radius-button, 12px) 0 0;
  }
  :is(.multi-select.-open, .filter_item.show) > :is(button, .dropdown-toggle)::after {
    transform: rotate(180deg);
  }
  .multi-select > ul,
  .filter_item > .dropdown-menu {
    list-style: none;
    margin: 0;
    padding: var(--multi-select-panel-padding);
    position: absolute;
    inset: 100% var(--border-default-width) auto var(--border-default-width);
    display: none;
    flex-direction: column;
    gap: var(--multi-select-panel-gap);
    background: var(--multi-select-panel-bg);
    z-index: 100;
    block-size: fit-content;
    border-radius: 0 0 var(--border-radius-button, 12px) var(--border-radius-button, 12px);
    border: var(--border-default-width, 2px) solid var(--color-primary-orange);
    border-top-width: 0;
  }
  /* Panel border flush with the toggle's outer border (the shared inset above pulled it 2px in). */
  .multi-select > ul {
    inset-inline: 0;
  }
  .multi-select.-open > ul,
  .filter_item.show > .dropdown-menu {
    display: flex;
  }
  .multi-select li,
  .filter_item .dropdown-menu li {
    position: relative;
    text-indent: 0;
    margin: 0;
  }
  .multi-select li::before,
  .filter_item .dropdown-menu li::before {
    /* cancels the sitewide ul li::before orange-arrow bullet */
    content: normal;
  }
  /* The row: ".multi-select li" (checkbox + label) or the filter's "a.dropdown-item" (checkbox + text). */
  .multi-select li,
  .filter_item .dropdown-item {
    padding: var(--multi-select-item-padding);
  }
  .multi-select li:has(:checked),
  .filter_item .dropdown-item.active {
    background: var(--multi-select-checked-bg);
    color: var(--multi-select-checked-color);
  }
  /* Visually hidden, not "display: none" -- multi-select.js listens to the native "change" event and
     "label[for]" still toggles it. The filter's checkbox is never read by JS (".active" on the row
     carries the state) and is stretched over the icon so it stays clickable. */
  .multi-select li input[type=checkbox] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }
  .filter_item .dropdown-item input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }
  /* "align-items: flex-start" + "::before"'s own "margin-top: -4px": the 24px icon is taller than the
     text, nudged up to line up with the text's first line instead of centering on multi-line labels. */
  .multi-select label,
  .filter_item .dropdown-item {
    display: flex;
    align-items: flex-start;
    gap: var(--multi-select-label-gap, 0.35rem);
    margin: 0;
    color: inherit;
    text-decoration: none;
  }
  .multi-select label::before,
  .filter_item .dropdown-item::before {
    content: "\e167";
    font-family: "lucide";
    font-weight: normal;
    font-size: 1.5rem;
    min-width: 21px;
    margin-top: var(--multi-select-icon-offset, -4px);
  }
  .multi-select label {
    width: fit-content;
  }
  .multi-select li:has(:checked) label::before,
  .filter_item .dropdown-item.active::before {
    content: "\e559";
  }
  /* Product detail checkbox look (Figma 5669:25071): 20px box, filled orange with a white check when
     checked -- same as the solr facets (10-extensions/solr.scss). */
  .multi-select label {
    align-items: center;
  }
  .multi-select label::before {
    content: "";
    display: grid;
    place-items: center;
    box-sizing: border-box;
    flex: none;
    width: 20px;
    height: 20px;
    min-width: 0;
    margin-top: 0;
    border: var(--border-default-width) solid var(--color-primary-anthracite);
    border-radius: var(--border-radius-checkbox);
    font-size: 18px;
    line-height: 1;
    color: var(--shade-white);
  }
  .multi-select li:has(:checked) label::before {
    content: "\e06c";
    border-color: var(--color-primary-orange);
    background: var(--color-primary-orange);
  }
}