@use '../core/styles/common/list';
@use '../core/styles/common/vendor-prefixes';
@use './list-theme' as theme;

@mixin _kbq-list-item-border-radius() {
    $selectors: '.kbq-selected';

    border-radius: var(--kbq-size-border-radius);

    &:is(#{$selectors}):has(+ :is(#{$selectors})) {
        border-bottom-left-radius: unset;
        border-bottom-right-radius: unset;
    }

    &:is(#{$selectors}) + :is(#{$selectors}) {
        border-top-left-radius: unset;
        border-top-right-radius: unset;
    }
}

.kbq-list,
.kbq-list-selection {
    display: block;
    outline: none;
}

.kbq-list-item,
.kbq-list-option {
    @include vendor-prefixes.user-select(none);
    @include list.kbq-list-item-base();
    @include _kbq-list-item-border-radius();

    &:not(.kbq-disabled) {
        cursor: pointer;

        &.kbq-hovered,
        &:hover,
        &.kbq-focused,
        &.kbq-action-button-focused {
            & .kbq-action-container {
                display: flex;
            }
        }
    }
}

@include theme.kbq-list-theme();
@include theme.kbq-list-typography();