.ts-dropdown,
.ts-control,
.ts-control input,
.ts-dropdown .optgroup-header,
.ts-dropdown .active,
.ts-dropdown .create {
    color: var(--color-base-content);
}

.ts-control,
.ts-wrapper.single.input-active .ts-control,
.ts-wrapper.single .ts-control,
.full .ts-control {
    background-color: var(--color-base-100);
    background-image: none;
    color: var(--color-base-content);
    border-color: var(--color-base-300);
    box-shadow: none;
    border-radius: var(--radius-field);
}

.disabled .ts-control {
    background-color: var(--color-base-200);
}

.focus .ts-control {
    box-shadow: 0 0 0 1px var(--color-primary);
}

.dropdown-active .ts-control {
    border-radius: var(--radius-field) var(--radius-field) 0 0;
}

.ts-dropdown,
.ts-dropdown.single {
    background-color: var(--color-base-100);
    color: var(--color-base-content);
    border-color: var(--color-base-300);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
    border-radius: 0 0 var(--radius-field) var(--radius-field);
}

.ts-dropdown .optgroup {
    border-top-color: var(--color-base-300);
}

.ts-dropdown .optgroup-header {
    background-color: var(--color-base-200);
    color: var(--color-base-content);
}

.ts-dropdown .active,
.ts-dropdown .option:hover,
.ts-dropdown .option.active,
.ts-dropdown .option.selected {
    background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
    color: var(--color-base-content);
}

.ts-dropdown .create {
    color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
}

.ts-dropdown [data-selectable] .highlight {
    background: color-mix(in oklab, var(--color-primary) 30%, transparent);
}

.ts-dropdown .spinner:after {
    border-color: var(--color-base-300) transparent var(--color-base-300) transparent;
}

.ts-wrapper.single .ts-control:after {
    border-color: currentColor transparent transparent transparent;
    opacity: 0.6;
}

.ts-wrapper.single.dropdown-active .ts-control::after {
    border-color: transparent transparent currentColor transparent;
    opacity: 0.6;
}

.ts-wrapper.multi .ts-control > div,
.ts-wrapper.multi .ts-control [data-value] {
    background: var(--color-primary);
    background-image: none;
    color: var(--color-primary-content);
    border: 1px solid var(--color-primary);
    box-shadow: none;
    text-shadow: none;
}

.ts-wrapper.multi .ts-control > div.active,
.ts-wrapper.multi .ts-control [data-value].active {
    background: color-mix(in oklab, var(--color-primary) 75%, #000);
    border-color: color-mix(in oklab, var(--color-primary) 75%, #000);
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
    border-left-color: color-mix(in oklab, var(--color-primary) 60%, #000);
}

.ts-wrapper.plugin-remove_button .item .remove:hover {
    background: color-mix(in oklab, var(--color-base-content) 15%, transparent);
}

.ts-wrapper .dropdown-header {
    background: var(--color-base-200);
    border-bottom-color: var(--color-base-300);
    color: var(--color-base-content);
}

.ts-wrapper .dropdown-header-close {
    color: var(--color-base-content);
}

.plugin-dropdown_input.focus.dropdown-active .ts-control,
.plugin-dropdown_input .dropdown-input {
    border-color: var(--color-base-300);
    color: var(--color-base-content);
}