/* Searchable selects (searchable_select.js, Tom Select): the Bootstrap 5 theme, bent to the design tokens and dark mode. */

.ts-wrapper { min-width: 10rem; }
/* The box is drawn by the wrapper (it inherits Bootstrap's form-select/form-control classes from the select), the control inside stays flat */
.ts-wrapper.form-select, .ts-wrapper.form-control, .ts-wrapper.single, .ts-wrapper.multi {
  padding: 0; border: 1px solid var(--mc-border-strong); border-radius: var(--mc-radius-sm); background: var(--mc-surface); background-image: none; color: var(--mc-ink);
}
.ts-wrapper.focus { border-color: var(--mc-brand); box-shadow: var(--mc-focus-ring); }
.ts-wrapper .ts-control, .ts-wrapper.single.input-active .ts-control, .ts-wrapper.form-select .ts-control {
  min-height: 2.375rem; padding: 0.4rem 2rem 0.4rem 0.75rem; border: 0; border-radius: var(--mc-radius-sm); background: transparent; color: var(--mc-ink); box-shadow: none; font-size: 0.9375rem;
}
.ts-control > input { color: var(--mc-ink); }
.ts-control > input::placeholder { color: var(--mc-muted); }
.ts-wrapper.single .ts-control::after { border-color: var(--mc-muted) transparent transparent; }
.ts-wrapper.single .ts-control .item { max-width: calc(100% - 1.5rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A selected "all / none" placeholder reads as a placeholder, not as a chosen value */
.ts-wrapper.single .ts-control .item[data-value=""] { color: var(--mc-muted); }

.ts-dropdown, .ts-dropdown.form-control, .ts-dropdown.form-select {
  z-index: 1080; margin-top: 4px; border: 1px solid var(--mc-border-strong); border-radius: var(--mc-radius-sm);
  background: var(--mc-surface); color: var(--mc-ink); box-shadow: var(--mc-shadow-lg);
}
.ts-dropdown .ts-dropdown-content { max-height: 20rem; }
.ts-dropdown .option, .ts-dropdown .no-results, .ts-dropdown .create { padding: 0.45rem 0.75rem; }
.ts-dropdown .option[data-value=""] { color: var(--mc-muted); }
.ts-dropdown .active { background: var(--mc-brand-soft); color: var(--mc-ink); }
.ts-dropdown .option.selected { font-weight: 600; }
.ts-dropdown .no-results { color: var(--mc-muted); }

/* Several choices (the clients of a campaign): chips with a remove button */
.ts-wrapper.multi .ts-control { gap: 0.25rem; }
.ts-wrapper.multi .ts-control > div, .ts-wrapper.multi.has-items .ts-control > div {
  margin: 0; padding: 0.1rem 0.5rem; border: 1px solid var(--mc-border-strong); border-radius: 999px;
  background: var(--mc-surface-2); color: var(--mc-ink); font-size: 0.8125rem;
}
.ts-wrapper.multi .ts-control > div.active { border-color: var(--mc-brand); background: var(--mc-brand-soft); color: var(--mc-ink); }
.ts-wrapper.plugin-remove_button .item .remove { border-left-color: var(--mc-border-strong); color: var(--mc-muted); }
.ts-wrapper.plugin-clear_button .clear-button { color: var(--mc-muted); }

/* Inside the live filter bar the box keeps the width of the select it replaces */
.filter-bar .ts-wrapper { flex: 0 1 15rem; min-width: 11rem; }