@use '../core/styles/common/tokens' as *;
@use '../core/styles/common/select';

@use './autocomplete-theme' as *;

.kbq-autocomplete-panel {
    visibility: hidden;

    position: relative;

    display: flex;
    flex-direction: column;

    box-sizing: border-box;
    min-width: 100%;
    width: 100%;
    max-width: none;

    border-radius: var(--kbq-autocomplete-size-panel-border-radius, var(--kbq-size-border-radius));
    max-height: var(--kbq-autocomplete-size-panel-max-height);

    .kbq-autocomplete-panel__content {
        flex: 1;
        padding: var(--kbq-size-xxs);
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .kbq-autocomplete-footer {
        @extend %kbq-select-footer;
        border-color: var(--kbq-line-contrast-less);
    }

    &.kbq-autocomplete_visible {
        visibility: visible;
    }

    &.kbq-autocomplete_hidden {
        visibility: hidden;
    }

    .kbq-option {
        @include select.item-active-area(var(--kbq-size-3xs));
    }

    // We need to offset horizontal dividers by their height, because
    // they throw off the keyboard navigation inside the panel.
    .kbq-divider-horizontal {
        margin-top: -1px;
    }
}

@include kbq-autocomplete-theme();