:root {
    --autocomplete-light-bg: #ffffff;
    --autocomplete-light-text: #212529;
    --autocomplete-dark-bg: #2b3553;
    --autocomplete-dark-text: rgba(255, 255, 255, 0.8);
}

/* We should add body in front of all these to win specificity wars with the dal libraries stylings */
body .select2-container {
    z-index: 1056 !important;
}

body .select2-container .select2-selection--single {
    height: calc(2.25rem + 2px);
    display: flex;
    align-items: center;
}

/* Light mode */
body.white-content .select2-container .select2-selection--single {
    background-color: var(--autocomplete-light-bg);
    border: 1px solid #ccc;
}

body.white-content
.select2-container--default
.select2-selection
.select2-selection__rendered {
    color: var(--autocomplete-light-text);
}

body.white-content .select2-container--default .select2-dropdown {
    background-color: var(--autocomplete-light-bg);
}

body.white-content .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--autocomplete-light-bg);
    color: var(--autocomplete-light-text);
}

/* Dark mode */
body .select2-container .select2-selection--single {
    background-color: var(--autocomplete-dark-bg);
    border: 1px solid #444;
}

body
.select2-container--default
.select2-selection
.select2-selection__rendered {
    color: var(--autocomplete-dark-text);
}

body .select2-container--default .select2-dropdown {
    background-color: var(--autocomplete-dark-bg);
}

body .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--autocomplete-dark-bg);
    color: var(--autocomplete-dark-text);
}