/**
 * @file
 * Default site styling for the multiselect module.
 *
 * Restyles the multi-select-dropdown-js widget to match the site's filter
 * "pill" design (purple theme, rounded pill control, card-like dropdown panel).
 * This is the default look anywhere the module is used; consumers can override
 * the --ms-* custom properties (or the library's own variables) per instance.
 *
 * Theme colors:
 *   Purple #5B2B6B  Purple-light #845694  Purple-bg #f3edf5  Border #dee2e6
 *
 * Includes the compact "<first> +N" header summary added by multiselect.init.js
 * for elements using data-summary="compact".
 */

.multi-select {
  /* Site theme tokens — override these to re-skin per consumer. */
  --ms-purple: #5b2b6b;
  --ms-purple-light: #845694;
  --ms-purple-bg: #f3edf5;
  --ms-purple-border: #b89cc5;
  --ms-border: #dee2e6;
  --ms-text: #333;

  min-width: 10rem;
  /* Remap the library's own tokens to the site palette so its built-in states
   * (selected option, checkbox tick) follow the theme. Also pin the surface and
   * checkbox tokens to light values so the widget never adopts the library's
   * auto dark-mode (prefers-color-scheme) — this design is the site default
   * regardless of the OS theme, so no per-instance data-theme is needed. */
  --primary-color: var(--ms-purple);
  --text-color-dark: var(--ms-text);
  --text-color: var(--ms-text);
  --text-color-light: #65727e;
  --ms-bg: #fff;
  --option-background: var(--ms-purple-bg);
  --checkbox-background: #fff;
  --checkbox-border: var(--ms-border);
  --checkbox-active: #fff;
}

/* Neutralise the library's auto dark-mode. Its dark tokens are applied via
 * `@media (prefers-color-scheme: dark) .multi-select[data-theme="auto"]`, which
 * out-specifies a bare `.multi-select`; match that specificity here so the
 * default (theme="auto") instances stay light on dark OSes. Instances that opt
 * into data-theme="dark" explicitly are left alone. */
@media (prefers-color-scheme: dark) {
  .multi-select[data-theme="auto"] {
    /* --text-color-dark is what the option/header text uses; the library's dark
     * block sets it to near-white, so it must be reset here too. */
    --text-color-dark: var(--ms-text);
    --text-color: var(--ms-text);
    --text-color-light: #65727e;
    --ms-bg: #fff;
    --option-background: var(--ms-purple-bg);
    --border-color: var(--ms-border);
    --border-color-light: #f1f3f5;
    --checkbox-background: #fff;
    --checkbox-border: var(--ms-border);
    --checkbox-active: #fff;
  }
}

/* The pill itself (the closed control). */
.multi-select .multi-select-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 0;
  height: 38px;
  padding: 0 2rem 0 0.9rem;
  border: 1.5px solid var(--ms-border);
  border-radius: 999px;
  background: #fff;
  box-shadow: none;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ms-text);
  cursor: pointer;
}

.multi-select .multi-select-header:hover {
  border-color: #bbb;
}

/* Active (has a selection): the library renders one or more
 * .multi-select-header-option spans (both the compact summary and the default
 * tag/"N selected" modes use this class), so :has() detects any selection. */
.multi-select .multi-select-header:has(.multi-select-header-option) {
  background: var(--ms-purple-bg);
  border-color: var(--ms-purple-border);
  color: var(--ms-purple);
}

.multi-select .multi-select-header.multi-select-header-active {
  border-color: var(--ms-purple-light);
}

/* Chevron (replaces the library's default SVG icon). Keeps the library's
 * vertical centring so the open-state rotation rule still applies. */
.multi-select .multi-select-header::after {
  right: 0.9rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  background-image: none;
  opacity: 0.5;
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.multi-select .multi-select-header.multi-select-header-active::after {
  transform: translateY(-35%) rotate(225deg);
}

/* Label shown when nothing is selected. */
.multi-select .multi-select-header .multi-select-header-placeholder {
  color: var(--ms-text);
  font-weight: 500;
  white-space: nowrap;
}

/* Default-mode tags inside the pill (listAll true). */
.multi-select .multi-select-header .multi-select-header-option {
  background: transparent;
  color: var(--ms-purple);
  font-weight: 500;
}

/* The open dropdown panel. */
.multi-select .multi-select-options {
  min-width: 220px;
  margin-top: 4px;
  padding: 0;
  border: 1px solid var(--ms-border);
  border-radius: 0.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  overflow: hidden auto;
}

/* In-panel search box. */
.multi-select .multi-select-search {
  margin: 0.5rem;
  padding: 0.4rem 0.6rem;
  width: calc(100% - 1rem);
  border: 1px solid var(--ms-border);
  border-radius: 0.375rem;
  font-size: 0.8rem;
  outline: none;
}

.multi-select .multi-select-search:focus {
  border-color: var(--ms-purple-light);
}

/* Options list rows. */
.multi-select .multi-select-options .multi-select-option {
  padding: 0.5rem 0.9rem;
  border-radius: 0;
  font-size: 0.85rem;
}

.multi-select .multi-select-options .multi-select-option:hover {
  background: var(--ms-purple-bg);
}

.multi-select .multi-select-options .multi-select-option.multi-select-selected {
  background: var(--ms-purple-bg);
}

/* ---------------------------------------------------------------------------
 * Compact header summary ("<first label> +N"), data-summary="compact".
 * ------------------------------------------------------------------------- */
.multi-select .multi-select-header-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: var(--ms-purple);
  font-weight: 500;
  white-space: nowrap;
}

.multi-select .multi-select-header-summary-count {
  display: inline-block;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--ms-purple);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}