@charset "UTF-8";

@import (reference) 'color';
@import (reference) 'mixin';
@nav-height: 35px;
@menu-mobile-x: transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99);


.scroll-active{
    .gradient-bg(@to-right,@color-B7, @color-1D);
}
.anviz-primary-btn-new{
    color: @color-ff;
    .btn-bg(@color-B7);
}

header{
    &.mobile{
        .top-nav-bg{
            background: @color-4b;
        }
    }
    &.new-nav-warp{
        .product-nav{
            // 旧的导航这里为空
            transition: background-color 0.2s linear !important;
            transition: all 0.3s ease-in;
            .gradient-bg(@to-right,@color-B7, @color-1D);
            &.scroll-active{
                -webkit-backdrop-filter: saturate(180%) blur(20px);
                backdrop-filter: saturate(180%) blur(20px);
                position: fixed;
                top: 0;
            }
            &:hover{
                .gradient-bg(@to-right,@color-B7, @color-1D);
                cursor: pointer;
            }
            @media (max-width:720px){
                overflow-y: scroll;
                visibility: visible;
                background: @color-4b;
                &:hover{
                    background: @color-4b;
                }
            }
            .series-pro-nav{
                > li{
                    &.series-item{
                        padding: 0 6px;
                        &.login,
                        &.cart{
                            .series-link{
                                padding: 0 10px;
                            }
                        }
                        .series-link{
                            font-size: 14px;
                            
                            span{
                                margin-right: 0;
                            }
                        }
                    }
                    @media (max-width:1200px){
                        &.series-item{
                            padding: 0;
                        }
                    }
                }
                li{
                    &.support-nav{
                        .icon{
                            display: none;
                        }
                        &:hover{
                            .sub-nav{
                                overflow: visible;
                                // @media (max-width:850px){
                                //     height: auto !important;
                                // }
                                ul{
                                    li{
                                        white-space: nowrap;
                                        position: relative;
                                        .sub-nav{
                                            display: none;
                                            transition: all 0.3s ease;
                                            @media (max-width:850px){
                                                display: none;
                                                position: relative;
                                                height: fit-content !important;
                                                padding-left: 1em;
                                            }
                                        }
                                        &:hover{
                                            .sub-nav{
                                                display: block;
                                                margin-left: 0;
                                                top: 0;
                                                left: 100%;
                                                @media (max-width:850px){
                                                    left: 0;
                                                }
                                                li{
                                                    a{
                                                        padding: 1em;
                                                    }
                                                    &:hover{
                                                        a{
                                                            color: @color-B7;
                                                        }
                                                    }
                                                }
                                            }
                                            > ul{
                                                .sub-nav{
                                                    overflow-x: visible;
                                                    overflow-y: hidden;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
               
            }
        }
    }
}