@scope (.bootstrap-select) {
    &:scope {
        width: 100% !important;
    }

    &:focus-within {
        .dropdown-toggle {
            --_input-wrapper-border-clr: var(--secondary-clr-900);

            border: 1px solid var(--_input-wrapper-border-clr);
            box-shadow:
                0 0 0 3px
                    oklch(from var(--_input-wrapper-border-clr) l c h / 0.149),
                0 1px 2px 0
                    oklch(from var(--_input-wrapper-border-clr) l c h / 0.1),
                0 1px 3px 0
                    oklch(from var(--_input-wrapper-border-clr) l c h / 0.14);
        }
    }

    .bs-searchbox {
        padding: 0.75rem 0.75rem 0;
    }

    .dropdown-menu {
        --bs-dropdown-padding-y: 0;
        --bs-dropdown-padding-x: 0;
        --bs-dropdown-border-radius: 1rem;
        --bs-dropdown-border-color: var(--gray-clr-200);

        box-shadow: var(--shadow-lg);
        z-index: 3000 !important;

        > *:not(:last-child) {
            margin-bottom: 0.125rem;
        }
    }

    .bs-searchbox + .inner.show {
        padding: 0.5rem 0.75rem 0.75rem;
        max-height: 370px !important;
    }

    .dropdown-item {
        --bs-dropdown-item-padding-y: 0.5rem;
        --bs-dropdown-item-padding-x: 0.75rem;
        --bs-dropdown-link-color: var(--midnight-blue-clr-700);
        --bs-dropdown-link-hover-color: var(--midnight-blue-clr-700);
        --bs-dropdown-link-hover-bg: var(--gray-clr-50);
        --bs-dropdown-link-active-color: var(--midnight-blue-clr-500);
        --bs-dropdown-link-active-bg: var(--gray-clr-50);

        font-size: var(--fs-300);
        border-radius: 0.875rem;

        &.selected {
            --bs-dropdown-link-active-color: var(--midnight-blue-clr-500);
            --bs-dropdown-link-active-bg: var(--gray-clr-100);

            background-color: var(--bs-dropdown-link-active-bg);
            color: var(--bs-dropdown-link-active-color);
        }

        &:where(.active:not(.selected), :hover, :focus) {
            outline: 1px solid var(--gray-clr-200);
            outline-offset: -1px;
        }
    }
}

.bootstrap-user-select {
    --_input-wrapper-height: auto;
}

.bootstrap-user-select > .dropdown-toggle .filter-option,
.bootstrap-user-select > .dropdown-toggle .filter-option-inner,
.bootstrap-user-select > .dropdown-toggle .filter-option-inner-inner {
    overflow: visible;
}

@scope (.dropdown-item-user) {
    &:scope {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .dropdown-item-user-profile {
        width: 2.5rem;
        height: 2.5rem;
        object-fit: cover;
        flex-shrink: 0;
        border-radius: 50%;
        border: 1px solid var(--primary-clr-600);
    }

    .dropdown-item-user-info {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .dropdown-item-user-title {
        font-weight: var(--fw-500);
        color: var(--midnight-blue-clr-700);
        line-height: 1.25rem;
    }

    .dropdown-item-user-subtitle {
        font-size: var(--fs-200);
        color: var(--midnight-blue-clr-300);
        display: flex;
        align-items: center;
        gap: 0.2rem;
        line-height: 1rem;
    }

    .dropdown-item-user-email {
        text-transform: lowercase;
    }
}