@import "@coreui/coreui/scss/variables";
@import "@coreui/coreui/scss/mixins";
@import "select2/dist/css/select2.min.css";
@import "select2-bootstrap-5-theme/dist/select2-bootstrap-5-theme.min.css";

// Select2 Theme Overrides
.select2-container {
    font-family: var(--cui-font-sans-serif);
    font-size: var(--cui-body-font-size);
    width: 100% !important;

    // Main selection box
    .select2-selection--single,
    .select2-selection--multiple {
        font-family: var(--cui-font-sans-serif);
        font-size: var(--cui-body-font-size);
        border: 1px solid var(--cui-border-color);
        border-radius: 0.5rem !important;
        background-color: var(--cui-body-bg);
        color: var(--cui-body-color);
        transition: border-color 0.15s, box-shadow 0.15s;

        &:hover {
            border-color: var(--cui-border-color-translucent);
        }
    }

    // Single select rendered value
    .select2-selection--single {
        height: calc(1.5em + 0.75rem + 2px);

        .select2-selection__rendered {
            color: var(--cui-body-color);
            padding-left: 0.75rem;
            padding-right: 2rem;
            width: 90%;
            line-height: calc(1.5em + 0.75rem);
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
            display: block !important;

            // Increase padding right when clear button is present so text truncates before it
            &:has(.select2-selection__clear) {
                padding-right: .3rem !important;
            }
        }

        .select2-selection__placeholder {
            color: var(--cui-secondary-color);
        }

        .select2-selection__clear {
            position: absolute;
            right: 1.8rem;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            cursor: pointer;
            color: var(--cui-secondary-color);
            background: transparent;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 1rem;
            width: 1rem;
            line-height: 1;

            &:hover {
                color: var(--cui-danger);
            }
        }

        .select2-selection__arrow {
            height: 100%;
            right: 0.5rem;

            b {
                // Native CSS properties to draw the carets cleanly in dark theme
                border-color: var(--cui-secondary-color) transparent transparent;
                border-width: 5px 4px 0;
            }
        }
    }

    // Multiple select tags
    .select2-selection--multiple {
        padding: 0.25rem 0.5rem;
        min-height: calc(1.5em + 0.75rem + 2px);

        .select2-selection__choice {
            background-color: color-mix(in srgb, var(--cui-primary) 10%, transparent);
            border: 1px solid color-mix(in srgb, var(--cui-primary) 20%, transparent);
            border-radius: 0.375rem;
            color: var(--cui-primary);
            font-size: var(--cui-font-size-sm);
            font-weight: 500;
            padding: 0.1rem 0.5rem;

            .select2-selection__choice__remove {
                color: var(--cui-primary);
                font-weight: 700;
                margin-right: 4px;

                &:hover {
                    color: var(--cui-danger);
                    background: transparent;
                }
            }
        }

        .select2-search__field {
            font-family: var(--cui-font-sans-serif);
            font-size: var(--cui-font-size-sm);
            color: var(--cui-body-color);
            background-color: transparent;

            &::placeholder {
                color: var(--cui-secondary-color);
            }
        }
    }

    // Focused state
    &--open,
    &--focus {
        .select2-selection--single,
        .select2-selection--multiple {
            border-color: var(--cui-primary) !important;
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--cui-primary) 12%, transparent) !important;
            outline: 0;
        }

        .select2-selection--single .select2-selection__arrow b {
            border-color: transparent transparent var(--cui-primary);
            border-width: 0 4px 5px;
        }
    }
}

// Support for form-control-sm
select.form-control-sm + .select2-container,
select.form-select-sm + .select2-container,
.select2-container--sm {
    .select2-selection--single,
    .select2-selection--multiple {
        border-radius: 0.375rem !important;
    }

    .select2-selection--single {
        height: calc(1.5em + 0.5rem + 2px) !important;

        .select2-selection__rendered {
            padding-left: 0.5rem;
            font-size: var(--cui-font-size-sm);
            line-height: calc(1.5em + 0.5rem) !important;
        }

        .select2-selection__clear {
            right: 0.5rem;
        }
    }

    .select2-selection--multiple {
        min-height: calc(1.5em + 0.5rem + 2px) !important;
        padding: 0.15rem 0.5rem;

        .select2-search__field {
            font-size: var(--cui-font-size-sm);
        }
    }
}

// Dropdown panel
.select2-dropdown {
    font-family: var(--cui-font-sans-serif);
    font-size: var(--cui-body-font-size);
    border: 1px solid var(--cui-border-color);
    border-radius: 0.5rem !important;
    background-color: var(--cui-body-bg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    overflow: hidden;

    // Search field inside dropdown
    .select2-search--dropdown {
        padding: 0.5rem;
        background: var(--cui-tertiary-bg);
        border-bottom: 1px solid var(--cui-border-color);

        .select2-search__field {
            font-family: var(--cui-font-sans-serif);
            font-size: var(--cui-font-size-sm);
            border: 1px solid var(--cui-border-color);
            border-radius: 0.375rem;
            padding: 0.375rem 0.75rem;
            color: var(--cui-body-color);
            width: 100%;
            background-color: var(--cui-body-bg);

            &:focus {
                border-color: var(--cui-primary);
                outline: 0;
                box-shadow: 0 0 0 3px color-mix(in srgb, var(--cui-primary) 12%, transparent);
            }
        }
    }

    // Option list
    .select2-results__options {
        padding: 0.25rem 0;
        max-height: 220px;
        overflow-y: auto;

        // Scrollbar styling to respect theme
        &::-webkit-scrollbar {
            width: 5px;
        }

        &::-webkit-scrollbar-track {
            background: var(--cui-tertiary-bg);
        }

        &::-webkit-scrollbar-thumb {
            background: var(--cui-border-color);
            border-radius: 4px;
        }
    }

    .select2-results__option {
        font-size: var(--cui-font-size-sm);
        color: var(--cui-body-color);
        background-color: transparent;
        padding: 0.45rem 0.85rem;
        transition: background 0.12s;

        // Highlighted (hover or keyboard)
        &--highlighted {
            background-color: color-mix(in srgb, var(--cui-primary) 8%, transparent) !important;
            color: var(--cui-primary) !important;
        }

        // Selected
        &[aria-selected='true'] {
            background-color: color-mix(in srgb, var(--cui-primary) 12%, transparent);
            color: var(--cui-primary);
            font-weight: 500;
        }

        // Disabled
        &[aria-disabled='true'] {
            color: var(--cui-secondary-color);
            cursor: not-allowed;
        }

        // Option group label
        &--group {
            color: var(--cui-secondary-color);
            font-size: var(--cui-font-size-sm);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            padding: 0.5rem 0.85rem 0.25rem;
            cursor: default;
        }
    }
}

// Disabled state
.select2-container--disabled {
    .select2-selection--single,
    .select2-selection--multiple {
        background-color: var(--cui-disabled-bg) !important;
        border-color: var(--cui-border-color) !important;
        cursor: not-allowed;

        .select2-selection__rendered {
            color: var(--cui-disabled-color);
        }
    }
}

// Scoped CoreUI Theme adjustments for intense dark background shadows
[data-coreui-theme="dark"] {
    .select2-dropdown {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    }
}