/* toggler associé au javascript - - - - - - - - - */ 
[data-toggle-button]{
    cursor: pointer;
}
[data-toggle-target][data-toggle-state='hide'] {
    display:none;
}

/*  media queries for nav */
@media (max-width: 768px) {
    [data-nav-menu='main-nav'] {
        position: fixed;
        top: 0;
        left:-100vw; 
        transition: 0.5s ease-out left;
        z-index: 10000;
        width:100vw;
        height: 100vh;
        box-sizing: border-box;
        padding:2rem;
        display:flex !important;
        flex-direction: column;
        justify-content: center;
        background-color: $white-color;

    }
    [data-nav-menu='main-nav'][data-toggle-state='show'] {
        left:0;
    }

    [data-nav-menu='main-nav']:not([data-toggle-state='show']) {
        animation:1s slideLeft ease-out forwards; 
        transition-delay:0;
    }

    [data-nav-button] {
        cursor:pointer;
        width: $hamburger-width;
        height: $hamburger-width;
    }

    /* comportement de l'icone: animation sur toggler-activated */
    [data-nav-icon] {
        transition: all 0.3s;
        box-sizing: border-box;
        cursor: pointer;
        position: relative;
        z-index: 99;
        height: $hamburger-width;
        width: $hamburger-width;
        display: block;
        z-index:10001;
    }
    [data-nav-icon] > * {
        transition: all .5s;
        box-sizing: border-box;
        position: absolute;
        height: $hamburger-width / 5;
        width: $hamburger-width;
        background-color: #000;
        left:0;
        
    }
    [data-nav-icon] .horizontal {
        transition: all 0.5s;
        box-sizing: border-box;
        top:($hamburger-width / 2) - ($hamburger-width / 10);
    }
    [data-nav-icon] .diagonal.part-1 {
        transition: all 0.5s;
        box-sizing: border-box;
        top:0;
        transform-origin: left top;
    } 
    [data-nav-icon] .diagonal.part-2 {
        transition: all 0.5s;
        box-sizing: border-box;
        top: $hamburger-width - ($hamburger-width / 5);
        transform-origin: left bottom
    } 

    /* animation */
    [data-toggle-state='show'] [data-nav-icon] .horizontal {
        transition: all 0.3s;
        opacity: 0;
    }
    [data-toggle-state='show'] [data-nav-icon] .diagonal.part-1 {
        transform: rotate(45deg);
        width:$hamburger-width * 1.25;
    }
    [data-toggle-state='show'] [data-nav-icon] .diagonal.part-2 {
        transform: rotate(-45deg);
        width:$hamburger-width * 1.25;
    }
}

