/
/ Idea by vlbrsk
/ From dribbble "Hamburger Transformation"
/ https://dribbble.com/shots/3353380-Hamburger-transformation
/

.burger.on
  .top.bar.dark
    .box
      .top.surface
      .bottom.surface
    .box
      .top.surface
      .bottom.surface
    .box
      .top.surface
      .bottom.surface
    .box
      .top.surface
      .bottom.surface
  .middletop.bar.light
    .box
      .top.surface
      .bottom.surface
    .box
      .top.surface
      .bottom.surface
    .box
      .top.surface
      .bottom.surface
    .box
      .top.surface
      .bottom.surface
  .middle.bar.dark
    .box
      .top.surface
      .bottom.surface
    .box
      .top.surface
      .bottom.surface
    .box
      .top.surface
      .bottom.surface
    .box
      .top.surface
      .bottom.surface
  .middlebottom.bar.light
    .box
      .top.surface
      .bottom.surface
    .box
      .top.surface
      .bottom.surface
    .box
      .top.surface
      .bottom.surface
    .box
      .top.surface
      .bottom.surface
  .bottom.bar.dark
    .box
      .top.surface
      .bottom.surface
    .box
      .top.surface
      .bottom.surface
    .box
      .top.surface
      .bottom.surface
    .box
      .top.surface
      .bottom.surface

$duration : .8s;
$size : 250px;
$colors : black white;

@mixin color {
  @at-root {
    .dark & { background: nth($colors, 1); }
    .light & { background: nth($colors, 2); }
  }
}

* { transform-style: preserve-3d; }
html, body { height: 100%; }
body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: nth($colors, 2);
}

.burger {
  position: relative;
  width: $size;
  height: $size;
  transform: rotateX(90deg);
  transition: transform $duration ease-in-out;
  
  body:hover &,
  .init & { transform: rotateX(0); }
}

.top, .middletop, .middle, .middlebottom, .bottom {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.bar {
  &.top { transform: translateZ($size/3 + $size/10); }
  &.middletop { transform: translateZ($size/6 + $size/20); }
  &.middlebottom { transform: translateZ(-$size/6 - $size/20); }
  &.bottom { transform: translateZ(-$size/3 - $size/10); }
}

.box {
  position: absolute;
  width: $size/5;
  height: $size/1.666;
  bottom: $size/2;
  left: $size/2 - $size/10;
  transform-origin: center bottom;
  
  &:nth-child(1) { transform: rotate(45deg); }
  &:nth-child(2) { transform: rotate(135deg); }
  &:nth-child(3) { transform: rotate(225deg); }
  &:nth-child(4) { transform: rotate(315deg); }
}

.box {  
  .top, .bottom {
    @include color;
    
    &:before, &:after {
      @include color;
      display: block;
      position: absolute;
      content: '';
    }
  }

  .top {
    transform: translateZ($size/10);
  
    &:before, &:after {
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    &:before { transform: rotateY(90deg) translate3d(50%,0,$size/10); }
    &:after { transform: rotateY(90deg) translate3d(50%,0,-$size/10); }
  }

  .bottom {
    transform: translateZ(-$size/10);
  }
}

setTimeout(function() {
  $('html').removeClass('init');
}, 1000);