.container
  i.fas.fa-plus.plus-icon
  .btn(title='File')
    i.fas.fa-file
  .btn(title='Folder')
    i.fas.fa-folder
  .btn(title='Mail')
    i.fas.fa-envelope
  .btn(title='Message')
    i.fas.fa-comments

$purple: #3700ff

*
  box-sizing: border-box

body
  width: 100vw
  height: 100vh
  overflow: hidden

.container
  position: relative
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
  display: grid
  grid-template-columns: repeat(2, 20px)
  justify-content: center
  align-items: center
  cursor: pointer
  width: 90px
  height: 90px
  transition: all .3s ease-out

  &:hover
    transform: translate(-50%, -50%) rotate(45deg)
    transform-origin: center

    .btn  
      > i
        opacity: 1
    
      &:first-of-type
        border-radius: 50%
        transform: scale(2) translate(-7px, -7px)
    
        &:hover
          background: darken($purple, 20%)

      &:nth-of-type(2)
        border-radius: 50%
        transform: scale(2) translate(7px, -7px)
      
        &:hover
          background: darken($purple, 20%)

      &:nth-of-type(3)
        border-radius: 50%
        transform: scale(2) translate(-7px, 7px)
      
        &:hover
          background: darken($purple, 20%)

      &:last-of-type
        border-radius: 50%
        transform: scale(2) translate(7px, 7px)
      
        &:hover
          background: darken($purple, 20%)
  
    .plus-icon
      opacity: 0
      transform: translate(-50%, -50%) scale(0)

.btn
  height: 20px
  background: $purple
  transition: all .2s cubic-bezier(.785,.135,.15,.5)
  display: flex
  align-items: center
  justify-content: center

  > i
    color: rgba(255,255,255,.8)
    font-size: 1rem
    transition: all .2s ease
    opacity: 0
    transform: rotate(-45deg) scale(.5)

  &:first-of-type
    border-radius: 2px 0 0 0
    margin-bottom: -26px
  
  &:nth-of-type(2)
    border-radius: 0 2px 0 0
    margin-left: -1px
    margin-bottom: -26px

  &:nth-of-type(3)
    border-radius: 0 0 0 2px
    margin-top: -26px
  
  &:last-of-type
    border-radius: 0 0 2px 0
    margin-left: -1px
    margin-top: -26px

.plus-icon
  position: absolute
  top: 50%
  left: 50%
  color: #fff
  transform: translate(-50%, -50%)
  transition: all .2s ease