$button-size : 1.4rem;
$transition: .5s; // increase this to see the transformations in slow-motion
$color: white;

@mixin line {
  display: inline-block;
  width: $button-size;
  height: 2px;
  background: $color;
  transition: $transition;
}

.example-app__menu-toggle {
  height: $button-size;
  margin: 0 10px;
  display: inline-block;
  transition: .3s;
  cursor: pointer;
  user-select: none;
  background: none;
  border: none;
  outline: none;
  opacity: 0.8;

  &:hover {
    opacity: 1;
  }
}

.lines {
  @include line;
  position: relative;

  &:before, &:after {
    @include line;
    position: absolute;
    left: 0;
    content: '';
  }
  &:before { top: 6px; }
  &:after { top: -6px; }
}


.example-app__menu-toggle.close .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);
  }
}