mixin icon(key)
  -
    const PATH_MAP = {
      Twitter: "M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"
    }
  svg.button__icon(role='img' aria-hidden="true" xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24')
    title= `${key} Icon`
    path(d=PATH_MAP[key])

.scene
  button.button
    span.button__shadow
      +icon('Twitter')
    span.button__content
      span.button__text Twitter
      +icon('Twitter')
      span.button__shine

*
  box-sizing border-box
  transform-style preserve-3d

:root
  --blur 8px
  --shine-blur calc(var(--blur) * 4)
  --size 25vmin
  --transition 0.1s
  --depth max(25px, 3vmin)
  --icon-size 75%
  --radius 24%
  --shine hsla(0, 0%, 100%, 0.85)
  --button-bg hsla(0, 0%, 0%, 0.025)
  --icon-fill hsl(206, 82%, 63%)
  --shadow-fill hsla(0, 0%, 0%, 0.4)
  --shadow-bg hsla(0, 0%, 0%, 0.1)
  --shadow-icon hsla(0, 0%, 0%, 0.35)
  --bg hsl(206, 82%, 95%)
  
body
  min-height 100vh
  display grid
  place-items center
  transform-style preserve-3d
  touch-action none
  overflow hidden
  
  &:before
    content ''
    position absolute
    height 300vh
    width 300vw
    z-index -1
    top 50%
    left 50%
    transform translate3d(-50%, -50%, calc(var(--size) * -1))
    background var(--bg)
 
.scene
  height var(--size)
  position relative
  width var(--size)
  transform rotateX(-40deg) rotateY(18deg) rotateX(90deg)    
    
.button
  appearance none
  background none
  border 0
  cursor pointer
  height 100%
  outline transparent
  position absolute
  width 100%
  
  &__content
  &__shadow
    height 100%
    width 100%
    position absolute
    display grid
    place-items center
    border-radius var(--radius)

  &__content
    --fill var(--icon-fill)
    transform translate3d(0, 0, var(--depth))
    transition var(--transition)
    
  &__shadow
    --fill var(--shadow-fill)
    background var(--shadow-bg)
    filter blur(var(--blur))
    transition filter var(--transition)
    
  &__text
    position absolute
    width 1px
    height 1px
    padding 0
    margin -1px
    overflow hidden
    clip rect(0, 0, 0, 0)
    white-space nowrap
    border-width 0
  
  &__icon
    height var(--icon-size)
    fill var(--fill)
    width var(--icon-size)
    
  &:active
    --depth 0
    --blur 0