:root {
    --select2-border-radius: 0.75rem;
    --select2-dropdown-spacing: 6px;
}

.select2-container--bootstrap-5 {
    width: 100% !important;
}

/* The main input box (when closed) */
.select2-container--bootstrap-5 .select2-selection {
    border: none !important;
    background-color: var(--color-white) !important;
    border-radius: var(--select2-border-radius) !important;
    box-shadow: var(--shadow-sm) !important;

    /* Disabled state */
    &[aria-disabled="true"] {
        /* TODO */
    }
}

/* The text inside the input */
.select2-container--bootstrap-5 .select2-selection__rendered {
    color: var(--color-black) !important;
    font-weight: 300 !important;
    padding-top: 1px !important;

    /* Placeholder text */
    .select2-selection__placeholder,
    .select2-search__field {
        color: var(--color-gray-dark) !important;
        font-weight: 300 !important;

        /* Multiple search input */
        &[aria-controls] {
            color: var(--color-black) !important;
        }
    }
}

/* Styles specific to multiple select (tags) */
.select2-selection.select2-selection--multiple {
    padding: 0.5rem !important;

    /* Selected tag list (for multiple select) */
    .select2-selection__rendered {
        gap: 0.25em !important;

        /* Multiple selected options (tags) */
        .select2-selection__choice {
            padding: 0.1em 0.5em !important;
            color: var(--color-black) !important;
            border-radius: 0.5rem !important;
            margin: 0 !important;

            /* Remove button for each tag */
            .select2-selection__choice__remove {
                margin-right: 0.5rem !important;
                width: 0.5rem !important;
                height: 0.5rem !important;
                cursor: pointer;
            }
        }
    }
}

/* The dropdown list wrapper */
.select2-container--bootstrap-5 .select2-dropdown {
    border: none !important;
    background-color: var(--color-white) !important;
    border-radius: var(--select2-border-radius) !important;
    margin-top: var(--select2-dropdown-spacing) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* The search box inside the dropdown (if enabled) */
.select2-search.select2-search--dropdown {
    padding: 0.75rem !important;

    /* The search input */
    input {
        font-weight: 300 !important;
    }
}

/* The options in the list */
.select2-results__options {
    /* Default state */
    .select2-results__option {
        color: var(--color-black) !important;
        font-weight: 300 !important;
        font-size: 1rem !important;
        padding: 0.5rem 1rem !important;
    }

    /* Highlighted option (hovered or keyboard navigation) */
    .select2-results__option--highlighted {
        background-image: var(--color-gray-lighter) !important;
    }

    /* Selected options */
    .select2-results__option[aria-selected="true"] {
        background-color: var(--color-primary) !important;
        color: var(--color-white) !important;
    }

    /* No results message / Other error messages */
    .select2-results__option.select2-results__message,
    /* Loading results message */
    .select2-results__option.loading-results {
        color: var(--color-gray-darker) !important;
        font-style: italic !important;
    }
}