/* CSS for Select Single */
.select2-container--bootstrap5 .select2-selection--single.form-select {
    background-color: var(--bs-gray-50);
    border: 1px solid var(--bs-gray-300);
    border-radius: 0.425rem;
    height: 2.5rem;

    .select2-selection__rendered li {
        font-weight: 400;
        font-size: var(--size-14);
        line-height: var(--size-20);
        color: var(--bs-gray-700);
    }

}

.select2-selection.select2-selection--multiple.form-select.form-select-sm .select2-selection__rendered li,
.select2-selection.select2-selection--single.form-select.form-select-sm .select2-selection__rendered {
    font-weight: 400;
    font-size: var(--size-14);
    line-height: var(--size-20);
    color: var(--bs-gray-700);
}

.select2-selection.select2-selection--multiple.form-select.form-select-sm[aria-disabled='true'] .select2-selection__rendered li {
    color: var(--bs-gray-600);
}

.select2-selection.select2-selection--single.form-select.form-select-sm[aria-disabled='true'],
.select2-selection.select2-selection--multiple.form-select.form-select-sm[aria-disabled='true'] {
    background-color: var(--bs-gray-100);
}

.select2-container--bootstrap5 .select2-dropdown .select2-search .select2-search__field {
    padding-left: var(--spacing-40) !important;
}

.select2-container--bootstrap5:not(.select2-container--disabled):not(.select2-container--focus):not(.select2-container--open) .select2-selection--single:hover,
.select2-container--bootstrap5:not(.select2-container--disabled):not(.select2-container--focus):not(.select2-container--open) .select2-selection--multiple:hover {
    border-color: var(--bs-gray-400) !important;
    opacity: 1;
}

.select2-container--bootstrap5:not(.select2-container--disabled) .select2-selection--single:focus,
.select2-container--bootstrap5.select2-container--focus:not(.select2-container--disabled) .form-select:not(.form-select-solid):not(.form-select-transparent),
.select2-container--bootstrap5.select2-container--open:not(.select2-container--disabled) .form-select:not(.form-select-solid):not(.form-select-transparent) {
    border-color: var(--bs-primary) !important;
    opacity: 1;
}

.select2-container--bootstrap5.select2-container--disabled .select2-selection--single,
.select2-container--bootstrap5.select2-container--disabled .select2-selection--multiple {
    cursor: default !important;
}