/*
 * CS-NL Soft — Select2 reskin.
 *
 * The facet <select> elements in the directory rail (Status, Topic, Theme,
 * Country, ...) are enhanced with Select2 (already a project dependency,
 * assets vendored under admin/css/vendor/select2/ and admin/js/vendor/select2/)
 * purely so the OPEN dropdown
 * list can be restyled — a plain <select>'s option list is native browser
 * chrome that CSS cannot reach. This file reskins Select2's default theme to
 * match the rest of cs-soft.css: the closed control looks exactly like a
 * `.form-select` pill, and the open panel looks like a `.cs-filter-panel`.
 *
 * Load AFTER select2.min.css and cs-soft.css. Depends only on the design
 * tokens already defined on :root in cs-soft.css.
 */

/* Closed control -> identical to the .form-select pill it replaces */
.select2-container--default .select2-selection--single {
  background: var(--cs-paper);
  border: none;
  border-radius: var(--cs-r-pill);
  box-shadow: var(--cs-raise-sm); /* a select is a dropdown trigger -> raised */
  height: auto;
  padding: 12px 40px 12px 22px;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  outline: 2px solid var(--cs-navy-mid);
  outline-offset: 2px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  font-family: var(--cs-font-sans);
  font-size: var(--cs-fs-md);
  line-height: 1.3;
  color: var(--cs-navy);
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--cs-fg-muted); }
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%; top: 0; right: 16px; width: 12px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--cs-fg-muted) transparent transparent transparent;
  border-width: 6px 5px 0 5px;
  margin-left: -5px; margin-top: -2px;
}
.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--cs-fg-muted) transparent;
  border-width: 0 5px 6px 5px;
}

/* Open panel -> a cs-filter-panel floating below the control, not a flush-
   attached box. Select2's own --above/--below modifiers zero out the two
   corners nearest the trigger (border-top-left-radius etc.) so the panel
   looks "attached"; !important overrides those longhands so every corner
   stays rounded, matching the fully-round pill trigger it opens from. */
.select2-dropdown,
.select2-dropdown--above,
.select2-dropdown--below {
  background: var(--cs-paper);
  border: none;
  border-radius: var(--cs-r-panel) !important;
  box-shadow: var(--cs-raise);
  padding: 8px;
  font-family: var(--cs-font-sans);
}
.select2-dropdown--below { margin-top: 6px; }
.select2-dropdown--above { margin-top: -6px; }
.select2-search--dropdown {
  padding: 4px 4px 10px;
}
.select2-search--dropdown .select2-search__field {
  background: var(--cs-card);
  border: none;
  border-radius: var(--cs-r-pill);
  box-shadow: var(--cs-press-sm);
  padding: 9px 16px;
  font-family: var(--cs-font-sans);
  font-size: var(--cs-fs-sm);
  color: var(--cs-navy);
  outline: none;
}
.select2-results__options {
  max-height: 280px;
  scrollbar-width: thin;
}
.select2-results__option {
  padding: 10px 14px;
  border-radius: var(--cs-r-pill);
  font-size: var(--cs-fs-sm);
  color: var(--cs-fg-1);
}
.select2-results__option + .select2-results__option { margin-top: 2px; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--cs-chip);
  color: var(--cs-navy-mid);
}
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--cs-band);
  color: var(--cs-navy-mid);
  font-weight: var(--cs-fw-bold);
}
.select2-results__message { color: var(--cs-fg-muted); font-size: var(--cs-fs-sm); padding: 10px 14px; }

/* The facet rail is a narrow column: let Select2 size to its trigger, not to option text */
.cs-directory__rail .select2-container { width: 100% !important; }