/* Tom-Select Overrides
   ========================================================================== */
/* Style tom-select controls to match our form inputs */

.tom-select .ts-control {
  display: block !important;
  inline-size: 100%;
  padding: var(--space-xxs) var(--space-xs) !important;
  border: var(--border) !important;
  border-radius: var(--border-radius) !important;
  outline: none !important;
  transition:
    box-shadow 250ms,
    border-color 250ms !important;
  background-color: var(--color-bg) !important;
  min-height: 2.5rem !important;
}

/* Focus state matching form inputs */
.tom-select.focus .ts-control,
.tom-select .ts-control:focus {
  box-shadow: 0 0 0 2px var(--color-blue-bright) !important;
  border-color: color-mix(
    in oklch,
    var(--color-blue-bright),
    transparent 50%
  ) !important;
}

/* Dropdown styling */
.tom-select .ts-dropdown {
  border: var(--border) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: var(--shadow-small) !important;
  background-color: var(--color-bg) !important;
}

/* Dropdown items */
.tom-select .ts-dropdown .option {
  padding: var(--space-xxs) var(--space-xs) !important;
  transition: background-color 150ms !important;
}

.tom-select .ts-dropdown .option:hover,
.tom-select .ts-dropdown .option.active {
  background-color: color-mix(
    in oklch,
    var(--color-blue-bright),
    transparent 90%
  ) !important;
}

.tom-select .ts-dropdown .option.selected {
  background-color: color-mix(
    in oklch,
    var(--color-blue-bright),
    transparent 80%
  ) !important;
  color: var(--color-ink) !important;
}

/* Multi-select items (pills) */
.tom-select .ts-control .item {
  padding: 0.125rem 0.375rem !important;
  margin: 0.125rem !important;
  border-radius: calc(var(--border-radius) / 2) !important;
  background-color: color-mix(
    in oklch,
    var(--color-blue-bright),
    transparent 80%
  ) !important;
  border: 1px solid color-mix(in oklch, var(--color-blue-bright), transparent 50%) !important;
  color: var(--color-ink) !important;
}

/* Remove button in multi-select items */
.tom-select .ts-control .item .remove {
  padding: 0 0.25rem !important;
  border-inline-start: 1px solid
    color-mix(in oklch, var(--color-blue-bright), transparent 50%) !important;
  margin-inline-start: 0.25rem !important;
}

/* Placeholder styling */
.tom-select .ts-control input::placeholder {
  color: color-mix(in oklch, currentColor, transparent 60%) !important;
}

/* Disabled and locked states */
.tom-select.disabled .ts-control,
.tom-select.locked .ts-control {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  background-color: var(--color-gray-lightest) !important;
}

/* Input text color (library hardcodes #333) */
.tom-select .ts-control,
.tom-select .ts-control input {
  color: var(--color-ink) !important;
}

.tom-select .ts-dropdown .option {
  color: var(--color-ink) !important;
}