@use "sass:math";
@use "sass:list";
@import "variables";

@mixin hamburger-bar() {
    background-color: $hamburger-color;
    border-radius: $hamburger-bar-border-radius;
    content: "";
    display: block;
    height: $hamburger-thickness;
    position: absolute;
    width: 100%;
}

button.#{$hamburger-class-name} {
    height: $hamburger-size;
    width: $hamburger-width;
}

div.#{$hamburger-class-name} {
    height: $hamburger-size - ($hamburger-border-width * 2);
    width: $hamburger-width - ($hamburger-border-width * 2);

    > .inner {
        top: 50%;
    }
}

.#{$hamburger-class-name} {
    $base-transitions: opacity $hamburger-opacity-transition-speed $hamburger-easing,
        background $hamburger-background-transition-speed $hamburger-easing;

    background-color: $hamburger-background;
    border: $hamburger-border-width $hamburger-border-color solid;
    border-radius: $hamburger-border-radius;
    color: inherit;
    cursor: pointer;
    display: inline-block;
    font: inherit;
    opacity: $hamburger-opacity;
    overflow: visible;
    padding: $hamburger-padding;
    text-transform: none;
    transition: list.append($base-transitions, $hamburger-extra-transition-rules);

    &:hover {
        background-color: $hamburger-background-hover;
        opacity: $hamburger-opacity-hover;

        span.bar {
            background-color: $hamburger-color-hover;
        }

        > .inner,
        span.bar {
            &:nth-child(1),
            &:nth-child(2),
            &:nth-child(3) {
                &::before,
                &::after {
                    background-color: $hamburger-color-hover;
                }
            }
        }
    }

    &.#{$hamburger-active-class-name} {
        background-color: $hamburger-background-active;

        span.bar {
            background-color: $hamburger-color-active;
        }

        > .inner,
        span.bar {
            &:nth-child(1),
            &:nth-child(2),
            &:nth-child(3) {
                &::before,
                &::after {
                    background-color: $hamburger-color-active;
                }
            }
        }
    }

    > .inner {
        margin: 0;
        margin-top: math.div(-$hamburger-thickness, 2);
        position: relative;
        width: 100%;
    }

    span.bar {
        @include hamburger-bar;

        &:nth-child(1) {
            top: -$hamburger-bar-spacing;
        }

        &:nth-child(3) {
            top: $hamburger-bar-spacing;
        }
    }

    &:focus {
        outline: 0;
    }
}