// *************************************
//
//   Toggle
//   -> Sidebar Navigation Toggle
//
// -------------------------------------
//   Template (Haml)
// -------------------------------------
//
// .toggle
//
// *************************************

.toggle {
  display: block;
  float: left;
  height: 16px;
  padding: 25px 16px 26px;
  width: 40px;

  span:after,
  span:before {
    content: '';
    left: 0;
    position: absolute;
    top: -6px;
  }

  span:after {
    top: 6px;
  }

  span {
    display: block;
    position: relative;
  }

  span,
  span:after,
  span:before {
    backface-visibility: hidden;
    background-color: $c-icon;
    height: 2px;
    transition: all .3s;
    width: 20px;
  }

  .open-menu & {
    span {
      background-color: transparent;
      
      &:before {
        transform: rotate(45deg) translate(3px, 3px);
      }

      &:after {
        transform: rotate(-45deg) translate(5px, -6px);
      }
    }
  }
}