/* ============================================================
   06-form-select2.css
   Select2 dropdown library styling (used by WooCommerce
   country/state selectors and similar enhanced dropdowns).

   Specificity is matched to Select2's own selectors using
   .select2-container--default, allowing us to win the cascade
   without !important by virtue of being loaded later.
   ============================================================ */

/* The visible trigger that replaces the native select */
.select2-container--default .select2-selection--single {
  background-color: var(--dm-light-l-1);
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-border-radius-m);
  color: var(--dm-dark);
  font-family: "Code", monospace;
  height: auto;
  padding: var(--dm-space-2xs) var(--dm-space-s);
  transition: border-color var(--dm-transition-m);
  cursor: pointer;

  &:hover {
    border-color: var(--dm-primary);
  }

  /* Selected value text */
  & .select2-selection__rendered {
    color: var(--dm-dark);
    line-height: 1.5;
    padding: 0;
  }

  /* Placeholder text */
  & .select2-selection__placeholder {
    color: var(--dm-muted);
  }

  /* Dropdown arrow positioning */
  & .select2-selection__arrow {
    height: 100%;
    right: var(--dm-space-s);
    top: 0;
  }

  & .select2-selection__arrow b {
    border-color: var(--dm-muted) transparent transparent transparent;
  }
}

/* Open or focused trigger */
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--dm-primary);
  outline: none;
}

/* Flip the arrow when dropdown is open */
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--dm-muted) transparent;
}

/* Multi-select variant */
.select2-container--default .select2-selection--multiple {
  background-color: var(--dm-light-l-1);
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-border-radius-m);
  font-family: "Code", monospace;
  padding: var(--dm-space-3xs) var(--dm-space-2xs);
  min-height: 40px;

  &:hover {
    border-color: var(--dm-primary);
  }
}

/* Dropdown panel container */
.select2-container--default .select2-dropdown {
  background-color: var(--dm-light-l-2);
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-border-radius-m);
}

/* Search input inside searchable dropdowns */
.select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--dm-light-l-1);
  border: 1px solid var(--dm-border);
  color: var(--dm-dark);
  border-radius: var(--dm-border-radius-m);
  padding: var(--dm-space-2xs);
}

/* Result options inside the dropdown */
.select2-container--default .select2-results__option {
  padding: var(--dm-space-2xs) var(--dm-space-s);
  color: var(--dm-dark);
  background-color: var(--dm-light-l-2);
  transition: background-color var(--dm-transition-s);
}

/* Hover/keyboard-focused option */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background-color: var(--dm-primary-t-2);
  color: var(--dm-light);
}

/* Currently selected option */
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
  background-color: var(--dm-primary-t-1);
  color: var(--dm-primary);
}

/* Both states at once (selected AND highlighted) */
.select2-container--default .select2-results__option--highlighted[aria-selected="true"] {
  background-color: var(--dm-primary);
  color: var(--dm-light);
}