html, body
  height: 100%
  background: #111

.wrapper
  position: absolute
  //background: crimson
  text-align: center
  color: white
  border: 1rem solid hsla(100,100%,100%,.1)
  width: 2rem
  height: 2rem
  padding: 0rem
  border-radius: 50%
  margin: auto
  top: 0
  bottom: 0
  left: 0
  right: 0
  transition: .3s all 
  
  &:hover
    padding: 2.5rem

.elem
  cursor: pointer
  position: absolute
  background: white
  font: 1rem sans-serif
  font-weight: bold
  color: rgba(0,0,0,.5)
  width: 2rem
  height: 2rem
  line-height: 2rem
  text-align: center
  border-radius: 50%
  transform-origin: 50% 50%
  box-shadow: 0
  transition: all .3s cubic-bezier(0.50, -1, 0.50, 2), background .6s
  transition-delay: 0s
  opacity: 0

  
  .wrapper:hover &
    opacity: 1

$blocks: 7
@for $i from 0 through ($blocks - 1)
  .elem:nth-child(#{$i + 1})
    z-index: #{$blocks - $i}
    transform: rotate(#{360/$blocks*($i+1) - 90}deg) translateX(0) rotate(#{-360/$blocks*($i+1) + 90}deg)
      
  .wrapper:hover .elem:nth-child(#{$i + 1})
    background: hsl(360/$blocks*$i, 80%, 60%)
    transform: rotate(#{360/$blocks*$i - 90}deg) translateX(200%) rotate(#{-360/$blocks*$i + 90}deg)
    transition-delay: #{$i * 0.04}s, #{$i * 0.08}s