@use "sass:math";
@import "../variables";

@if index($hamburger-animations, criss-cross) {
    .#{$hamburger-class-name}--criss-cross {
        $offset-y: math.div(math.div($hamburger-bar-size, 2), $root-two);
        $offset-x: math.div($hamburger-bar-size, 2) - $offset-y;

        > .inner {
            &::before,
            &::after {
                @include hamburger-bar;

                opacity: 0;
                transform-origin: 0 50%;
                transition:
                    opacity math.div(0.4s, $hamburger-animation-speed) $hamburger-easing,
                    transform math.div(0.4s, $hamburger-animation-speed) $hamburger-easing;
            }

            &::before {
                transform: rotate(45deg) translate3d(-$offset-x, -$offset-y, 0) scaleX(0);
            }

            &::after {
                transform: rotate(-45deg) translate3d(-$offset-x, $offset-y, 0) scaleX(0);
                transition-delay: math.div(0.1s, $hamburger-animation-speed);
            }
        }

        span.bar {
            transition:
                transform math.div(0.4s, $hamburger-animation-speed) $hamburger-easing,
                opacity math.div(0.4s, $hamburger-animation-speed) $hamburger-easing,
                width math.div(0.4s, $hamburger-animation-speed) $hamburger-easing;

            @for $i from 1 through 3 {
                &:nth-child(#{$i}) {
                    transition-delay: math.div(0.3 + ($i * 0.03s), $hamburger-animation-speed);
                }
            }
        }

        &.#{$hamburger-active-class-name} {
            > .inner {
                &::before,
                &::after {
                    opacity: 1;
                }

                &::before {
                    transform: rotate(45deg) translate3d(-$offset-x, -$offset-y, 0);
                    transition-delay: math.div(0.4s, $hamburger-animation-speed);
                }

                &::after {
                    transform: rotate(-45deg) translate3d(-$offset-x, $offset-y, 0);
                    transition-delay: math.div(0.5s, $hamburger-animation-speed);
                }
            }

            span.bar {
                opacity: 0;
                transform: translate3d(-10px, 0, 0);
                width: 50%;

                &:nth-child(1) {
                    transition-delay: math.div(0s, $hamburger-animation-speed);
                }

                &:nth-child(2) {
                    transition-delay: math.div(0.2s, $hamburger-animation-speed);
                }

                &:nth-child(3) {
                    transition-delay: math.div(0.1s, $hamburger-animation-speed);
                }
            }
        }
    }
}