/**
 * Nav
 */
@import '../../css/variables';
@import '../../css/mixins';
@import 'css/variables';
@import 'css/colors';

.hamburger-menu {
    opacity: var(----opacity);
    padding: var(----padding);
    width: var(----bar--width);
    height: calc(var(----bar--height) * 3 + var(----bar--spacing) * 2);
    display: inline-block;
    position: relative;
    box-sizing: content-box;
    cursor: pointer;
    transition: opacity 0.3s ease;

    &:hover {
        ----opacity: var(----opacity--hover);
    }

    > .hamburger-menu-bars {
        display: block;
        top: 50%;
        margin-top: calc(var(----bar--height) / -2);

        &,
        &::before,
        &::after {
            width: var(----bar--width);
            height: var(----bar--height);
            border-radius: var(----bar--border-radius);
            background: var(----background);
            position: absolute;
            transition-property: transform;
            transition-duration: 0.15s;
            transition-timing-function: ease;
        }

        &::before,
        &::after {
            content: "";
            display: block;
        }

        &::before {
            top: calc(var(----bar--spacing) * -1 + var(----bar--height) * -1);
        }

        &::after {
            bottom: calc(var(----bar--spacing) * -1 + var(----bar--height) * -1);
        }
    }

    &.-close {
        > .hamburger-menu-bars {
            transition-duration: 0.22s;
            transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

            &::before {
                transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
            }

            &::after {
                transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
            }
        }

        &.-active {
            > .hamburger-menu-bars {
                transform: rotate(225deg);
                transition-delay: 0.12s;
                transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

                &::before {
                    top: 0;
                    opacity: 0;
                    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
                }

                &::after {
                    bottom: 0;
                    transform: rotate(-90deg);
                    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
                }
            }
        }
    }

    &.-arrow-left.-active > .hamburger-menu-bars {
        &::before {
            transform: translate3d(calc(var(----bar--width) * -0.2), 0, 0) rotate(-45deg) scale(0.7, 1);
        }

        &::after {
            transform: translate3d(calc(var(----bar--width) * -0.2), 0, 0) rotate(45deg) scale(0.7, 1);
        }
    }

    &.-arrow-right.-active > .hamburger-menu-bars {
        &::before {
            transform: translate3d(calc(var(----bar--width) * 0.2), 0, 0) rotate(45deg) scale(0.7, 1);
        }

        &::after {
            transform: translate3d(calc(var(----bar--width) * 0.2), 0, 0) rotate(-45deg) scale(0.7, 1);
        }
    }

    &.-arrow-up.-active > .hamburger-menu-bars {
        transform: rotate(-90deg);

        &::before {
            transform: translate3d(calc(var(----bar--width) * 0.2), 0, 0) rotate(45deg) scale(0.7, 1);
        }

        &::after {
            transform: translate3d(calc(var(----bar--width) * 0.2), 0, 0) rotate(-45deg) scale(0.7, 1);
        }
    }

    &.-arrow-down.-active > .hamburger-menu-bars {
        transform: rotate(90deg);

        &::before {
            transform: translate3d(calc(var(----bar--width) * 0.2), 0, 0) rotate(45deg) scale(0.7, 1);
        }

        &::after {
            transform: translate3d(calc(var(----bar--width) * 0.2), 0, 0) rotate(-45deg) scale(0.7, 1);
        }
    }

    &.-minus.-active > .hamburger-menu-bars {
        &::before {
            transform: translate3d(0, calc(var(----bar--spacing) + var(----bar--height)), 0);
        }

        &::after {
            transform: translate3d(0, calc(var(----bar--spacing) * -1 + var(----bar--height) * -1), 0);
        }
    }

    &.-plus.-active > .hamburger-menu-bars {
        &::before {
            transform: translate3d(0, calc(var(----bar--spacing) + var(----bar--height)), 0);
        }

        &::after {
            transform: translate3d(0, calc(var(----bar--spacing) * -1 + var(----bar--height) * -1), 0) rotate(90deg);
        }
    }
}