#app(data-index="0")
  #toggle
    #main-shadow
    button(data-position="0")
    button(data-position="1")
    button(data-position="2")
    button(data-position="3")
    button(data-position="4")
    #main

body
  height: 100vh
  
#app
  position: relative
  width: 100%
  height: 100%
  background-color: rgba(0,0,0,0.9)
  display: grid
  place-items: center center
  transition: all 500ms ease-in-out

  @for $i from 0 through 4
    &[data-index="#{$i}"]
      $o: 1 - $i / 4
      background-color: transparentize(#000000, $o)
  
      #toggle
        #main, #main-shadow
          transform: translateY(-50%) translateX(#{$i * 40px})
      
      button[data-position="#{$i}"]
        background-color: #ffffff

  &.active
    #main, #main-shadow
      &::after
        animation: bounce 500ms both cubic-bezier(.56,.56,.52,1.17)
      
        @keyframes bounce
          0%
            transform: scale(1)
          50%
            transform: scale(0.85)
          100%
            transform: scale(1)
      
#toggle
  position: relative
  padding: 14px 20px
  border: white
  background-color: #000000
  border-radius: 50px
  display: flex

#main
  position: absolute
  top: 50%
  left: 20px
  transform: translateY(-50%) 
  width: 20px
  height: 20px
  padding: 0
  border-radius: 50%
  border: 0
  display: block
  z-index: 2
  
  &::after
    width: 40px
    height: 40px
    background-color: #ffffff

#main-shadow
  position: absolute
  top: 50%
  left: 20px
  transform: translateY(-50%)
  width: 20px
  height: 20px
  padding: 0
  border-radius: 50%
  border: 0
  display: block
  z-index: 0
  
  &::after
    width: 60px
    height: 60px
    background-color: #000000
  
#main, #main-shadow
  transition: all 500ms cubic-bezier(.56,.56,.52,1.17)
  display: flex
  justify-content: center
  align-items: center
  
  &::after
    content: ""
    flex-shrink: 0
    display: block
    position: relative
    border-radius: 50%
    
  
button
  position: relative
  width: 20px
  height: 20px
  padding: 0
  border-radius: 50%
  border: 0
  display: block
  z-index: 1
  transition: all 250ms 50ms ease-in-out
  background-color: #ffffff
  box-shadow: 0 0 1px 1px #444444
  
  @for $i from 0 through 4
    &[data-position="#{4 - $i}"]
      $o: 1 - $i / 4
      background-color: transparentize(#ffffff, $o)

  & + button
    margin-left: 20px
    
  &:hover
    transform: scale(0.85)
  

[...(window.app.querySelectorAll('button'))].forEach((button, index) => {
  button.addEventListener('click', () => {
    if (window.app.classList.contains('active')) {
      window.app.classList.remove('active')
    }
    
    setTimeout(() => {
      window.app.dataset.index = index
      window.app.classList.add('active')
    }, 100)
  })
})