/*
 * Normalize the vendored Select2 Bootstrap 5 theme onto Bootstrap variables
 * so shared pages track the active BS5 theme more closely.
 */

.select2-container--bootstrap-5 {
  --ncf-select2-color: var(--bs-body-color);
  --ncf-select2-bg: var(--bs-body-bg);
  --ncf-select2-border-color: var(--bs-border-color);
  --ncf-select2-placeholder-color: var(--bs-secondary-color);
  --ncf-select2-muted-color: var(--bs-secondary-color);
  --ncf-select2-option-hover-color: var(--bs-emphasis-color);
  --ncf-select2-option-hover-bg: var(--bs-secondary-bg);
  --ncf-select2-option-selected-color: #fff;
  --ncf-select2-option-selected-bg: var(--bs-primary);
  --ncf-select2-focus-border-color: var(--bs-primary);
  --ncf-select2-focus-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
  --ncf-select2-disabled-color: var(--bs-secondary-color);
  --ncf-select2-disabled-bg: var(--bs-secondary-bg);
  --ncf-select2-invalid-border-color: var(--bs-danger);
  --ncf-select2-invalid-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
  --ncf-select2-valid-border-color: var(--bs-success);
  --ncf-select2-valid-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
}

.select2-container--bootstrap-5 .select2-selection,
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
  color: var(--ncf-select2-color);
  background-color: var(--ncf-select2-bg);
  border-color: var(--ncf-select2-border-color);
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option {
  color: var(--ncf-select2-color);
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__message,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--disabled,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-disabled="true"],
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[role="group"] .select2-results__group {
  color: var(--ncf-select2-muted-color);
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection,
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
  border-color: var(--ncf-select2-focus-border-color);
  box-shadow: var(--ncf-select2-focus-shadow);
}

.select2-container--bootstrap-5 .select2-dropdown {
  background-color: var(--ncf-select2-bg);
  border-color: var(--ncf-select2-focus-border-color);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
  color: var(--ncf-select2-option-hover-color);
  background-color: var(--ncf-select2-option-hover-bg);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
  color: var(--ncf-select2-option-selected-color);
  background-color: var(--ncf-select2-option-selected-bg);
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
  background-color: var(--bs-secondary-bg);
  border-color: var(--ncf-select2-border-color);
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear,
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear {
  opacity: 0.85;
}

.select2-container--bootstrap-5.select2-container--disabled .select2-selection,
.select2-container--bootstrap-5.select2-container--disabled.select2-container--focus .select2-selection {
  color: var(--ncf-select2-disabled-color);
  background-color: var(--ncf-select2-disabled-bg);
  border-color: var(--ncf-select2-border-color);
  box-shadow: none;
}

.is-invalid + .select2-container--bootstrap-5 .select2-selection,
.was-validated select:invalid + .select2-container--bootstrap-5 .select2-selection {
  border-color: var(--ncf-select2-invalid-border-color);
}

.is-invalid + .select2-container--bootstrap-5.select2-container--focus .select2-selection,
.is-invalid + .select2-container--bootstrap-5.select2-container--open .select2-selection,
.was-validated select:invalid + .select2-container--bootstrap-5.select2-container--focus .select2-selection,
.was-validated select:invalid + .select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: var(--ncf-select2-invalid-border-color);
  box-shadow: var(--ncf-select2-invalid-shadow);
}

.is-valid + .select2-container--bootstrap-5 .select2-selection,
.was-validated select:valid + .select2-container--bootstrap-5 .select2-selection {
  border-color: var(--ncf-select2-valid-border-color);
}

.is-valid + .select2-container--bootstrap-5.select2-container--focus .select2-selection,
.is-valid + .select2-container--bootstrap-5.select2-container--open .select2-selection,
.was-validated select:valid + .select2-container--bootstrap-5.select2-container--focus .select2-selection,
.was-validated select:valid + .select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: var(--ncf-select2-valid-border-color);
  box-shadow: var(--ncf-select2-valid-shadow);
}