/* =========================================
   Select2 + DaisyUI dark/light theme
   ========================================= */

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

/* Main Select2 field */
.select2-container--default .select2-selection--single {
    height: 3rem !important;
    min-height: 3rem !important;

    display: flex !important;
    align-items: center !important;

    background-color: var(--color-base-100) !important;
    color: var(--color-base-content) !important;

    border: 1px solid var(--color-base-300) !important;
    border-radius: var(--radius-field) !important;

    box-shadow: none !important;
}

/* Selected value / placeholder */
.select2-container--default
.select2-selection--single
.select2-selection__rendered {
    color: var(--color-base-content) !important;

    padding-left: 1rem !important;
    padding-right: 2.5rem !important;

    line-height: normal !important;
}

/* Placeholder */
.select2-container--default
.select2-selection--single
.select2-selection__placeholder {
    color: color-mix(
        in oklab,
        var(--color-base-content) 50%,
        transparent
    ) !important;
}

/* Arrow */
.select2-container--default
.select2-selection--single
.select2-selection__arrow {
    height: 100% !important;
    right: 0.75rem !important;
}

/* Arrow itself */
.select2-container--default
.select2-selection--single
.select2-selection__arrow b {
    border-color: var(--color-base-content) transparent transparent transparent !important;
}


/* =========================================
   Dropdown
   ========================================= */

.select2-container--default .select2-dropdown {
    background-color: var(--color-base-100) !important;
    color: var(--color-base-content) !important;

    border: 1px solid var(--color-base-300) !important;
    border-radius: var(--radius-box) !important;

    overflow: hidden;
}


/* =========================================
   Search input
   ========================================= */

.select2-container--default
.select2-search--dropdown {
    background-color: var(--color-base-100) !important;
    padding: 0.75rem !important;
}

.select2-container--default
.select2-search--dropdown
.select2-search__field {
    width: 100% !important;

    padding: 0.75rem !important;

    background-color: var(--color-base-100) !important;
    color: var(--color-base-content) !important;

    border: 1px solid var(--color-base-300) !important;
    border-radius: var(--radius-field) !important;

    outline: none !important;
}

.select2-container--default
.select2-search--dropdown
.select2-search__field::placeholder {
    color: color-mix(
        in oklab,
        var(--color-base-content) 50%,
        transparent
    ) !important;
}

.select2-container--default
.select2-search--dropdown
.select2-search__field:focus {
    border-color: var(--color-primary) !important;

    outline: 2px solid color-mix(
        in oklab,
        var(--color-primary) 20%,
        transparent
    ) !important;
}


/* =========================================
   Options
   ========================================= */

.select2-container--default
.select2-results__option {
    background-color: var(--color-base-100) !important;
    color: var(--color-base-content) !important;

    padding: 0.75rem 1rem !important;
}


/* Hovered option */
.select2-container--default
.select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-primary) !important;
    color: var(--color-primary-content) !important;
}


/* Selected option */
.select2-container--default
.select2-results__option[aria-selected="true"] {
    background-color: var(--color-base-200) !important;
    color: var(--color-base-content) !important;
}


/* Selected + hovered */
.select2-container--default
.select2-results__option--highlighted[aria-selected="true"] {
    background-color: var(--color-primary) !important;
    color: var(--color-primary-content) !important;
}


/* =========================================
   Focus
   ========================================= */

.select2-container--default.select2-container--focus
.select2-selection--single {
    border-color: var(--color-primary) !important;

    outline: 2px solid color-mix(
        in oklab,
        var(--color-primary) 20%,
        transparent
    ) !important;

    outline-offset: 2px !important;
}


/* =========================================
   Disabled
   ========================================= */

.select2-container--default.select2-container--disabled
.select2-selection--single {
    background-color: var(--color-base-200) !important;
    color: color-mix(
        in oklab,
        var(--color-base-content) 50%,
        transparent
    ) !important;
}