.ts-control {
    padding: 0.5rem 0.75rem !important;
    box-shadow: none !important;
    border-color: var(--color-neutral-200) !important;
    border-radius: 0.5rem !important;
    border-width: 1px !important;
    line-height: 1.5 !important;
}

.ts-wrapper.input-active .ts-control {
    border-color: var(--color-primary-500) !important;
    box-shadow: 0 0 0 3px rgb(from var(--color-primary-500) r g b / 0.5) !important;
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
}

.ts-wrapper.dropdown-active .ts-control {
    border-color: var(--color-primary-500) !important;
    box-shadow: 0 0 0 3px rgb(from var(--color-primary-500) r g b / 0.5) !important;
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
}

.ts-dropdown {
    z-index: 1000 !important;
}

.ts-dropdown .active {
    background-color: var(--color-primary-500) !important;
    color: var(--color-white) !important;
}

.ts-dropdown .option:hover {
    background-color: var(--color-primary-100) !important;
    color: var(--color-neutral-900) !important;
}

.ts-wrapper.multi.has-items .ts-control {
    padding: 0.4rem !important;
}

.ts-wrapper.multi .ts-control [data-value] {
    background: var(--color-primary-600) !important;
    color: var(--color-white) !important;
    box-shadow: none !important;
    border: none !important;
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
    border-left: 1px solid var(--color-white) !important;
}