.nav-toggler {
  position: relative;

  .toggle-icon {
    width: 1em;
    position: relative;
    display: inline-block;
    vertical-align: text-bottom;
    transform: translateX(-50%) translateY(-.5em);

  }



  .bar {
    height: 0;
    border-width: 1px;
    border-style: solid;
    width: 2em;
    display: block;
    position: absolute;
    transition: all $nav-animation-duration $nav-animation-easing;
    &:nth-child(1) {
      top: -.4em;
    }
    &:nth-child(2) {
      top: 0;
    }

    &:nth-child(3) {
      top: .4em;

      //&:before {
      //  opacity: 0;
      //  content: '';
      //  border-width: 2px;
      //  display: block;
      //  position: relative;
      //  top: 0.25px;
      //}
    }

  }

  &:hover {
    //transition-delay: 100ms;
    //transform: scale(1.1);

    .bar {
      &:nth-child(1) {
        width: 1.9em;
      }
      &:nth-child(2) {
        width: 1.2em;
      }
      &:nth-child(3) {
        width: 1.5em;
      }


    }
  }

  &:focus {
    outline: 0px;
  }


  //&:hover .bar {
  //  &:nth-child(1) {
  //    transform: rotate(-33deg);
  //  }
  //
  //  &:nth-child(2) {
  //    transform: rotate(90deg);
  //  }
  //
  //  &:nth-child(3) {
  //    transform: rotate(33deg);
  //
  //    &:before {
  //      opacity: 1;
  //      transition: opacity 600ms $nav-animation-easing;
  //    }
  //  }
  //}

  //&:active {
  //  &:hover div:nth-child(3):before {
  //    opacity: 0;
  //    transition: all 200ms;
  //  }
  //
  //  .bar {
  //    &:nth-child(3):before {
  //      opacity: 0;
  //      transition: all 200ms;
  //    }
  //
  //    &:nth-child(2) {
  //      opacity: 0;
  //      transition: all 200ms;
  //      width: 0px;
  //    }
  //
  //    border: 1.5px solid #fff;
  //    height: 0px;
  //    border-radius: 0%;
  //    margin-left: -1px;
  //    margin-top: 6px;
  //    animation: division 300ms linear 1;
  //    width: 25px;
  //    top: 0px;
  //
  //    &:nth-child(3) {
  //      transform: rotate(45deg);
  //    }
  //
  //    &:nth-child(1) {
  //      transform: rotate(-45deg);
  //    }
  //  }
  //}
}

//@keyframes atom {
//  0% {
//    transform: rotate(180deg);
//  }
//}


@keyframes division {
  0% {
    transform: rotate(180deg);
  }
}
