@use "../helpers/extend" as *;
@use "../helpers/animation" as *;
header {
    z-index: 99999;
    background-color: transparent;
    &.scroll{
        background-color: var(--w);
        position: fixed;
        animation: navSticky 0.5s ease-in-out forwards;
        box-shadow: 0 5px 1.25rem var(--shadowColor2);
        nav{
            border-radius: 0;
            padding-inline: 0;
            margin-top: 0;
            box-shadow: none;
        }
        .navLinks {
            &.responsiveLink{
                top: 80px;
            }
        }
    }
    nav{
        background-color: var(--w);
        transition: var(--t-s);
        box-shadow: 0 5px 1.25rem var(--shadowColor);
    }
    .navLinks  {
        

        &.responsiveLink {
            background-color: var(--blackY);
            top: 90px;
            opacity: 0;
            inset-inline-start: -240px;
            transition: cubic-bezier(.44,.66,.74,.48).5s;
            li{
                &::before{
                    @extend %A_B;
                    width: 100%;
                    height: 1px;
                    background-color: var(--border-color);
                    bottom: -8px;
                    inset-inline-start: -5px;
                    opacity: .5;
                }
                
            }
            .navLink {
                color: var(--w);
                transform: translateX(50px);
                opacity: 0;
                transition: opacity 0.4s ease, transform 0.4s ease ;
                transition-delay: calc(0.15s * var(--i));
             
            }

            &.open {
                opacity: 1;
                inset-inline-start: 0;
                .navLink{
                    opacity: 1;
                    transform: translateX(0);
                }
            }
        }



    }
    .navLinks , .navLinks.responsiveLink{
        .navLink {

            &:hover,
            &.active {
                color: var(--hover-main);
            }
        }
    }
    .icon-nav-base2 {
        background-color: transparent;
        border: none;
        outline: none;
        cursor: pointer;
        width: 40px;
        height: 35px;

        span {
            background-color: var(--hover-main);
            width: 35px;
            height: 3px;
            border-radius: 4px;
            display: block;
            margin-block: 7px;
            transition: var(--t-s);

            &:nth-child(2) {
                width: 25px;
            }

            &:nth-child(3) {
                width: 15px;
            }

        }

        &.active {
            span {
                &:nth-child(1) {
                    transform: translateY(10px) rotate(45deg);
                }

                &:nth-child(2) {
                    opacity: 0;
                }

                &:nth-child(3) {
                    width: 35px;
                    transform: translateY(-10px) rotate(-45deg);
                }
            }
        }
    }
}

@include nav-sticky(navSticky);