/* Tom Select sobre las variables del tema (claro/oscuro). Lo importa tom_select_controller. */

.ts-wrapper.multi .ts-control > .item {
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 4px);
    background: var(--secondary);
    color: var(--secondary-foreground);
    padding: 0 0 0 0.5rem;
    font-size: 0.85em;
}

.ts-wrapper.multi .ts-control > .item.active {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--primary-foreground);
}

.ts-wrapper.plugin-remove_button .item .remove {
    border-left: 1px solid var(--border) !important;
    margin-left: 0.35rem;
    padding: 0 0.4rem;
    opacity: 0.6;
}

.ts-wrapper.plugin-remove_button .item.active .remove {
    border-left-color: transparent !important;
}

.ts-wrapper.plugin-remove_button .item .remove:hover {
    opacity: 1;
    background: transparent;
    color: var(--destructive, #dc3545);
}

.ts-wrapper.plugin-clear_button .clear-button {
    color: var(--muted-foreground);
}

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