@import '../../../styles/theme/index.less';

@mi-menu: ~'@{mi-prefix}menu';
@mi-layout: ~'@{mi-prefix}layout';
@mi-side-menu: ~'@{mi-layout}-side-menu';
@ant-menu: ~'ant-menu';
@ant-submenu: ~'ant-menu-submenu';

.@{ant-menu} {
    &&-dark {
        background: var(--mi-menu-bg, @mi-menu-bg);
        
        .@{ant-menu}-item > span > a {
            color: var(--mi-menu-color, @mi-menu-color);
        }
    }

    &-dark {
        &.@{ant-submenu}-popup {
            .@{ant-menu}-sub {
                &::-webkit-scrollbar {
                    width: 8px;
                }

                &::-webkit-scrollbar-track {
                    box-shadow: inset 0 0 6px var(--mi-menu-scrollbar-track-shadow, @mi-menu-scrollbar-track-shadow);
                    .border-radius(8);
                }

                &::-webkit-scrollbar-thumb {
                    border-radius:10px;
                    background: var(--mi-menu-scrollbar-thumb-bg, @mi-menu-scrollbar-thumb-bg);
                    box-shadow: inset 0 0 6px var(--mi-menu-scrollbar-thumb-shadow, @mi-menu-scrollbar-thumb-shadow);
                }
            }
        }

        &&:not(.@{ant-menu}-horizontal) {
            .@{ant-menu}-item-selected {
                background: var(--mi-menu-active-bg, @mi-menu-active-bg);
                background-image: linear-gradient(315deg, var(--mi-menu-active-grandient-s, @mi-menu-active-grandient-s) 0%, var(--mi-menu-active-grandient-e, @mi-menu-active-grandient-e) 74%);
            }
        }
    }
}

.@{mi-menu} {
    color: var(--mi-menu-color, @mi-menu-color);
    background: var(--mi-menu-bg, @mi-menu-bg);
    .properties(padding-left, 16);
    .properties(padding-right, 16);
    scrollbar-width: none;
    -ms-overflow-style: none;
    &::-webkit-scrollbar {
        display: none;
    }
    overflow-x: hidden;
    overflow-y: scroll;

    & &-items,
    & &-item {
        min-height: var(--mi-side-item-height, @mi-side-item-height);
        line-height: var(--mi-side-item-height, @mi-side-item-height);
        color: var(--mi-menu-color, @mi-menu-color);
        transition: unset;
        overflow: hidden;
    }

    &-item {
        transition: unset;

        &-title {
            .flex(flex-start, center, column);
            height: var(--mi-side-item-height, @mi-side-item-height);
            .properties(line-height, 18);
            .properties(margin-left, 10);
    
            .sub {
                .properties(font-size, 12);
                color: var(--mi-menu-sub-color, @mi-menu-sub-color);
                .properties(line-height, 16);
                .properties(margin-top, 4);
            }
        }

        &-tag {
            .tag();
            position: absolute;
            .properties(right, 36);
            .properties(top, 14);
            margin: 0;
        }
    
        &-icon {
            position: absolute;
            .properties(right, 36);
            .properties(top, 18);
            color: var(--mi-theme, @mi-theme);
            margin-right: 0
        }

        & &-link {
            .flex(center, flex-start);
            color: var(--mi-menu-color, @mi-menu-color);
            transition: unset;
        }
    }

    & &-items {
        .@{ant-menu} {
            &-submenu-title {
                .flex(center, flex-start);
                height: var(--mi-side-item-height, @mi-side-item-height);
                line-height: var(--mi-side-item-height, @mi-side-item-height);
                color: var(--mi-menu-color, @mi-menu-color);
                transition: unset;

                .@{ant-submenu}-arrow {
                    opacity: 1;

                    &:before,
                    &:after {
                        background: var(--mi-menu-color, @mi-menu-color);
                    }
                }

                &:hover {
                    color: var(--mi-menu-hover-color, @mi-menu-hover-color);

                    .@{ant-submenu}-arrow {
                        &:before,
                        &:after {
                            background: var(--mi-menu-hover-color, @mi-menu-hover-color);
                        }
                    }

                    .@{mi-menu}-item-title {
                        .sub {
                            color: var(--mi-menu-hover-color, @mi-menu-hover-color);
                        }
                    }
                }
            }

            &-title-content {
                .flex(center, flex-start);
            }

            &-sub {
                background: var(--mi-menu-bg, @mi-menu-bg);
                box-shadow: none;
                overflow: hidden;
                position: relative;
                transition: unset;
            }
        }

        & .@{mi-menu} {
            &-item {
                height: var(--mi-side-item-height, @mi-side-item-height);
                line-height: var(--mi-side-item-height, @mi-side-item-height);

                & .@{mi-menu}-item-link {
                    color: var(--mi-menu-color, @mi-menu-color);
                }

                &:hover {
                    .@{mi-menu}-item-link {
                        color: var(--mi-menu-hover-color, @mi-menu-hover-color);
                    }
                }
            }
        }
    }

    & &-items-active {
        > .@{ant-submenu} {
            &-title {
                color: var(--mi-menu-hover-color, @mi-menu-hover-color);

                .@{ant-submenu}-arrow {
                    &:before,
                    &:after {
                        background: var(--mi-menu-hover-color, @mi-menu-hover-color);
                    }
                }

                .sub {
                    color: var(--mi-menu-hover-color, @mi-menu-hover-color);
                }
            }
        }
    }

    & &-items-active.@{ant-submenu}-open {
        > .@{ant-submenu} {
            &-title {
                color: var(--mi-menu-color, @mi-menu-color);

                .@{ant-submenu}-arrow {
                    &:before,
                    &:after {
                        background: var(--mi-menu-color, @mi-menu-color);
                    }
                }

                .sub {
                    color: var(--mi-menu-sub-color, @mi-menu-sub-color);
                }
            }
        }
    }

    &.@{ant-menu}-dark &-item {
        transition: unset;
        
        &:not(:last-child) {
            margin-bottom: 0;
        }

        > a {
            color: var(--mi-menu-color, @mi-menu-color);
        }

        &.@{ant-menu}-item-selected {
            background: var(--mi-menu-active-bg, @mi-menu-active-bg);
            background-image: linear-gradient(315deg, var(--mi-menu-active-grandient-s, @mi-menu-active-grandient-s) 0%, var(--mi-menu-active-grandient-e, @mi-menu-active-grandient-e) 74%);
            .border-radius(10);

            .@{mi-menu}-item-link,
            .anticon, .anticon + span {
                color: var(--mi-theme, @mi-theme);
                font-weight: bold;
            }

            .@{mi-menu}-item-title {
                .sub {
                    color: var(--mi-theme, @mi-theme);
                }
            }

            &:hover {
                .@{mi-menu}-item-link,
                .anticon, .anticon + span {
                    color: var(--mi-theme, @mi-theme);
                    font-weight: bold;
                }

                .@{mi-menu}-item-title {
                    .sub {
                        color: var(--mi-theme, @mi-theme);
                    }
                }
            }
        }

        &:hover {
            .@{mi-menu}-item-link,
            .anticon, .anticon + span {
                color: var(--mi-menu-hover-color, @mi-menu-hover-color);
            }

            .@{mi-menu}-item-title {
                .sub {
                    color: var(--mi-menu-hover-color, @mi-menu-hover-color);
                }
            }
        }
    }

    &.@{ant-menu}-dark > &-item,
    &.@{ant-menu}-dark > .@{ant-submenu} {
        &:last-child {
            .properties(margin-bottom, 24);
        }
    }
}

.ant-layout-sider {
    &-collapsed {
        & .@{mi-menu} {
            width: var(--mi-side-width-sm, @mi-side-width-sm);

            & > .@{mi-menu} {
                &-item,
                &-items {
                    .flex();
                    width: calc(@mi-side-width-sm - 32px);

                    .@{mi-menu}-item-link {
                        & .anticon {
                            .flex();
                            .properties(font-size, 20);
                        }
                    }

                    &.@{ant-menu}-item-selected {
                        &:after {
                            transform: scaleY(1);
                            opacity: 1;
                        }
                    }
                }

                &-items-active {
                    position: relative;
                    background: var(--mi-menu-active-bg, @mi-menu-active-bg);
                    background-image: linear-gradient(315deg, var(--mi-menu-active-grandient-s, @mi-menu-active-grandient-s) 0%, var(--mi-menu-active-grandient-e, @mi-menu-active-grandient-e) 74%);
                    .border-radius(10);
                }

                &-items-active.@{ant-submenu}-open {
                    background: var(--mi-menu-fold-popup-bg, @mi-menu-fold-popup-bg);

                    &:after {
                        opacity: 0;
                        transform: scaleY(0.0001);
                    }
                }
            }

            &-item {
                &-tag {
                    display: none;
                }
            }
        }

        & .@{ant-menu} {
            &-item {
                .anticon + span {
                    width: 0;
                    margin-left: 0;
                }
            }

            .@{mi-menu}-item-title {
                display: none;

                & + .anticon {
                    display: none;
                }
            }

            & > .@{ant-submenu} {
                & > .@{ant-submenu}-title {
                    margin: 0;

                    .anticon {
                        .properties(min-width, 20);
                        .properties(font-size, 20);
                        line-height: 0;
                    }
                }
            }
        }
    }
}

.@{ant-menu} {
    &:not(.@{ant-menu}-inline) {
        .@{ant-submenu} {
            &-open,
            &-active {
                color: var(--mi-theme, @mi-theme);
            }
        }
    }

    .@{ant-submenu}-popup {
        background: var(--mi-menu-fold-popup-bg, @mi-menu-fold-popup-bg);
        z-index: @mi-z-index-modal + 100;
    }

    &-dark {
        &.@{ant-submenu}-popup {
            z-index: @mi-z-index-top + 100;
            background: transparent;
            .border-radius(10);

            .@{ant-menu} {
                &-sub {
                    transition: unset;
                    background: var(--mi-menu-fold-popup-bg, @mi-menu-fold-popup-bg);
                    color: var(--mi-menu-color, @mi-menu-color);
                    .properties(padding-left, 16);
                    .properties(padding-right, 16);
                    .properties(padding-top, 8);
                    .properties(padding-bottom, 8);
                    .border-radius(10);
                    .properties(margin-left, 16);
                }

                &-item {
                    transition: none;
                    min-height: var(--mi-side-item-height, @mi-side-item-height);
                    .flex(center, flex-start);

                    > a {
                        .flex();
                        color: var(--mi-menu-color, @mi-menu-color);
                        transition: none;

                        &:hover {
                            color: var(--mi-theme, @mi-theme);
                        }
                    }

                    &-selected {
                        background: var(--mi-menu-active-bg, @mi-menu-active-bg);
                        background-image: linear-gradient(315deg, var(--mi-menu-active-grandient-s, @mi-menu-active-grandient-s) 0%, var(--mi-menu-active-grandient-e, @mi-menu-active-grandient-e) 74%);
                        .border-radius(10);

                        .@{mi-menu} {
                            &-item {
                                &-link {
                                    color: var(--mi-theme, @mi-theme);
                                    
                                    .anticon, .anticon + span {
                                        color: var(--mi-theme, @mi-theme);
                                    }
                                }

                                &-title {
                                    .sub {
                                        color: var(--mi-theme, @mi-theme);
                                    }
                                }
                            }
                         }
                    }

                    .@{mi-menu}-item {
                        &-tag {
                            display: none;
                        }

                        &-title + .anticon {
                            display: none;
                        }
                    }

                    &:hover {
                        .linear-gradient-background();
                        .border-radius(10);
                    }
                }
            }
        }
    }

    &-vertical > &-submenu > &-submenu-title {
        .flex(center, flex-start);
        height: var(--mi-side-item-height, @mi-side-item-height);
        line-height: var(--mi-side-item-height, @mi-side-item-height);

        .@{ant-submenu}-arrow {
            opacity: 1;
        }

        &:hover {
            color: var(--mi-theme, @mi-theme);

            .@{ant-submenu}-arrow {
                &:before,
                &:after {
                    background: var(--mi-theme, @mi-theme);
                }
            }
        }
    }

    &-vertical > &-submenu > &-submenu-title > &-title-content {
        .flex();
    }

    &-vertical > &-submenu-active > &-submenu-title {
        .@{ant-submenu}-arrow {
            &:before,
            &:after {
                background: var(--mi-theme, @mi-theme);
            }
        }
    }

    &-vertical &-item:not(:last-child) {
        margin-bottom: 0;

        > a {
            color: var(--mi-menu-color, @mi-menu-color);
        }
    }
}

.ant-tooltip {
    &-arrow {
        &-content {
            background-color: var(--mi-menu-fold-popup-bg, @mi-menu-fold-popup-bg);
        }
    }

    &-inner {
        min-height: 0;
        background-color: var(--mi-menu-fold-popup-bg, @mi-menu-fold-popup-bg);

        .@{mi-menu} {
            &-item-link {
                .flex();

                .anticon + span {
                    .properties(margin-left, 6);
                }
            }
        }
    }
}

.@{mi-side-menu} {
    height: calc(100vh - @mi-side-large-height);
    width: @mi-side-width;

    &-drawer {
        .ant-drawer-body {
            padding: 0;
        }
    }
}

.@{mi-layout} {
    &-side-has-bg {
        .@{ant-menu}-dark {
            background-color: transparent;
        }

        .@{mi-menu} .@{mi-menu}-items .@{ant-menu}-sub {
            background-color: transparent;
        }
    }
}