
//========== Mobile Navigation ==========//

$transition-easing: cubic-bezier(.77, 0, .175, 1);
$transition-length: 0.5s;

// menu toggle button
.mobile-nav-toggle {

    .mobile-nav-icon-line {
        height: 2px;
    }

    // when menu toggle is clicked
    &.menu-toggle-active {

        .mobile-nav-icon-line {
            @apply m-0 bg-pink-500;

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

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

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

// mobile menu
.mobile-nav {
    transform: translate3d(-100%, 0, 0);
    transition: transform $transition-length $transition-easing;
    transition-delay: 0.1s;
    will-change: transform;

    // when menu is visible
    &.menu-visible {
        transform: translate3d(0, 0, 0);

        .item {
            @apply opacity-100;
            transform: translate3d(0, 0, 0);
        }
    }

    .item {
        transition: opacity .5s ease, transform $transition-length $transition-easing;
        transform: translate3d(-50%, 0, 0);
        transition-delay: $transition-length;

        // incrementally delay our animations
        @for $i from 0 through 100 {

            &:nth-child(#{$i}) {
                transition-delay: $transition-length * $i / 8 + .5;
            }
        }
    }
}
