/**
 * Tom-Select with RubyUI/Tailwind styling
 * Only customize colors, borders, and spacing - let base CSS handle layout
 */

/* Control - Match RubyUI Input/SelectTrigger colors and borders */
.ts-wrapper .ts-control {
  height: 2.25rem; /* h-9 */
  border-radius: 0.375rem; /* rounded-md */
  border: 1px solid var(--color-input);
  background-color: var(--color-background);
  font-size: 0.875rem; /* text-sm */
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  transition: border-color 150ms, box-shadow 150ms;
}

.ts-wrapper.focus .ts-control,
.focus .ts-control {
  outline: none;
  border-color: var(--color-ring);
  box-shadow: 0 0 0 1px var(--color-ring);
}

.ts-wrapper.disabled .ts-control {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Dropdown - RubyUI colors only */
.ts-dropdown {
  border-radius: 0.375rem;
  border-color: var(--color-input);
  background-color: var(--color-background);
  color: var(--color-foreground);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* Options - RubyUI colors */
.ts-dropdown .option {
  border-radius: 0.125rem;
  transition: background-color 150ms, color 150ms;
}

.ts-dropdown .option.active {
  background-color: var(--color-accent);
  color: var(--color-accent-foreground);
}

/* Multi-select items - RubyUI colors */
.ts-wrapper.multi .ts-control > div {
  border-radius: 0.375rem;
  border-color: var(--color-input);
  background-color: var(--color-secondary);
  color: var(--color-secondary-foreground);
}

.ts-wrapper.multi .ts-control > div .remove:hover {
  color: var(--color-destructive);
}

/* Option groups - RubyUI colors */
.ts-dropdown .optgroup-header {
  color: var(--color-muted-foreground);
}

.ts-dropdown .optgroup:not(:first-child) .optgroup-header {
  border-top-color: var(--color-input);
}