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

@if index($hamburger-animations, arrow) or index($hamburger-animations, arrow-r) {
    .#{$hamburger-class-name}--arrow,
    .#{$hamburger-class-name}--arrow-right {
        > .inner {
            transition: transform math.div(0.5s, $hamburger-animation-speed) $hamburger-easing;
        }

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

            &:nth-child(1) {
                transform-origin: 100% 0;
            }

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

            &:nth-child(3) {
                transform-origin: 100% 100%;
            }
        }

        &.#{$hamburger-active-class-name} {
            > .inner {
                transform: rotate(180deg) translate3d(0, -$hamburger-thickness, 0);
            }

            span.bar {
                $scale: 0.4;
                $offset: math.div($hamburger-bar-spacing, $root-two) + math.div(
                    math.div($hamburger-thickness, 2),
                    $root-two
                );

                transition-delay: 0s;

                &:nth-child(1) {
                    transform: rotate(45deg) scaleX($scale) translate3d(math.div($offset, $scale), $offset, 0);
                }

                &:nth-child(2) {
                    transform: scaleX(1 - math.div($hamburger-thickness, $hamburger-bar-size));
                }

                &:nth-child(3) {
                    transform: rotate(-45deg) scaleX($scale) translate3d(math.div($offset, $scale), -$offset, 0);
                }
            }
        }
    }
}