@import './config.less';
@import './header.less';
@import './sider.less';

.@{menu-prefix-cls} {
    margin-bottom: 0;
    line-height: 0; // Fix display inline-block gap
    text-align: left;
    list-style: none;
    outline: none;
    font-size: @menu-font-size;
    background-color: @menu-bg;

    &:not(&-with-icon):not(&-global):not(&-sub) {
        box-shadow: @menu-shadow;
        .basic-tp-config(@menu-light-tp);
    }

    > li {
        list-style: none;
    }

    // Overflow ellipsis
    &-overflow {
        display: flex;

        &-item {
            flex: none;
        }
    }

    &-hidden,
    &-submenu-hidden{
        display: none;
    }

    &-item-group-title {
        height: @menu-group-height;
        padding: 2 * @P 4 * @P @P;
        color: @G5;
        font-size: @menu-group-font-size;
        line-height: 5 * @P;
    }

    &-item {
        cursor: pointer;
        position: relative;
        display: flex;
    }

    &-item-custom {
        padding: 2 * @P @menu-inline-space;
    }

    // :focus-visible 会添加元素聚焦
    &-item,
    &-submenu {
        outline: none;
    }

    &-submenu,
    &-item{
        .basic-tp-config(@menu-light-tp);
        font-size: @T3;
        font-weight: @font-weight-400;
    }

    &-item a {
        color: inherit;
        font-size: @T3;
        font-weight: @font-weight-400;
        &::before {
            position: absolute;
            inset: 0;
            background-color: transparent;
            content: '';
        }
    }

    &-sub {
        border-radius: @R2;
        background-color: @G11;
        box-shadow: @shadow-1;
    }

    &-sub&-inline {
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    &-submenu-popup {
        position: absolute;
        z-index: @submenu-zindex;
        transform-origin: 0 0;
        background-color: @G11;
        border-radius: @P;
    }

    &-submenu-title {
        display: flex;
        align-items: center;
        margin: 0;
        white-space: nowrap;
        cursor: pointer;
        position: relative;
    }

    &-submenu-placement-bottomCenter > &-vertical {
        margin-top: -1 * @P;
    }

    // MODE - popover 每个模式的样式不一样 sub
    &-horizontal-mode > &-vertical,
    &-inline-mode > &-vertical {
        .@{menu-prefix-cls}-item {
            font-size: @T3;
            padding-left: 5 * @P;
            padding-right: 5 * @P;
            display: flex;
            // .basic-tp-config(@menu-item-tp);
            &-selected {
                color: ~'@{@{menu-light-tp}-click-color}';
            }
        }
        > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
            font-size: @T3;
            display: flex;
            justify-content: space-between;
            padding-right: 3 * @P;
            .basic-tp-config(@menu-item-tp);
        }
        > .@{menu-prefix-cls}-submenu:hover > .@{menu-prefix-cls}-submenu-title,
        > .@{menu-prefix-cls}-submenu-selected > .@{menu-prefix-cls}-submenu-title {
            color: ~'@{@{menu-light-tp}-click-color}';
        }
    }

    &-horizontal-mode > &-vertical {
        .@{menu-prefix-cls}-submenu {
            .acud-menu-submenu-arrow::before {
                transform: rotate(135deg) translateX(2.5px);
            }
            .acud-menu-submenu-arrow::after {
                transform: rotate(45deg) translateX(-2.5px);
            }
            .acud-menu-title-content {
                margin-right: 3 * @P;
            }
        }
    }

    // horizontal
    &-horizontal {
        font-size: @menu-font-size;
        border: 0;
        line-height: @menu-horizontal-line-height;
        height: @menu-horizontal-line-height;
        display: flex;
        white-space: nowrap;

        > .@{menu-prefix-cls}-item, > .@{menu-prefix-cls}-submenu {
            padding-right: 5 * @P;
            padding-left: 5 * @P;
            &:last-child {
                margin-right: 0;
            }
        }

        > .@{menu-prefix-cls}-item > .@{menu-prefix-cls}-item-icon {
            margin-right: @menu-item-icon-margin-right;
        }
    }

    &-horizontal > &-item-active,
    &-horizontal > &-submenu-active {
        color: @menu-item-active-color;
    }

    &-horizontal > &-item,
    &-horizontal > &-submenu {
        &::after {
            position: absolute;
            right: 5 * @P;
            bottom: 0;
            left: 5 * @P;
            border-bottom: 2px solid transparent;
            transition: transform @animation-duration-slow @ease-in-out;
            content: '';
        }
    }
    
    &-horizontal > &-item-selected {
        position: relative;
        color: ~'@{@{menu-inline-item-selected-tp}-click-color}';
        font-size: @T3;
        font-weight: @font-weight-400;
        &::after {
            border-bottom: 2px solid @menu-item-active-color;
        }
    }

    &-horizontal > &-submenu-selected {
        position: relative;
        color: ~'@{@{menu-inline-item-selected-tp}-click-color}';
        font-size: @T3;
        font-weight: @font-weight-400;
        &::after {
            border-bottom: 2px solid @menu-item-active-color;
        }
    }

    &-horizontal > &-submenu > &-submenu-title {
        >.@{menu-prefix-cls}-item-icon {
            margin-right: @menu-item-icon-margin-right;
            height: @menu-item-height;
        }
        >.@{menu-prefix-cls}-submenu-expand-icon {
            margin-left: @P;
            height: @menu-item-height;
        }
    }

    // vertical
    &-vertical {
        padding: 2 * @P 0;

        .@{menu-prefix-cls}-item {
            display: flex;
            padding: 0 5 * @P;
        }

        .@{menu-prefix-cls}-item,
        .@{menu-prefix-cls}-submenu-title {
            height: 8 * @P;
            line-height: 8 * @P;
            
            .@{menu-prefix-cls}-item-icon:first-child {
                margin-right: @menu-item-icon-margin-right;
            }
        }

        .@{menu-prefix-cls}-item,
        .@{menu-prefix-cls}-submenu {
            overflow: hidden;
        }

        .@{menu-prefix-cls}-submenu {
            padding-left: 5 * @P;
        }
    }

    // inline
    &-inline {
        font-size: @menu-font-size;

        .@{menu-prefix-cls}-item,
        .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
            padding-left: @menu-inline-space;
            padding-right: @menu-inline-space;
        }

        .@{menu-prefix-cls}-item-group {
            > .@{menu-prefix-cls}-item-group-list {
                > .@{menu-prefix-cls}-submenu {
                    > .@{menu-prefix-cls}-submenu-title > .@{menu-prefix-cls}-item-icon {
                        margin-right: @menu-item-icon-margin-right;
                    }
                }
            }
        }

        // Motion enhance for first level
        &.@{menu-prefix-cls}-root {
            .@{menu-prefix-cls}-item,
            .@{menu-prefix-cls}-submenu-title {
                > .@{menu-prefix-cls}-title-content {
                    flex: auto;
                    min-width: 0;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                > * {
                    flex: none;
                }
            }

            // 一级和二级菜单间没有margin
            > .@{menu-prefix-cls}-submenu-open > .@{menu-prefix-cls}-submenu-title,
            > .@{menu-prefix-cls}-item-group > .@{menu-prefix-cls}-item-group-list
            > .@{menu-prefix-cls}-submenu-open > .@{menu-prefix-cls}-submenu-title {
                margin-bottom: 0 !important;
            }
        }
    }

    &-inline,
    &-inline-collapsed {
        .@{menu-prefix-cls}-item,
        .@{menu-prefix-cls}-submenu-title {
            height: @menu-item-height;
            line-height: @menu-item-height;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: flex;
            align-items: center;
        }

        // 只有一级菜单间有margin
        &.@{menu-prefix-cls}-root {
            > .@{menu-prefix-cls}-item,
            > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title,
            > .@{menu-prefix-cls}-item-group > .@{menu-prefix-cls}-item-group-list > .@{menu-prefix-cls}-item,
            > .@{menu-prefix-cls}-item-group > .@{menu-prefix-cls}-item-group-list
            > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
                margin-bottom: @P;
            }
        }

        .@{menu-prefix-cls}-item-group {
            > .@{menu-prefix-cls}-item-group-title {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }

        .@{menu-prefix-cls}-item {
            > .@{menu-prefix-cls}-item-icon {
                margin-right: @menu-item-icon-margin-right;
            }
            &.@{menu-prefix-cls}-item-selected {
                color: ~'@{@{menu-inline-item-selected-tp}-click-color}';
                background-color: ~'@{@{menu-inline-item-selected-p}-click-background-color}';
                position: relative;
                &::before {
                    content: '';
                    border-left: 3px solid @B6;
                    position: absolute;
                    left: 0;
                    top: 0;
                    height: 40px;
                }
            }
        }

        .@{menu-prefix-cls}-submenu-title > .@{menu-prefix-cls}-item-icon{
            height: @menu-item-height;
        }

        &.@{menu-prefix-cls}-vertical {
            padding: 0;
        }
    }
    
    &-inline > &-submenu {
        .@{menu-prefix-cls}-item-icon {
            margin-right: 2 * @P;
        }
        &-selected {
            .basic-tp-config(@menu-inline-item-selected-tp);
            > .@{menu-prefix-cls}-submenu-title {
                color: ~'@{@{menu-inline-item-selected-tp}-click-color}';
            }
        }
    }

    &-inline-header {
        height: 12 * @P;
        line-height: 12 * @P;
        margin-bottom: 2 * @P;
        padding-left: 4 * @P;
        padding-right: 4 * @P;
        display: flex;
        color: ~'@{@{menu-item-tp}-default-color}';
        &-item {
            display: flex;
            width: 100%;
            border-bottom: 1px solid @G8;
            align-items: center;
            font-weight: 600;
            .@{menu-prefix-cls}-item-icon {
                margin-right: 2 * @P;
            }

            & > &-text {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
        &-collapsed {
            .@{menu-prefix-cls}-inline-header-item {
                padding-left: 1.5 * @P;
            }
            .@{menu-prefix-cls}-item-icon {
                margin-right: 0;
            }
        }
    }

    &-inline-title-pop {
        box-shadow: @menu-shadow;
        .@{menu-prefix-cls}:not(.@{menu-prefix-cls}-with-icon):not(.@{menu-prefix-cls}-global):not(.@{menu-prefix-cls}-sub.@{menu-prefix-cls}-inline),
        .@{menu-prefix-cls}-sub {
            box-shadow: none;
        }
        .@{menu-prefix-cls}-pop-sub-title {
            height: 8 * @P;
            line-height: 8 * @P;
            border-bottom: 1px solid @G8;
            padding-bottom: 2 * @P;
            margin-top: 2 * @P;
            margin-left: 5 * @P;
            margin-right: 5 * @P;
            display: flex;
            color: ~'@{@{menu-item-tp}-default-color}';
            box-sizing: content-box;
        }
    }

    // collapsed
    &-inline-collapsed {
        width: 15 * @P;
    }
    
    &-inline-collapsed > &-item,
    &-inline-collapsed > &-item-group > &-item-group-list > &-item,
    &-inline-collapsed > &-item-group > &-item-group-list > &-submenu,
    &-inline-collapsed > &-item-group > &-item-group-list > &-submenu > &-submenu-title,
    &-inline-collapsed > &-submenu > &-submenu-title {
        left: 0;
        text-overflow: clip;
        padding: 0 calc(50% - 8px);
        
        .@{menu-prefix-cls}-submenu-arrow,
        .@{menu-prefix-cls}-submenu-expand-icon {
            opacity: 0;
        }
        .@{menu-prefix-cls}-item-icon,
        .@{iconfont-css-prefix} {
            margin: 0;
            + span {
                display: inline-block;
                opacity: 0;
            }
        }
    }

    &-inline-collapsed > &-item-group > &-item-group-title{
        padding: 0 calc(50% - 8px);
    }

    &-inline-collapsed > &-submenu {
        padding-left: 0;
    }
  
    &-inline-collapsed > &-submenu-selected > &-submenu-title {
        color: ~'@{@{menu-inline-item-selected-tp}-click-color}';
        background-color: ~'@{@{menu-inline-item-selected-p}-click-background-color}';
        position: relative;
        &::before {
            content: '';
            border-left: 3px solid @B6;
            position: absolute;
            left: 0;
            top: 0;
            height: 40px;
        }
    }
    
    &-inline-collapsed > &-item-custom {
        font-size: @menu-item-icon-size;
        color: @G2;
        padding: 2 * @P calc(50% - 8px);

        > .@{menu-prefix-cls}-item-custom-popup-icon:hover {
            color: @menu-item-active-color;
            cursor: pointer;
        }
    }

        // todo move to menu
    // arrow
    &-submenu-inline {
        .@{menu-prefix-cls}-submenu-arrow {
            position: absolute;
            top: 50%;
            right: 0;
            width: 16px;
            color: inherit;
            transform: translateY(-50%);
            transition: transform @animation-duration-slow @ease-in-out;
        }

        .@{menu-prefix-cls}-submenu-arrow {
            // →
            &::before,
            &::after {
                position: absolute;
                width: 6px;
                height: 1.5px;
                background-color: currentColor;
                border-radius: 2px;
                transition: background @animation-duration-slow @ease-in-out,
                    transform @animation-duration-slow @ease-in-out, top @animation-duration-slow @ease-in-out,
                    color @animation-duration-slow @ease-in-out;
                content: '';
            }
            &::before {
                transform: rotate(-45deg) translateX(2.5px);
            }
            &::after {
                transform: rotate(45deg) translateX(-2.5px);
            }
        }
    }

    &-submenu-open &-submenu-arrow{
        // ↑
        // transform: translateY(-2px);
        &::after {
            transform: translateY(-1.5px) rotate(-45deg);
        }
        &::before {
            transform: translateY(-1.5px) translateX(3.5px) rotate(45deg);
        }
    }

    &-submenu-arrow {
        width: 16px;
        &::before,
        &::after {
            position: absolute;
            width: 6px;
            height: 1.5px;
            background-color: currentColor;
            border-radius: 2px;
            transition: background @animation-duration-slow @ease-in-out,
                transform @animation-duration-slow @ease-in-out, top @animation-duration-slow @ease-in-out,
                color @animation-duration-slow @ease-in-out;
            content: '';
        }
        &::before {
            transform: rotate(-45deg) translateX(2.5px);
        }
        &::after {
            transform: rotate(45deg) translateX(-2.5px);
        }
    }

    // with icon - horizontal
    &-icon-container {
        box-shadow: @menu-shadow;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: @headermenu-height;
    }

    &-icon-container > &-with-icon {
        flex-grow: 1;
        min-width: 0;
    }

    &-icon-container > &-iconlist {
        justify-content: flex-end;
        display: flex;
        height: 100%;
        line-height: 100%;
        > .icon-item {
            cursor: pointer;
            display: flex;
            align-items: center;
            font-size: 4 * @P;
            margin-right: @menu-horizontal-withicon-margin-right;
            .basic-tp-config(@menu-horizontal-withicon-tp);
        }
    }

    .@{menu-prefix-cls}-item-icon,
    .@{menu-prefix-cls}-submenu-expand-icon {
        display: flex;
        align-items: center;;
        font-size: @menu-item-icon-size;
    }
}

.@{menu-prefix-cls}-inline-header-tooltip {
    padding-left: 24px;
    .@{acud-prefix}-tooltip-arrow {
        transform: translate(16px, -50%);
    }
}