/**
 * Chosen: the site's only stylesheet for it.
 *
 * biopama_libraries/chosen initialises the plugin and gives its markup
 * Bootstrap's own classes (form-select / form-control for the closed box,
 * plus the select's size and shape modifiers, dropdown-menu for the open
 * list), so every widget is styled by the page exactly like a native control:
 * light pages, the navy preset, the Conservation Tracking grey skin and the
 * exposed-filter rows all reach it through their existing rules. Only the
 * structure Bootstrap has no opinion about lives here, so there is nothing to
 * restate per tool or per form.
 *
 * The vendor stylesheet is not loaded: this library does not ship it and
 * akp.info.yml drops the contrib module's copy (its !important rules could
 * not be overridden by specificity).
 */

/* ---- Container ------------------------------------------------------- */

.chosen-container {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  /* The plugin writes width: 100% inline; this floor keeps a widget usable
     if a caller ever overrides that option for a select measured at zero. */
  min-width: 6.25rem;
  text-align: start;
  user-select: none;
}

.chosen-container.chosen-disabled {
  opacity: 0.65;
  pointer-events: none;
}

/* ---- Closed box: an <a> or <ul> wearing Bootstrap's control classes ---- */

.chosen-container .chosen-single {
  display: flex;
  align-items: center;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
}

/* Centred whatever height the control classes give the box, and clipped
   rather than wrapped when the label is long. */
.chosen-container .chosen-single span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Placeholder tone, and the plugin's own arrow gives way to the one
   .form-select draws. */
.chosen-container .chosen-single.chosen-default {
  color: var(--bs-secondary-color);
}

.chosen-container .chosen-single div {
  display: none;
}

/* Open/active box: the page theme's accent, whatever it is. */
.chosen-container-active .chosen-single,
.chosen-container-active .chosen-choices {
  border-color: var(--bs-link-color);
}

/* ---- Open list: a .dropdown-menu -------------------------------------- */

.chosen-container .chosen-drop {
  --bs-dropdown-min-width: 100%;
  top: 100%;
  left: 0;
  width: 100%;
}

.chosen-container.chosen-with-drop .chosen-drop {
  display: block;
}

.chosen-container .chosen-search {
  padding: 0.25rem 0.5rem;
}

/* A short list needs no search box, but it is the only element a keyboard
   can reach, so it is hidden from sight rather than removed. */
.chosen-container.chosen-container-single-nosearch .chosen-search {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.chosen-container .chosen-results {
  max-height: 15rem;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.chosen-container .chosen-results li {
  display: none;
  padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
  color: var(--bs-dropdown-link-color);
  cursor: pointer;
}

.chosen-container .chosen-results li.active-result,
.chosen-container .chosen-results li.group-result,
.chosen-container .chosen-results li.disabled-result,
.chosen-container .chosen-results li.no-results,
.chosen-container-single .chosen-results li.result-selected {
  display: list-item;
}

.chosen-container .chosen-results li.highlighted {
  color: var(--bs-dropdown-link-hover-color);
  background-color: var(--bs-dropdown-link-hover-bg);
}

.chosen-container .chosen-results li.group-result {
  color: var(--bs-dropdown-header-color);
  font-weight: 600;
  cursor: default;
}

.chosen-container .chosen-results li.group-option {
  padding-left: calc(var(--bs-dropdown-item-padding-x) + 0.75rem);
}

.chosen-container .chosen-results li.disabled-result,
.chosen-container .chosen-results li.no-results,
.chosen-container-single .chosen-results li.result-selected {
  color: var(--bs-dropdown-link-disabled-color);
  cursor: default;
}

.chosen-container .chosen-results li em {
  font-style: normal;
  text-decoration: underline;
}

/* ---- Multiple: chips inside the .form-control box --------------------- */

.chosen-container-multi .chosen-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  height: auto;
  margin: 0;
  list-style: none;
  cursor: text;
}

.chosen-container-multi .chosen-choices li.search-choice {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0 0.5rem;
  background-color: var(--bs-secondary-bg);
  border-radius: var(--bs-border-radius);
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  opacity: 0.6;
  cursor: pointer;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close::before {
  content: "\00d7";
  font-weight: 700;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
  opacity: 1;
}

.chosen-container-multi .chosen-choices li.search-field {
  display: flex;
  flex: 1 1 4rem;
}

/* The search box takes the rest of the line and the box's own colour. The
   plugin writes an inline width it measured from the placeholder before the
   box wore its font classes, so growing is left to flex, which ignores it. */
.chosen-container-multi .chosen-choices li.search-field input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  outline: 0;
}