@use "sass:color";
@use "../abstracts/mixins";
@use "../abstracts/variables";

.menu{
    position: fixed;
    z-index: 400;
    top: 0; left: 0; right: 0; bottom: 0;
    display: none;

    &_mask{
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: color.adjust(variables.$cDark, $alpha: -0.4);
        cursor: pointer;
        opacity: 0;
    }

    &_content{
        position: absolute;
        top: 0; right: 0; bottom: 0;
        max-width: 820px;
        width: 80%;
        overflow: auto;
        background-color: variables.$cPrimary;
        color: #FFF;

        @include mixins.respondTo('xs'){
            width: 100%;
        }
    }

    &_scroller{
        padding: 12vh 7vw;

        @include mixins.respondTo('xs'){
            position: relative;
            overflow: hidden;
            padding-top: 10vh;
            padding-bottom: 0;
        }
    }

    .mainMenu{
        position: relative;
        padding-top: 4vh;
        padding-left: 4vw;
        padding-bottom: 6vh;

        @include mixins.respondTo('xs'){
            padding: 4vh 10vw 5vh 15vw;
        }

        ul{
            li{
                display: block;
                opacity: 0;
                
                a{
                    position: relative;
                    display: block;
                    @include mixins.fontSize(50,57);
                    padding: 10px 0;
                    text-transform: lowercase;
                    font-weight: 300;
                    text-decoration: none;
                    transition: color 0.15s linear;

                    @include mixins.respondTo('xs'){
                        @include mixins.fontSize(30,36,variables.$baseFontSizeXs);
                    }

                    @include mixins.hover{
                        text-decoration: none;
                        color: variables.$cDark;
                    }

                    &::before{
                        content: "";
                        position: absolute;
                        right: calc(100% + 3vw);
                        bottom: 40%;
                        width: 58px;
                        height: 46px;
                        background-image: url(../images/menu-quote.svg);
                        background-repeat: no-repeat;
                        background-size: cover;
                        opacity: 0;
                        transition: opacity 0.15s linear;

                        @include mixins.respondTo('sm'){
                            transform: scale(0.8);
                            right: calc(100% + 2vw);
                        }

                        @include mixins.respondTo('xs'){
                            transform: scale(0.8);
                            right: calc(100% + 5vw);
                            bottom: 20%;
                        }
                    }
                }

                &.current-menu-item{
                    a{
                        color: variables.$cDark;
                        
                        &::before{
                            opacity: 1;
                        }
                    }
                }
            }
        }
    }

    .secondMenuWrap{
        position: relative;
        background-color: none;

        @include mixins.respondTo('xs'){
            background-color: #FFF;
            margin-left: -7vw;
            margin-right: -7vw;
            padding-left: 7vw;
            padding-right: 7vw;
            margin-top: 10vh;
        }
    }

    .secondMenu{
        padding-top: 4vh;
        padding-left: 4vw;
        padding-bottom: 4vh;
        margin-left: 5px;
        opacity: 0;

        @include mixins.respondTo('xs'){
            padding-top: 10vh;
            padding-left: 15vw;
            padding-right: 5vh;
            padding-bottom: 10vh;
        }

        ul{
            position: relative;
            z-index: 1;

            li{
                a{
                    display: block;
                    @include mixins.fontSize(14,20);
                    padding: 2px 0;
                    text-transform: lowercase;
                    transition: color 0.15s linear;

                    @include mixins.respondTo('xs'){
                        color: variables.$cDark;
                        @include mixins.fontSize(14,24,variables.$baseFontSizeXs);
                    }

                    @include mixins.hover{
                        text-decoration: none;
                        color: variables.$cDark;
                    }
                }

                &.current-menu-item{
                    a{
                        color: variables.$cDark;
                    }
                }
            }
        }
    }

    .menu_top{
        position: fixed;
        z-index: 10;
        top: 7vh; left: 7vw; right: 6vw;
        display: flex;
        align-items: center;
        height: 37px;
        opacity: 0;

        @include mixins.respondTo('xs'){
            top: 20px; left: 15px; right: 15px;
        }

        &_logo{
            color: #FFF;
            margin-right: 5px;
            display: none;

            @include mixins.respondTo('xs'){
                display: block;
            }
        }

        &_separator{
            height: 2px;
            background-color: #FFF;
            flex: 1;
        }

        &_langSelector{
            position: relative;
            display: block;
            height: 100%;
            margin-right: 20px;
            font-family: variables.$ffC;
            @include mixins.fontSize(30,30);
            font-weight: 300;

            @include mixins.respondTo('xs'){
                display: none;
            }

            &_current{
                svg{
                    color: variables.$cDark;
                    display: inline-block;
                    vertical-align: middle;
                    margin-left: 3px;
                }
            }
            &_dropdown{
                position: absolute;
                z-index: 10;
                left: -10px; top: 100%;
                color: #FFF;
                padding: 10px 0 20px 0;
                visibility: hidden;
                opacity: 0;
                transform: translateY(-10px);
                transition: visibility 0s linear 0.15s, opacity 0.15s linear, transform 0.15s linear;
    
                a{
                    display: block;
                    padding: 3px 10px;
                    transition: color 0.15s linear;

                    @include mixins.hover{
                        color: variables.$cDark;
                        text-decoration: none;
                    }
                }

                .current-lang{
                    a{
                        color: variables.$cDark;
                    }
                }
            }

            @include mixins.hover{
                .menu_top_langSelector_dropdown{
                    visibility: visible;
                    opacity: 1;
                    transition-delay: 0s;
                    transform: translateY(0);
                }
            }
        }

        &_close{
            position: relative;
            width: 34px;
            height: 34px;
            margin-left: 20px;

            span{
                position: absolute;
                width: 24px; height: 2px;
                left: 5px; right: 5px;
                background-color: #FFF;
                top: 50%;
                margin-top: -1px;
                transform-origin: center center;
    
                &:nth-child(1){
                    transform: rotate(40deg);
                }

                &:nth-child(2){
                    transform: rotate(-40deg);
                }
            }
        }
    }

    .menu_bottom{
        display: flex;
        align-items: center;
        opacity: 0;

        @include mixins.respondTo('xs'){
            padding-left: 15vw;
        }

        &_switchLang{
            margin-right: 5px;
            font-family: variables.$ffC;
            font-size: 26px;
            line-height: 1;
            font-weight: 300;
            display: none;

            @include mixins.respondTo('xs'){
                display: block;
            }

            a, a:visited{
                color: #FFF;
                text-decoration: none;
            }

            .current-lang{
                display: none;
            }
        }
    }

    .menuSeparator{
        margin-left: 2vw;
        margin-right: 2vw;
        height: 2px;
        background-color: variables.$cLight;
        flex: 1;
    }

    &--opened{
        display: block;
    }
}

.menuToggle{
    position: fixed;
    z-index: 350;
    top: 7vh; right: calc(2.5vw - 2px);
    width: 34px;
    height: 34px;

    @include mixins.respondTo('xs'){
        top: 15px; right: 10px;
    }
    
    span{
        position: absolute;
        width: 24px; height: 2px;
        left: 5px; right: 5px;
        background-color: #F90000;
        top: 50%;
        transition: all 0.4s variables.$ExpoEaseOut;

        &:nth-child(1){ margin-top: -8px; }
        &:nth-child(2){ margin-top: -1px; }
        &:nth-child(3){ margin-top: 6px; }
    }

    &--dark{
        span{
            background-color: variables.$cDark;
        }
    }
}

.logoContainer{
    position: fixed;
    z-index: 350;
    top: 7vh; left: 3.5vw;//calc(7vw - 5px);

    @include mixins.respondTo('xs'){
        top: 25px; left: 15px;
    }

    .logo{
        position: relative;
        display: block;
    
        &_text{ fill: variables.$cDark; }
        &_dot{ fill: variables.$cPrimary; }

        &_small{
            color: #FFF !important;
            position: absolute;
            top: 0; left: 0;
            display: none;

            @include mixins.respondTo('sm'){
                display: block;
            }
        }

        &_full{
            display: block;
            @include mixins.respondTo('sm'){
                display: none;
            }
        }
    }
}

.anchors{
    position: fixed;
    z-index: 250;
    top: 50%; right: 2.5vw;
    width: 30px;
    transform: translateY(-50%);

    @include mixins.respondTo('sm'){
        right: 1.5vw;
    }

    @include mixins.respondTo('xs'){
        display: none !important;
    }

    a{
        position: relative;
        display: block;
        width: 30px;
        height: 30px;

        &::after{
            content: "";
            position: absolute;
            z-index: 1;
            width: 8px;
            height: 8px;
            border-radius: 8px;
            top: 50%; left: 50%;
            margin-left: -4px;
            margin-top: -4px;
            background-color: variables.$cGreyLight;
            transition: background-color 0.15s linear;
        }
        &::before{
            content: "";
            position: absolute;
            z-index: 0;
            width: 10px;
            height: 10px;
            border-radius: 10px;
            top: 50%; left: 50%;
            margin-left: -5px;
            margin-top: -5px;
            background-color: variables.$cLight;
            opacity: 0.7;
            display: none;
        }

        &.active{
            &::after{
                background-color: variables.$cPrimary;
            }
            &::before{
                display: block;
            }
        }
    }
}

html[data-ui="light"]{
    .logo_text{ fill: variables.$cLight; }
    .logo_{ fill: variables.$cLight; }

    // .menuToggle{
    //     span{
    //         background-color: $cLight;
    //     }
    // }
}