/* Tom Select Custom Overrides for Dark Mode */

.ts-control {
  background-color: var(--color-slate-950) !important;
  border-color: var(--color-slate-700) !important;
  color: var(--color-slate-200) !important;
  border-radius: 0.25rem !important;
  padding: 0.25rem 0.5rem !important;
  min-height: 2.125rem !important; /* to match py-1 height roughly */
}

.ts-control.focus {
  border-color: var(--color-amber-500) !important;
  box-shadow: 0 0 0 1px var(--color-amber-500) !important;
}

.ts-dropdown {
  background-color: var(--color-slate-950) !important;
  border-color: var(--color-slate-700) !important;
  color: var(--color-slate-200) !important;
  border-radius: 0.25rem !important;
  margin-top: 0.25rem !important;
}

.ts-dropdown .option {
  padding: 0.5rem 0.75rem !important;
}

.ts-dropdown .active {
  background-color: var(--color-slate-800) !important;
  color: var(--color-amber-500) !important;
}

.ts-wrapper.single .ts-control:after {
  border-color: var(--color-slate-400) transparent transparent transparent !important;
}

.ts-wrapper.single.dropdown-active .ts-control:after {
  border-color: transparent transparent var(--color-slate-400) transparent !important;
}

.ts-control input {
  color: var(--color-slate-200) !important;
}

.ts-control input::placeholder {
  color: var(--color-slate-500) !important;
}

.ts-hidden-accessible,
.tomselected {
  display: none !important;
}