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

@if index($hamburger-animations, vertical) {
    .#{$hamburger-class-name}--vertical {
        $origin-offset: -1.25;
        $offset-factor: 1 - 2 * $origin-offset;
        $offset-y: math.div(math.div($hamburger-bar-size, 2), $root-two) * $offset-factor;
        $offset-x: math.div($hamburger-bar-size, 2) * $offset-factor - $offset-y;

        > .inner {
            transition: transform math.div(0.3s, $hamburger-animation-speed) $hamburger-easing;
        }

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

            &:nth-child(1) {
                top: 0;
                transform: translate3d(0, math.round(-$hamburger-bar-spacing * 0.8), 0);
                transform-origin: (100% * $origin-offset) 50%;
            }

            &:nth-child(2) {
                top: 0;
                transform: translate3d(0, math.round($hamburger-bar-spacing * 0.8), 0);
                transform-origin: (100% * $origin-offset) 50%;
            }

            &:nth-child(3) {
                display: none;
            }
        }

        &.#{$hamburger-active-class-name} {
            > .inner {
                transform:
                    rotate(90deg) translate3d(
                        math.div($hamburger-thickness, 2),
                        math.div(-$hamburger-thickness, 2),
                        0
                    );
                transition: transform math.div(0.4s, $hamburger-animation-speed) $hamburger-easing-out;
            }

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

                &:nth-child(1) {
                    transform: rotate(-45deg) translate3d(-$offset-x, $offset-y, 0);
                }

                &:nth-child(2) {
                    transform: rotate(45deg) translate3d(-$offset-x, -$offset-y, 0);
                }
            }
        }
    }
}