/* =========================================================

    Custom CSS for the Autocomplete UX select (Tom Select)
    built on top of the Bootstrap 4 theme.

    ========================================================= */

.ts-control {
    border: 1px solid var(--color-gray-50);
    border-radius: var(--radius-sm);
    background: var(--color-gray-50);
    color: var(--color-primary-dark);
}

.focus .ts-control {
    box-shadow: none;
    border-color: var(--color-gray-200);
}

.ts-wrapper.multi .ts-control > .item,
.ts-wrapper.single .ts-control > .item,
.ts-wrapper.single .ts-control .clear-button {
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-sm);
}

.ts-wrapper.multi.has-items .ts-control,
.ts-wrapper.single.has-items .ts-control {
    padding-right: 2rem!important;
}

/* stylelint-disable-next-line selector-class-pattern */
.ts-wrapper.plugin-remove_button .item .remove:hover {
    background: var(--color-primary-medium);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.ts-wrapper:not(.form-control, .form-select).single .ts-control {
    background-color: var(--color-white);
    background-image: none;
}

.ts-wrapper.single .ts-control > div {
    padding: 1px 5px;
}

.ts-wrapper + svg {
    z-index: 10;
}

.ts-dropdown {
    background: var(--color-white);
}

.ts-dropdown-content .option.active {
    background: color-mix(in srgb, var(--color-primary-lighter) 50%, transparent);
}