@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);
}