/**
 * Tom Select theme overrides — load after tom-select.default.min.css.
 * Maps vendor chrome to admin theme CSS variables.
 */
:root {
    --ts-text: var(--input-text-color);
    --ts-text-muted: var(--panel-text-muted);
    --ts-border: var(--input-border-color);
    --ts-surface: var(--panel-head-backcolor);
    --ts-surface-muted: var(--panel-child-head-backcolor);
    --ts-dropdown-surface: var(--modal-body-backcolor);
    --ts-dropdown-active-bg: var(--panel-accent-soft);
    --ts-dropdown-active-color: var(--input-text-color);
    --ts-chip-bg: var(--panel-accent);
    --ts-chip-color: var(--primary-button-color);
    --ts-chip-border: var(--primary-button-border-color);
    --ts-chip-active-bg: var(--primary-button-hover-background-color);
    --ts-chip-active-border: var(--primary-button-hover-border-color);
    --ts-chip-disabled-bg: var(--disabled-button-color);
    --ts-chip-disabled-border: var(--input-border-color);
    --ts-caret: var(--panel-text-muted, #808080);
    --ts-highlight-bg: var(--panel-accent-soft);
    --ts-shadow: var(--input-shadow);
    --ts-remove-hover-bg: var(--panel-accent-soft);
}

.ts-wrapper {
    flex: 1;
}

.ts-control,
.ts-control input,
.ts-dropdown {
    font-size: 1em;
}

.ts-dropdown,
.ts-control,
.ts-control input {
    color: var(--ts-text);
}

.ts-wrapper:not(.form-control-v2) .ts-control,
.ts-wrapper:not(.form-control-v2).single.input-active .ts-control,
.ts-control,
.ts-wrapper.single .ts-control,
.ts-wrapper.single.input-active .ts-control,
.ts-wrapper.single.dropdown-active .ts-control,
.full .ts-control,
.dropdown-active .ts-control {
    background: var(--ts-surface);
    background-color: var(--ts-surface);
    background-image: none;
    box-shadow: none;
}

.ts-wrapper.form-control-v2.single .ts-control,
.ts-wrapper.form-control-v2.single.input-active .ts-control,
.ts-wrapper.form-control-v2.single.dropdown-active .ts-control {
    background: transparent;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
}

.ts-control {
    box-shadow: none;
}

.ts-wrapper.multi .ts-control {
    border: 1px solid var(--ts-border);
    border-radius: 3px;
}

.ts-wrapper.single .ts-control {
    border: solid 1px transparent;
    border-bottom: 2px solid var(--input-border-color);
    border-radius: 0;
    box-shadow: none;
    background-image: none;
}

.ts-wrapper.single .ts-control:hover,
.ts-wrapper.single.input-active .ts-control,
.ts-wrapper.single.dropdown-active .ts-control {
    border: 1px solid var(--input-border-color);
    border-bottom: 2px solid var(--input-selected-color);
    border-radius: 5px;
}

.ts-wrapper.form-control-v2.single .ts-control,
.ts-wrapper.form-control-v2.single .ts-control:hover,
.ts-wrapper.form-control-v2.single.input-active .ts-control,
.ts-wrapper.form-control-v2.single.dropdown-active .ts-control {
    border: solid 1px transparent;
    border-bottom: 2px solid var(--input-border-color);
    border-radius: 0;
}

.ts-wrapper.form-control-v2.single .ts-control:hover,
.ts-wrapper.form-control-v2.single.input-active .ts-control,
.ts-wrapper.form-control-v2.single.dropdown-active .ts-control {
    border: 1px solid var(--input-border-color);
    border-bottom: 2px solid var(--input-selected-color);
    border-radius: 5px;
}

.focus .ts-control {
    box-shadow: var(--ts-shadow);
}

.disabled .ts-control {
    background-color: var(--ts-surface-muted);
    opacity: 0.65;
}

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

.ts-wrapper.multi .ts-control > div.active,
.ts-wrapper.multi .ts-control [data-value].active {
    background: var(--ts-chip-active-bg);
    border-color: var(--ts-chip-active-border);
    background-image: none;
}

.ts-wrapper.multi.disabled .ts-control > div,
.ts-wrapper.multi.disabled .ts-control > div.active,
.ts-wrapper.multi.disabled .ts-control [data-value] {
    color: var(--ts-text-muted);
    background: var(--ts-chip-disabled-bg);
    border-color: var(--ts-chip-disabled-border);
}

.ts-dropdown {
    border-color: var(--ts-border);
    background: var(--ts-dropdown-surface);
    box-shadow: var(--ts-shadow);
}

.ts-dropdown .optgroup-header {
    color: var(--ts-text-muted);
    background: var(--ts-dropdown-surface);
}

.ts-dropdown .active {
    color: var(--ts-dropdown-active-color);
    background-color: var(--ts-dropdown-active-bg);
    text-decoration: none;
}

.ts-dropdown .active.create {
    color: var(--ts-dropdown-active-color);
}

.ts-dropdown .create {
    color: var(--ts-text-muted);
}

.ts-dropdown [data-selectable] .highlight {
    background: var(--ts-highlight-bg);
    border-radius: 1px;
}

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

.ts-wrapper.single .ts-control::after {
    /* Bootstrap sets box-sizing:border-box on :after and collapses this CSS triangle into a dash */
    box-sizing: content-box;
    border-color: var(--ts-caret) transparent transparent transparent;
}

.ts-wrapper.single.dropdown-active .ts-control::after {
    border-color: transparent transparent var(--ts-caret) transparent;
}

.ts-wrapper.plugin-remove_button .item .remove:hover {
    background: var(--ts-remove-hover-bg);
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
    border-left-color: var(--ts-chip-border);
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove {
    border-left-color: var(--ts-chip-active-border);
}

.ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove {
    border-left-color: var(--ts-chip-disabled-border);
}

.ts-wrapper.plugin-remove_button.rtl .item .remove {
    border-right-color: var(--ts-chip-border);
}

.ts-wrapper.plugin-remove_button.rtl .item.active .remove {
    border-right-color: var(--ts-chip-active-border);
}

.ts-wrapper.plugin-remove_button.rtl.disabled .item .remove {
    border-right-color: var(--ts-chip-disabled-border);
}

.ts-wrapper .dropdown-header {
    border-bottom-color: var(--ts-border);
    background: var(--ts-surface-muted);
}

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

.ts-wrapper .dropdown-header-close:hover {
    color: var(--ts-text);
    opacity: 0.8;
}

.plugin-dropdown_input.focus.dropdown-active .ts-control,
.plugin-dropdown_input .dropdown-input {
    border-color: var(--ts-border);
    box-shadow: none;
}

.plugin-dropdown_input .dropdown-input {
    color: var(--ts-text);
    background: transparent;
}

.ts-dropdown.plugin-optgroup_columns .optgroup {
    border-right-color: var(--ts-border);
}

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

.ts-wrapper.multi.disabled .ts-control [data-value],
.ts-wrapper.multi.disabled .ts-control [data-value] .remove {
    border-color: var(--ts-chip-disabled-border);
}