@import "../globalCssVariables";

$height-icon: 15px;
$width-line: 30px;
$height-line: 4px;

$transition-time: 0.4s;
$rotation: 45deg;
$translateY: ($height-icon / 2);
$translateX: 0;

#hamburger-icon {
    width: $width-line;
    height: $height-icon;
    position: relative;
    display: block;
    transition: all $transition-time;
    -webkit-transition: all $transition-time;
    -moz-transition: all $transition-time;

    .line {
        display: block;
        background: $alt-accent;
        width: $width-line;
        height: $height-line;
        position: absolute;
        left: 0;
        border-radius: ($height-line / 2);
        transition: all $transition-time;
        -webkit-transition: all $transition-time;
        -moz-transition: all $transition-time;

        &.line-1 {
            top: 0;
        }

        &.line-2 {
            top: 50%;
        }

        &.line-3 {
            top: 100%;
        }
    }
}

.filter-header.active {
    .line-1 {
        transform: translateY($translateY) translateX($translateX) rotate($rotation);
        -webkit-transform: translateY($translateY) translateX($translateX) rotate($rotation);
        -moz-transform: translateY($translateY) translateX($translateX) rotate($rotation);
    }

    .line-2 {
        opacity: 0;
    }

    .line-3 {
        transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
        -webkit-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
        -moz-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
    }
}

.filter-header:hover #hamburger-icon {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
}