@import "../globalCssVariables";


@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

// $background: #3d566e;
$color: #ecf0f1;

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

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

// body {
//   background: $background;
//   color: $color;
//   font-family: 'Montserrat', sans-serif;
//   -webkit-font-smoothing: antialiased;
//   text-align:center;
// }

#hamburger-icon {
  width:$width-line;
  height:$height-icon;
  position:relative;
  display:block;
//   margin: ($height-icon * 2) auto $height-icon auto;
  
  .line {
    display:block;
    background:$color;
    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%;
    }
  }
  &:hover, &:focus {
     .line-1 {
        transform: translateY($height-line / 2 * -1);
        -webkit-transform: translateY($height-line / 2 * -1);
        -moz-transform: translateY($height-line / 2 * -1);
     }
    .line-3 {
        transform: translateY($height-line / 2);
        -webkit-transform: translateY($height-line / 2);
        -moz-transform: translateY($height-line / 2);
    }  
  }
  &.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);
    }
  }
}

// h1 {
//   text-transform:uppercase;
// }
// a {
//   text-decoration:none;
//   color:#95a5a6;
//   margin: 0.5em 1.5em;
//   display:inline-block;
//   &:hover, &:focus {
//     color:$color;
//   }
// }