/* Customizations to tom-select multi-select search widget */

/* The form field */
.ts-control {
  border: none;
  gap: 0.2em;
  padding: 8px 8px !important;
  min-height: 38px;
  display: flex;
  align-items: center;
}
.ts-control input::placeholder {
  color: var(--bs-text-muted);
  font-size: 14px;
}
.ts-wrapper.single.input-active .ts-control,
.ts-control,
.full .ts-control {
  background-color: transparent;
}

/* Adds search icon */
.ts-wrapper.form-select::after {
  content: 'search';
  font-family: 'Material Symbols Outlined';
  font-size: 24px;
  width: 24px;
  height: 24px;
  line-height: 1;
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--bs-text-muted);
}
.ts-wrapper {
  background-image: none;
  padding: 0;
}
.ts-wrapper.form-select {
  padding-right: 2.5rem;
}

/* Selection chips inside the form field */
.ts-wrapper .ts-control > div {
  border-radius: calc(var(--bs-border-radius) - 1px);
  color: var(--bs-secondary-text-emphasis) !important;
  background-color: var(--bs-secondary-bg-subtle) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25em 0.5em;
  margin: 0 !important;
}
/* The remove button on selection chips */
.ts-wrapper .remove {
  border: none !important;
  margin: 0 !important;
}

/* Search results container */
.ts-dropdown {
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  border: inherit;
  border-radius: var(--bs-border-radius);
  left: -1px;
  box-sizing: content-box;
}
.ts-dropdown-content {
  max-height: 300px;
}

/* Search result items */
.ts-dropdown .active {
  background: inherit;
  color: inherit;
}
/* Highlighted keywords on search result items */
.ts-dropdown [data-selectable] .highlight {
  background: black;
  color: white;
  padding: 0.1em 0.2em;
  border-radius: 5px;
}
/* Checkboxes on search results items */
.tomselect-checkbox {
  transform: translateY(0.13em);
}