/*!
 * Copyright 2023 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
// Base
.k-menu {
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
    outline: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: @line-height;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    position: relative;
    cursor: default;

}


// Menu item
.k-menu-item {
    box-sizing: border-box;
    border-width: 0;
    outline: 0;
    display: flex;
    flex-flow: column nowrap;
    flex: none;
    position: relative;
    user-select: none;
}

.k-menu-item-content {
    display: block;
    height: auto;
    overflow: visible;

    .k-actions {
        margin-top: 0;
    }
}


// Menu link
.k-menu-link {
    padding: @menu-item-padding-y @menu-item-padding-x;
    outline: 0;
    color: inherit;
    display: flex;
    flex-flow: row nowrap;
    flex: 1 1 auto;
    gap: @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: -@icon-spacing;
    display: inline-flex;
    flex-flow: row nowrap;
}

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

    .k-menu-link {
        border-width: 0px 1px 0px 0px;
        border-style: solid;
    }

    > .k-menu-item + .k-menu-item {
        border-left-width: 1px;
    }

    > .k-separator {
        margin: 0 @menu-separator-spacing;
        width: 0;
        height: auto;
        border-width: 0 0 0 1px;
        border-style: solid;
    }
}


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

    > .k-menu-item + .k-menu-item {
        margin-top: @menu-item-spacing;
    }

    > .k-separator {
        margin: @menu-separator-spacing 0;
        height: 0;
        border-width: 1px 0 0;
        border-style: solid;
        border-color: inherit;
        display: block;
    }
}


// Menu popup
.k-menu-popup {
    border-width: @menu-popup-border-width;
    border-style: solid;
    overflow: auto;
    max-height: 80vh;
}


// Sub menu
.k-menu-group {
    margin: 0;
    padding: @menu-popup-padding-y @menu-popup-padding-x;
    list-style: none;
    display: none;
    position: absolute;

    .k-menu-link {
        padding: @menu-popup-item-padding-y @menu-popup-item-padding-x
    }

    .k-menu-popup & {
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .k-menu-item + .k-menu-item {
        margin-top: @menu-popup-item-spacing;
    }

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


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

    &.k-menu-horizontal {
        padding: @menu-popup-padding-x @menu-popup-padding-y;
    }

    .k-separator {
        margin: 0;
    }
}
.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;
    flex-wrap: nowrap;
}
.k-context-menu-popup {
    z-index: 12000;

    .k-context-menu {
        border-width: 0;
    }
}
.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;

    .k-menu {
        overflow: hidden;
        flex-wrap: nowrap;
    }
}
.k-menu-scroll-button {
    border-radius: 0;
    padding: 0;
    border-width: 1px;
    border-color: inherit;
    color: inherit;
    background: inherit;
    position: absolute;

    &.k-scroll-left {
        top: 0;
        left: 0;
        height: 100%;
        width: 16px;
        border-right-width: 1px;
    }
    &.k-scroll-right {
        top: 0;
        right: 0;
        height: 100%;
        width: 16px;
        border-left-width: 1px;
    }
    &.k-scroll-up {
        top: 0;
        left: 0;
        width: 100%;
        height: 16px;
        border-bottom-width: 1px;
    }
    &.k-scroll-down {
        bottom: 0;
        left: 0;
        width: 100%;
        height: 16px;
        border-top-width: 1px;
    }
}
