/* Project overrides for Tom Select's Bootstrap 5 theme (wwwroot/libman/tom-select), used by wwwroot/js/searchableSelects.js */

/* An option with empty text is a placeholder; while it is selected, the control shows the placeholder text */
.ts-wrapper .ts-control .item.searchable-select-placeholder {
  color: var(--bs-secondary-color);
}

/* The allowClear × only applies while the first option has empty text and another option is selected */
.ts-wrapper.plugin-clear_button:not(.searchable-select-deselectable) .clear-button {
  display: none;
}

/* Highlighted option in the dropdown, matching Bootstrap's .dropdown-item.active */
.ts-dropdown .option.active {
  background-color: var(--bs-primary);
  color: #fff;
}

/* The list opens above the control when it would run off the bottom of the screen (searchableSelects.js) */
.ts-wrapper.searchable-select-dropup .ts-dropdown {
  top: auto;
  bottom: 100%;
  margin: 0 0 0.25rem;
  border-top: 1px solid #d0d0d0;
  border-bottom: 0 none;
  border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
}

/* Long option texts wrap instead of widening the dropdown past the control */
.ts-dropdown .option {
  white-space: normal;
  overflow-wrap: anywhere;
}