/* Nav Icon */
.menu-mobile-toggle {
    cursor: pointer;
    text-align: center;
    //padding: 2px 5px;
    background: transparent;
    //color: inherit;
    box-shadow: none;
    color: currentColor;
    transition: transform .3s, border .3s, background .3s, box-shadow .3s, opacity .3s, color .3s;
    &:hover {
        box-shadow: none;
        background: transparent;
    }
}
.nav-icon--label {
    background: none !important;
    text-transform: uppercase;
    font-size: 0.85em;
}

$nav_icon_sizes: (
    small: (
        width: 19px,
        height: 2px,
        top: -6px,
        bottom: -6px
    ),
    medium: (
        width: 22px,
        height: 2px,
        top: -7px,
        bottom: -7px
    ),
    large: (
        width: 31px,
        height: 3px,
        top: -9px,
        bottom: -9px
    ),
) !default;

$hamburger-layer-border-radius             : 0px !default;
$hamburger-hover-opacity                   : 0.7 !default;
$hamburger-hover-transition-duration       : 0.15s !default;
$hamburger-layer-color                     : currentcolor;
$hamburger-hover-transition-timing-function: linear !default;

// To use CSS filters as the hover effect instead of opacity,
// set $hamburger-hover-use-filter as true and
// change the value of $hamburger-hover-filter accordingly.
$hamburger-hover-use-filter: false !default;
$hamburger-hover-filter    : opacity(50%) !default;

// Hamburger
// ==================================================
.hamburger {
    padding: 0;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: $hamburger-hover-transition-duration;
    transition-timing-function: $hamburger-hover-transition-timing-function;

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

}

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

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

    &,
    &::before,
    &::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;
    }

    &::before,
    &::after {
        content: "";
        display: block;
        background-color: inherit;
    }
}

@mixin nav_icon_size(){
    @each $key, $settings in $nav_icon_sizes {
        .is-size-#{$key} {
            .hamburger {
                .hamburger-box {
                    margin-top: - 2px;
                    width: map-get($settings, width);
                }
                .hamburger-inner {
                    margin-top: map-get($settings, height) / -2;
                    &,
                    &::before,
                    &::after {
                        width: map-get($settings, width);
                        height: map-get($settings, height);
                    }
                    &::before {
                        top:  map-get($settings, top);
                    }

                    &::after {
                        bottom: map-get($settings, bottom);
                    }
                }
            }
        }
    }

    @each $mq-key, $mq-value in $gl-devices-list {
        @media #{$mq-value} {
            @each $key, $settings in $nav_icon_sizes {
                .is-size-#{$mq-key}-#{$key} {
                    .hamburger {
                        .hamburger-box {
                            margin-top: - 2px;
                            width: map-get($settings, width);
                        }
                        .hamburger-inner {
                            margin-top: map-get($settings, height) / -2;
                            &,
                            &::before,
                            &::after {
                                width: map-get($settings, width);
                                height: map-get($settings, height);
                            }
                            &::before {
                                top:  map-get($settings, top);
                            }

                            &::after {
                                bottom: map-get($settings, bottom);
                            }
                        }
                    }
                }
            }
        }
    }

}

@include nav_icon_size();

/*
* Squeeze
*/
.hamburger--squeeze {
    .hamburger-inner {
        transition-duration: 0.075s;
        transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

        &::before {
            transition: top 0.075s 0.12s ease,
            opacity 0.075s ease;
        }

        &::after {
            transition: bottom 0.075s 0.12s ease,
            transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
        }
    }

    &.is-active {
        .hamburger-inner {
            transform: rotate(45deg);
            transition-delay: 0.12s;
            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

            &::before {
                top: 0;
                opacity: 0;
                transition: top 0.075s ease,
                opacity 0.075s 0.12s ease;
            }

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