@import "~sass-math/math";
//vars
$fg: #ff4081;
$bg: #3f51b5;
$pi: pi();

//config
$menu-items: 5;
$open-distance: 115px;
$opening-angle: $pi - .2;

%goo {
  filter: url('#shadowed-goo');
  // debug
  //background:rgba(255,0,0,0.2);
}

%ball {
  background: $fg;
  border-radius: 100%;
  width: 80px;
  height: 80px;
  margin-left: -40px;
  position: absolute;
  top: 20px;
  color: white;
  text-align: center;
  line-height: 80px;
  transform: translate3d(0, 0, 0);
  transition: transform ease-out 200ms;
}

.menu-open {
  display: none;
}

.menu-item {
  @extend %ball;
}

.hamburger {
  $width: 25px;
  $height: 3px;
  width: $width;
  height: $height;
  background: white;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -$width/2;
  margin-top: -$height/2;
  transition: transform 200ms;
}

$hamburger-spacing: 8px;
.hamburger-1 {
  transform: translate3d(0, -$hamburger-spacing, 0);
}

.hamburger-2 {
  transform: translate3d(0, 0, 0);
}

.hamburger-3 {
  transform: translate3d(0, $hamburger-spacing, 0);
}

.menu-open:checked + .menu-open-button {
  .hamburger-1 {
    transform: translate3d(0, 0, 0) rotate(45deg);
  }
  .hamburger-2 {
    transform: translate3d(0, 0, 0) scale(0.1, 1);
  }
  .hamburger-3 {
    transform: translate3d(0, 0, 0) rotate(-45deg);
  }
}

.menu {
  @extend %goo;
  $width: 380px;
  $height: 250px;
  position: absolute;
  left: 50%;
  margin-left: -$width/2;
  padding-top: 20px;
  padding-left: $width/2;
  width: $width;
  height: $height;
  box-sizing: border-box;
  font-size: 20px;
  text-align: left;
}

.menu-item {
  &:hover {
    background: white;
    color: $fg;
  }
  @for $i from 1 through $menu-items {
    &:nth-child(#{$i+2}) {
      transition-duration: 10ms+(60ms*($i));
    }
  }
}

.menu-open-button {
  @extend %ball;
  z-index: 2;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
  transition-duration: 400ms;
  transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  cursor: pointer;
}

.menu-open-button:hover {
  transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}

.menu-open:checked + .menu-open-button {
  transition-timing-function: linear;
  transition-duration: 200ms;
  transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}

.menu-open:checked ~ .menu-item {
  transition-timing-function: cubic-bezier(0.935, 0.000, 0.340, 1.330);
  @for $i from 1 through $menu-items {
    $angle: (($pi - $opening-angle)/2)+(($opening-angle/($menu-items - 1))*($i - 1)+($pi*0.43));

    &:nth-child(#{$i+2}) {
      transition-duration: 80ms+(80ms*$i);
      transform: translate3d(sin($angle)*$open-distance, cos($angle)*$open-distance, 0);
    }
  }
}
