@use "sass:map";
@use "../../functions/index.scss" as *;
@use "../../color-system/_constants.scss" as *;
@use "../icons/_variables.scss" as *;
@use "./variables.scss" as *;
@use "../../z-index/index.scss" as *;
@use "../../motion/index.scss" as *;

@mixin kendo-menu--layout-base() {

    // Menu bar
    .k-menu-bar {
        border-width: $kendo-menu-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-menu-font-family;
        font-size: $kendo-menu-font-size;
        line-height: $kendo-menu-line-height;
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        position: relative;
        cursor: default;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }
    }
    .k-menu { @extend .k-menu-bar !optional; }

    // Menu item
    .k-menu-item {
        border-width: 0;
        outline: 0;
        display: flex;
        flex-flow: column nowrap;
        flex: none;
        position: relative;
        user-select: none;
        transition: color k-transition(rapid), background-color k-transition(rapid), border-color k-transition(rapid), box-shadow k-transition(rapid);

        &.k-selected {
            font-weight: $kendo-menu-item-selected-font-weight;
        }
    }
    .k-menu-item-content {
        display: block;
        height: auto;
        overflow: visible;

        .k-actions {
            margin-block-start: 0;
        }
    }


    // Menu link
    .k-menu-link {
        padding-block: $kendo-menu-item-padding-y;
        padding-inline: $kendo-menu-item-padding-x;
        outline: 0;
        color: inherit;
        display: flex;
        flex-flow: row nowrap;
        flex: 1 1 auto;
        gap: $kendo-menu-item-icon-spacing;
        align-items: center;
        position: relative;
        white-space: nowrap;
        cursor: pointer;
    }


    // Menu item text
    .k-menu-link-text {
        display: flex;
        flex-flow: row nowrap;
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    // Expand arrow
    .k-menu-expand-arrow {
        margin-inline-end: calc( #{$kendo-icon-spacing} * -1 );
        padding-block: $kendo-menu-icon-padding-y;
        padding-inline: $kendo-menu-icon-padding-x;
        display: inline-flex;
        flex-flow: row wrap;
        align-items: center;
        flex: none;
        position: relative;
    }


    // Orientation -- horizontal
    .k-menu-horizontal {
        flex-direction: row;

        > .k-menu-item + .k-menu-item {
            margin-inline-start: $kendo-menu-item-spacing;
        }

        > .k-separator {
            margin-block: $kendo-menu-separator-margin-block;
            margin-inline: $kendo-menu-separator-margin-inline;
            width: 0;
            height: auto;
            border-width: 0 0 0 1px;
            border-style: solid;
        }
    }


    // Orientation -- vertical
    .k-menu-vertical {
        flex-direction: column;
        width: 100%;

        > .k-menu-item + .k-menu-item {
            margin-block-start: $kendo-menu-item-spacing;
        }

        > .k-menu-item > .k-menu-link {
            padding-block: $kendo-menu-popup-md-item-padding-y;
            padding-inline: $kendo-menu-popup-md-item-padding-x;
            padding-inline-end: $kendo-menu-popup-md-item-padding-end;
        }

        > .k-menu-item > .k-menu-link > .k-menu-expand-arrow {
            margin-inline-start: $kendo-menu-popup-md-item-icon-margin-start;
            margin-inline-end: $kendo-menu-popup-md-item-icon-margin-end;
        }

        > .k-separator {
            margin-block: $kendo-menu-separator-margin-block;
            margin-inline: 0;
            height: 0;
            border-width: 1px 0 0;
            border-style: solid;
            display: block;
        }
    }


    // Menu popup
    .k-menu-popup {
        padding-block: $kendo-menu-popup-padding-y;
        padding-inline: $kendo-menu-popup-padding-x;
        box-sizing: border-box;
        border-width: $kendo-menu-popup-border-width;
        border-style: solid;
        overflow: auto;
        max-height: 80vh;

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        .k-menu-item {
            font-weight: initial;
        }
    }


    // Sub menu
    .k-menu-group {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-flow: column nowrap;
        position: absolute;

        .k-menu-item + .k-menu-item {
            margin-block-start: $kendo-menu-popup-item-spacing;
        }

        .k-separator {
            margin-block: $kendo-menu-separator-margin-inline;
            margin-inline: 0;
            height: 0;
            border-width: 1px 0 0;
            border-style: solid;
            display: block;
        }

        // Sizes
        @each $size, $size-props in $kendo-menu-group-sizes {
            $_font-size: map.get( $size-props, font-size);
            $_line-height: map.get( $size-props, line-height);
            $_item-padding-y: map.get( $size-props, item-padding-y);
            $_item-padding-x: map.get( $size-props, item-padding-x);
            $_item-padding-end: map.get( $size-props, item-padding-end);
            $_item-icon-margin-start: map.get( $size-props, item-icon-margin-start);
            $_item-icon-margin-end: map.get( $size-props, item-icon-margin-end);

            #{k-when-default($kendo-menu-group-default-size, $size)}
            &.k-menu-group-#{$size} {
                font-size: $_font-size;
                line-height: $_line-height;

                // jquery popup overrides those
                .k-menu-item {
                    font-size: $_font-size;
                    line-height: $_line-height;
                }

                .k-menu-link {
                    padding-block: $_item-padding-y;
                    padding-inline: $_item-padding-x;
                    padding-inline-end: $_item-padding-end;
                }

                .k-menu-expand-arrow {
                    margin-inline-start: $_item-icon-margin-start;
                    margin-inline-end: $_item-icon-margin-end;
                }
            }
        }

    }
    .k-menu-popup .k-menu-group {
        position: relative;
    }

    // Context menu
    .k-popups-wrapper {
        position: relative;
        border: 0;
        margin: 0;
        padding: 0;
    }
    .k-context-menu {
        margin: 0;
        padding-block: $kendo-menu-popup-padding-y;
        padding-inline: $kendo-menu-popup-padding-x;
        border-width: $kendo-menu-popup-border-width;
        border-style: solid;

        &.k-menu-horizontal {
            padding-block: $kendo-menu-popup-padding-x;
            padding-inline: $kendo-menu-popup-padding-y;
        }
    }
    .k-animation-container .k-context-menu.k-menu-horizontal {
        // kendo-jquery adds `display: block` via js and we need to override it.
        display: flex !important; // stylelint-disable-line declaration-no-important
        flex-wrap: nowrap;
    }
    .k-context-menu-popup {
        z-index: k-z-index("popup");
    }
    .k-popup .k-context-menu,
    .k-context-menu-popup .k-context-menu {
        border-width: 0;
    }


    // Scrolling
    .k-menu-scroll-wrapper {
        margin: 0;
        padding: 0;
        border: 0;
        position: relative;
        display: flex;
        align-items: center;

        .k-menu {
            overflow: hidden;
            flex-wrap: nowrap;
        }
    }

    .k-menu-scroll-wrapper-vertical {
        flex-direction: column;

        > .k-menu-scroll-button {
            width: 100%;
        }
    }

    .k-menu-group,
    .k-menu.k-context-menu {
        .k-item > .k-link {
            transition: color k-transition(rapid), background-color k-transition(rapid), border-color k-transition(rapid), box-shadow k-transition(rapid);
        }
    }
}