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

.kbq-dropdown-item {
    width: 100%;
    border-radius: var(--kbq-dropdown-item-border-radius);

    @include vendor-prefixes.user-select(none);
    @include list.kbq-list-item-base();

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

    text-align: left;
    align-items: flex-start;
    text-decoration: none;

    & > .kbq-icon:first-child {
        &:before,
        & > svg {
            align-self: center;
            display: flex;
            height: var(--kbq-size-xl);
            width: 16px;
            align-items: center;
        }
    }

    & .kbq-dropdown-item__caption {
        padding-top: var(--kbq-size-3xs);
    }
}

.kbq-dropdown-item__text {
    @include list.kbq-list-text();
}

.kbq-dropdown-item-overlay {
    position: absolute;

    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;

    border-radius: inherit;
}

.kbq-dropdown__group-header {
    @include vendor-prefixes.user-select(none);
    @include list.kbq-list-header-base();

    // @deprecated, use <kbq-optgroup label="Label" /> instead. Will be removed in the next major release
    &.kbq-dropdown__group-header_small {
        @include list.kbq-list-subheading-base();
    }
}