/* The searchable picker (core/picker.js). Bootstrap theme colours, light and dark. */
.picker__box { position: relative; }
.picker--multiple .picker__input {
  padding-left: 2.25rem;
  background: var(--bs-body-bg) no-repeat .75rem center / 1rem 1rem
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3e%3cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3e%3c/svg%3e");
}
.picker__list {
  top: 100%; left: 0; right: 0; width: 100%; margin-top: .25rem;
  max-height: 18rem; overflow-y: auto; z-index: 1065; /* above the modal it may sit in */
}
.picker__option {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5rem;
  cursor: pointer; white-space: normal; padding-top: .45rem; padding-bottom: .45rem;
}
.picker__name { font-weight: 500; }
.picker__detail { font-size: .875em; color: var(--bs-secondary-color); overflow-wrap: anywhere; }
.picker__option.active .picker__detail { color: inherit; }
.picker__tag {
  font-size: .75em; padding: .1rem .45rem; border-radius: 50rem;
  color: var(--bs-warning-text-emphasis); background: var(--bs-warning-bg-subtle); border: 1px solid var(--bs-warning-border-subtle);
}
.picker--multiple .picker__option[aria-selected="true"]::before {
  content: "\2713"; font-weight: 700; color: var(--bs-success-text-emphasis); margin-right: .1rem;
}
.picker--multiple .picker__option.active[aria-selected="true"]::before { color: inherit; }
.picker__empty { color: var(--bs-secondary-color); }
.picker__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .5rem; padding: 0; }
.picker__chip {
  display: inline-flex; align-items: center; gap: .35rem; max-width: 100%;
  padding: .2rem .25rem .2rem .7rem; border-radius: 50rem;
  background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); color: var(--bs-body-color);
}
.picker__chip-name { overflow-wrap: anywhere; }
.picker__remove { width: .65rem; height: .65rem; padding: .45rem; background-size: .6rem; flex: 0 0 auto; }
.picker__note { color: var(--bs-warning-text-emphasis); }
@media (pointer: coarse) {
  .picker__option { min-height: 44px; align-items: center; }
  /* a 44 px tap target (the button is content-box); the chip grows a little less than the button */
  .picker__remove { padding: calc((44px - .65rem) / 2); margin: -2px 0; }
}