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

@if index($hamburger-animations, stack) {
    .#{$hamburger-class-name}--stack {
        span.bar {
            transition:
                transform math.div(0.3s, $hamburger-animation-speed)
                $hamburger-easing math.div(0.2s, $hamburger-animation-speed),
                opacity math.div(0.25s, $hamburger-animation-speed)
                $hamburger-easing math.div(0.25s, $hamburger-animation-speed);

            &:nth-child(1),
            &:nth-child(3) {
                background: none;
                top: 0;

                &::before {
                    @include hamburger-bar;

                    transition: transform math.div(0.35s, $hamburger-animation-speed) $hamburger-easing;
                }
            }

            &:nth-child(1) {
                transform: translate3d(0, -$hamburger-bar-spacing, 0);
            }

            &:nth-child(3) {
                transform: translate3d(0, $hamburger-bar-spacing, 0);
            }
        }

        &.#{$hamburger-active-class-name} {
            span.bar {
                transition:
                    transform math.div(0.25s, $hamburger-animation-speed) $hamburger-easing,
                    opacity math.div(0.25s, $hamburger-animation-speed) $hamburger-easing;

                &:nth-child(1),
                &:nth-child(3) {
                    transform: translate3d(0, 0, 0);

                    &::before {
                        transition:
                            transform math.div(0.35s, $hamburger-animation-speed)
                            $hamburger-easing math.div(0.15s, $hamburger-animation-speed);
                    }
                }

                &:nth-child(1) {
                    &::before {
                        transform: rotate(45deg);
                    }
                }

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

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