// Hamburger
// ==================================================
.hamburger {
    padding: $hamburger-padding-y $hamburger-padding-x;
    display: inline-block;
    cursor: pointer;

    // transition-property: opacity;
    // transition-duration: 0.15s;
    // transition-timing-function: linear;

    // Normalize (<button>)
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;

    &:hover {
        opacity: $hamburger-hover-opacity;
    }

    &:hover,
    &:active,
    &:focus {
        outline: none !important;
    }

    &.is-active {
        &:hover {
            opacity: $hamburger-active-hover-opacity;
        }
    }
}

.hamburger-box {
    width: $hamburger-layer-width;
    height: $hamburger-layer-height * 3 + $hamburger-layer-spacing * 2;
    display: inline-block;
    position: relative;
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: $hamburger-layer-height / -2;

    &,
    &:after,
    .hamburger-inner-before,
    .hamburger-inner-after {
        width: $hamburger-layer-width;
        height: $hamburger-layer-height;
        border-radius: $hamburger-layer-border-radius;
        position: absolute;
        // transition-property: transform;
        // transition-duration: 0.15s;
        // transition-timing-function: ease;
    }

    &:after,
    .hamburger-inner-before,
    .hamburger-inner-after {
        content: '';
        display: block;
    }
    &:after {
        background: inherit;
    }

    .hamburger-inner-before {
        top: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
    }

    .hamburger-inner-after {
        bottom: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
    }
}