@use './dropdown-theme' as theme;
@use '../core/styles/common/select';

.kbq-dropdown-trigger {
    &.kbq-button {
        padding-left: calc(10px - var(--kbq-size-border-width));
        padding-right: calc(10px - var(--kbq-size-border-width));

        & .kbq-icon_left {
            margin-right: var(--kbq-size-xs);
        }

        & .kbq-icon_right {
            margin-left: var(--kbq-size-3xs);
        }
    }

    &.kbq-button-icon.kbq-button-icon_right.kbq-button-icon_left {
        & .kbq-icon_left {
            margin-right: 0;
        }

        & .kbq-icon_right {
            margin-left: 0;
        }
    }
}

.kbq-dropdown-trigger__icon {
    margin-left: auto;
    align-self: center;
}

.kbq-dropdown__panel {
    // The panel receives programmatic focus when the dropdown is opened by mouse or touch,
    // so the focus outline should never be rendered on it.
    outline: none;

    overflow-x: hidden;
    overflow-y: auto;

    min-width: max(var(--kbq-dropdown-size-container-width-min), 100%);
    max-width: var(--kbq-dropdown-size-container-width-max);

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

    box-sizing: border-box;
    padding: var(--kbq-size-xxs);

    // Prevent users from interacting with the panel while it's animating. Note that
    // people won't be able to click through it, because the overlay pane will catch the click.
    // This fixes the following issues:
    //  * Users accidentally opening sub-menus when the `overlapTrigger` option is enabled.
    //  * Users accidentally tapping on content inside the sub-menu on touch devices, if the
    //    sub-menu overlaps the trigger. The issue is due to touch devices emulating the
    //    `mouseenter` event by dispatching it on tap.
    &.ng-animating {
        pointer-events: none;
    }

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

        &:before,
        &:after {
            top: calc(-1 * var(--kbq-size-3xs));
            bottom: calc(-1 * var(--kbq-size-3xs));
        }
    }

    .kbq-divider {
        margin-left: calc(var(--kbq-size-xxs) * -1);
        margin-right: calc(var(--kbq-size-xxs) * -1);
    }
}

.kbq-dropdown__content {
    display: flex;
    flex-direction: column;
}

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