/* ==========================================================================
   ANIMATED 3 LINE NAVICONS
   https://github.com/SaraSoueidan/navicon-transformicons
   ========================================================================== */

/* Common to all three-liners */

@mixin line {
  display: inline-block;
  width: $button-size;
  height: $button-size/7;
  background: $white;
  transition: $transition;
}

.nav-lines {
  @include line;
  position: relative;
  &:before, &:after {
   @include line;
    position: absolute;
    left:0;
    content: '';
      transform-origin: $button-size/14 center;
  }
  &:before {
    top: $button-size/4;
  }
  &:after {
    top: -$button-size/4;
  }
}

.lines-button:hover {
  .nav-lines {
    &:before {
      top: $button-size/3.5;
    }
    &:after {
      top: -$button-size/3.5;
    }
  }
}

/* For both the arrow up and left icons */

.lines-button.arrow.close {
  .nav-lines {
    &:before,
    &:after {
      top: 0;
      width: $button-size/1.8;
    }
    &:before {
      transform: rotate3d(0,0,1,40deg);
    }
    &:after {
      transform: rotate3d(0,0,1,-40deg);
    }
  }
}

/* Arrow up only: just rotate by 90degrees */

.lines-button.arrow-up.close {
  transform: scale3d(.8,.8,.8) rotate3d(0, 0, 1,90deg);
}

/* Three-lines to minus only */

.lines-button.minus.close {
  .nav-lines {
    &:before, &:after {
      transform: none;
      top: 0;
      width: $button-size;
    }
  }
}

/* Three-lines to x */

.lines-button.x.close{
  .nav-lines {
    background: transparent;
    &:before, &:after{
      transform-origin: 50% 50%;
      top: 0;
      width: $button-size;
    }
    &:before{
      transform: rotate3d(0,0,1,45deg);
    }
    &:after{
      transform: rotate3d(0,0,1,-45deg);
    }
  }
}

/* Three-lines to x method 2 */

.lines-button.x2 {
  .nav-lines {
    transition: background .3s .5s ease;
    &:before, &:after {
      /* set transform origin */
      transform-origin: 50% 50%;
      transition: top .3s .6s ease, -webkit-transform .3s ease;
      transition: top .3s .6s ease, transform .3s ease;
    }
  }
}
.lines-button.x2.close {
  .nav-lines {
    transition: background .3s 0s ease;
    background: transparent;
    &:before, &:after {
      transition: top .3s ease, -webkit-transform .3s .5s ease; /* delay the formation of the x till the minus is formed */
      transition: top .3s ease, transform .3s .5s ease; /* delay the formation of the x till the minus is formed */
      top: 0;
      width: $button-size;
    }
    &:before {
      transform: rotate3d(0,0,1,45deg);
    }
    &:after {
      transform: rotate3d(0,0,1,-45deg);
    }
  }
}