/**
 * Tom Select
 *
 * Harmonise Tom Select avec les champs LNA (.input) sans modifier les templates.
 */

.ts-wrapper {
    width: 100%;
    min-height: 2.5rem;
}

.ts-wrapper.single .ts-control,
.ts-wrapper.single.input-active .ts-control,
.ts-wrapper.multi .ts-control,
.plugin-dropdown_input.focus.dropdown-active .ts-control {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-input);
    background-image: none;
    color: var(--color-text-heading);
    box-shadow: var(--shadow-input);
}

.ts-wrapper.focus .ts-control,
.ts-wrapper.single.focus .ts-control,
.ts-wrapper.multi.focus .ts-control,
.ts-wrapper.dropdown-active .ts-control,
.plugin-dropdown_input.focus.dropdown-active .ts-control {
    border-color: var(--color-border-focus);
    background: var(--color-bg-input-focus);
    box-shadow: var(--shadow-input-focus);
    outline: none;
}

.ts-wrapper.disabled .ts-control,
.ts-wrapper.disabled .ts-control * {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--color-bg-muted);
    box-shadow: none;
}

.ts-control {
    gap: 0.375rem;
}

.ts-control > input {
    color: var(--color-text-heading);
    min-width: 5rem !important;
}

.ts-control > input::placeholder,
.ts-wrapper.single .ts-control > .item {
    color: var(--color-text-placeholder);
}

.ts-wrapper.single .ts-control:after {
    border-color: var(--color-text-light) transparent transparent;
    right: 0.875rem;
}

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

.ts-wrapper.multi.has-items .ts-control {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.ts-wrapper.multi .ts-control > .item,
.ts-wrapper.multi .ts-control [data-value] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--color-primary) 18%, white);
    background: var(--color-primary-light);
    background-image: none;
    color: var(--color-primary);
    box-shadow: none;
    text-shadow: none;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
    padding: 0.25rem 0.5rem;
}

.ts-wrapper.multi .ts-control > .item.active,
.ts-wrapper.multi .ts-control [data-value].active {
    border-color: color-mix(in srgb, var(--color-primary) 28%, white);
    background: color-mix(in srgb, var(--color-primary-light) 78%, white);
    color: var(--color-primary-hover);
}

.ts-wrapper.plugin-remove_button .item .remove,
.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
    border-left: 1px solid color-mix(in srgb, var(--color-primary) 18%, white);
    margin-left: 0.375rem;
    padding: 0 0 0 0.375rem;
    color: inherit;
}

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

.plugin-clear_button .clear-button,
.ts-wrapper .dropdown-header-close {
    color: var(--color-text-light);
}

.plugin-clear_button.focus.has-items .clear-button,
.plugin-clear_button:not(.disabled):hover.has-items .clear-button,
.ts-wrapper .dropdown-header-close:hover {
    color: var(--color-text-secondary);
}

.ts-dropdown,
.ts-dropdown.single {
    margin-top: 0.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    box-shadow: var(--shadow-md);
}

.ts-dropdown .dropdown-input {
    font-size: 0.875rem;
    line-height: 1.25rem;
    border-color: var(--color-border);
    background: var(--color-bg-input);
    box-shadow: none;
    color: var(--color-text-heading);
}

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

.ts-dropdown-content {
    max-height: 15rem;
    padding: 0.25rem;
}

.ts-dropdown .option,
.ts-dropdown [data-selectable].option,
.ts-dropdown .create,
.ts-dropdown .no-results,
.ts-dropdown .optgroup-header {
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.625rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.ts-dropdown .optgroup-header {
    color: var(--color-text-secondary);
    font-weight: 600;
}

.ts-dropdown [data-selectable].option {
    color: var(--color-text-heading);
}

.ts-dropdown .option:hover,
.ts-dropdown [data-selectable].option:hover {
    background: var(--color-bg-hover);
}

.ts-dropdown .active,
.ts-dropdown [data-selectable].active,
.ts-dropdown .active.create {
    background: var(--color-primary-light);
    color: var(--color-text-heading);
}

.ts-dropdown .create,
.ts-dropdown .no-results,
.ts-dropdown [data-disabled] {
    color: var(--color-text-muted);
    opacity: 1;
}

.ts-wrapper.has-error .ts-control {
    border-color: var(--color-error);
    background: var(--color-destructive-light);
    box-shadow: none;
}

.ts-wrapper.has-error.focus .ts-control,
.ts-wrapper.has-error.dropdown-active .ts-control {
    box-shadow: var(--shadow-input-error);
}