ACC SHELL

/* ==========================================================================
   Hamburger
   ========================================================================== */

.eqx-c-hamburger {
    display: inline-block;
    width: 44px;
    height: 34px;
    padding: 10px 11px;
    margin: 0;
    border: none;
    border-radius: 3px;
    background: $color-primary;
    cursor: pointer;
    overflow: visible;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;

    &:focus {
        outline: 0;
    }
}

    .eqx-c-hamburger__box {
        position: relative;
        display: inline-block;
        width: 22px;
        height: 14px;
        vertical-align: top;
    }

        .eqx-c-hamburger__inner {
            display: block;
            top: 50%;
            margin-top: -1px;
            transition-duration: 0.1s;
            transition-delay: 0.14s;
            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            transform: rotate(45deg);

            .eqx-c-hamburger.collapsed & {
                transition-delay: 0s;
                transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
                transform: rotate(0deg);
            }

            &,
            &:before,
            &:after {
                position: absolute;
                width: 22px;
                height: 2px;
                background-color: $color-white;
                transition-property: transform;
                transition-duration: 0.15s;
                transition-timing-function: ease;
            }

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

            &:before {
                top: 0;
                opacity: 0;
                transition: top 0.1s ease, opacity 0.1s 0.14s ease;

                .eqx-c-hamburger.collapsed & {
                    opacity: 1;
                    top: -6px;
                    transition: top 0.1s 0.14s ease, opacity 0.1s ease;
                }
            }

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

                .eqx-c-hamburger.collapsed & {
                    bottom: -6px;
                    transition: bottom 0.1s 0.14s ease, transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
                    transform: rotate(0deg);
                }
            }
        }