.container
  .layer.layer--bread
  .layer.layer--lettuce
  .layer.layer--tomato
  .layer.layer--cheese
  .layer.layer--patty
  .layer.layer--onion
  .layer.layer--bread

$layerHeight: 20px;
$layerSpace: 5px;
$layerSize: 200px;

@mixin layer($color, $heightScale: 1) {
  $height: $heightScale * $layerHeight;
  $darkColor: darken($color, 10%);
  
  margin-bottom: -$layerSize + $height + $layerSpace;
  background: $color;
    
  &:before {
    width: $height;
    background: $darkColor;
  }
  
  &:after {
    height: $height;
    background: $darkColor;
  }
}

body {
  background: #5ABCDC;
}

.container {
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  width: $layerSize;
}

.layer {
  position: relative;
  width: $layerSize;
  height: $layerSize;
  margin-bottom: -$layerSize + $layerHeight + $layerSpace;
  background: #555;
  transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
  transform-style: preserve-3d;
  transition: margin 0.4s;
  
  &:hover {
    margin-bottom: -$layerSize + 2 * ($layerHeight + $layerSpace);
    margin-top: 2 * ($layerHeight + $layerSpace);
  }
  
  @for $i from 1 through 10 {
    &:nth-child(#{$i}) {
      $delay: 0.7 - $i * 0.1s;
      animation: hideDelay $delay, drop 1s $delay;
      z-index: 20 -$i;
    }
  }
  
  &:before,
  &:after {
    content: '';
    display: block;
    position: absolute;
    background: rgb(20, 20, 50);
  }
  
  &:before {
    height: 100%;
    width: $layerHeight;
    left: 0;
    top: 0;
    transform: rotateY(90deg);
    transform-origin: 0 50%;
  }
  
  &:after {
    width: 100%;
    height: $layerHeight;
    left: 0;
    bottom: 0;
    transform: rotateX(90deg);
    transform-origin: 0 100%;
  }
  
  &--bread {
    @include layer(#F4DAB6, 1.5);
  }
  
  &--onion {
    @include layer(#C390D6, 0.8);
  }
  
  &--lettuce {
    @include layer(#67BD32, 0.4);
  }
  
  &--patty {
    @include layer(#AC6B1B, 1.2);
  }
  
  &--cheese {
    @include layer(#F3D909, 0.4);
    transform: rotateX(60deg) rotateY(0deg) rotateZ(-20deg);
  }
  
  &--tomato {
    @include layer(#F33A09, 1);
  }
}

@keyframes drop {
  from {
    transform: rotateX(60deg) rotateY(5deg) rotateZ(0deg) translateZ(400px);
    opacity: 0;
  }
  
  50% {
    opacity: 1;
  }
}

@keyframes hideDelay {
  from, to {
    opacity: 0;
  }
}