/* Searchable Collection filter on the images/documents listing pages: a search
   box above an always-visible option list. Uses Wagtail admin theme variables so
   it works in light and dark themes. */

.collection-combobox {
  position: relative;
}

.collection-combobox__input {
  width: 100%;
  margin-bottom: 0.375rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--w-color-border-field-default, #d1d5db);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.5;
  background: var(--w-color-surface-field, #fff);
  color: var(--w-color-text-context, #1a1a1a);
}

.collection-combobox__input:focus {
  outline: 2px solid var(--w-color-focus, #2e1f5e);
  outline-offset: 2px;
  border-color: var(--w-color-focus, #2e1f5e);
  box-shadow: none;
}

/* Force a tall, scrollable list. Wagtail styles a non-multiple <select> as a
   single-line control (fixed line-height, dropdown arrow), which collapses the
   sized list to one visible row, so these override that. */
.collection-combobox__list {
  width: 100%;
  min-height: 12rem;
  max-height: 18rem;
  overflow-y: auto;
  height: auto;
  padding: 0;
  border: 1px solid var(--w-color-border-field-default, #d1d5db);
  border-radius: 0.375rem;
  background: var(--w-color-surface-field, #fff);
  background-image: none;
  color: var(--w-color-text-context, #1a1a1a);
  font-size: 0.875rem;
  line-height: 1.5;
}

.collection-combobox__list option {
  padding: 0.375rem 0.75rem;
}

/* On the upload pages the list is closed until the search box is clicked, so the
   field occupies one line like the dropdown it replaces. */
.collection-combobox--on-demand .collection-combobox__list {
  display: none;
}

/* Open, the list floats over what follows instead of pushing the form down.
   "top" is left alone so it lands at its static position, right below the search
   box, and the margin under that box becomes the gap. */
.collection-combobox--on-demand.collection-combobox--open .collection-combobox__list {
  display: block;
  position: absolute;
  z-index: 100;
  left: 0;
  right: 0;
  width: auto;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
}

/* The search box doubles as the display for the current choice while closed, so
   give it the dropdown's affordance: a caret, and room so text clears it. Drawn
   in currentColor to follow the admin theme, and positioned with the input's own
   text metrics so it sits on the same line as the value. */
.collection-combobox--on-demand .collection-combobox__input {
  padding-inline-end: 2rem;
}

.collection-combobox--on-demand::after {
  content: "▾";
  position: absolute;
  inset-inline-end: 0.75rem;
  top: 0.5rem;
  margin-top: 1px;
  font-size: 0.875rem;
  line-height: 1.5;
  opacity: 0.65;
  pointer-events: none;
}

.collection-combobox--on-demand.collection-combobox--open::after {
  content: "▴";
}