.row
  i.far.fa-smile
  i.far.fa-meh
.row
  i.far.fa-meh-blank
  i.far.fa-sad-tear

@import url('https://use.fontawesome.com/releases/v5.7.2/css/all.css')

$red: #D0782A
$yellow: #FFDD40
$green: #96B38B
$blue: #809BBD
$black: #1D1E22

html, body
  margin: 0
  padding: 0
  width: 100%
  height: 100%
  display: flex
  justify-content: center
  align-items: center
  flex-direction: column
  
body
  background-color: rgba(black,0.1)
  
i
  font-size: 80px
  color: $black
  margin: 15px
  position: relative // :after seperate
  cursor: pointer
  &:after
    content: ''
    position: absolute
    top: 50%
    left: 50%
    transform: translate(-50%,-50%)
    width: 0
    height: 0
    // background-color: $green
    border-radius: 50%
    z-index: -1
    transition: 0.3s
  &:hover:after
    width: 85%
    height: 85%
  
i.far.fa-smile
  &:after
    background-color: $green
  
i.far.fa-meh
  &:after
    background-color: $blue
  
i.far.fa-meh-blank
  &:after
    background-color: $yellow
  
i.far.fa-sad-tear
  &:after
    background-color: $red
  
  
  
  
  
  
  
  
  
// i.far.fa-smile
//   border-radius: 50%
//   background-color: $green
  
// i.far.fa-meh
//   border-radius: 50%
//   background-color: $blue
  
// i.far.fa-meh-blank
//   border-radius: 50%
//   background-color: $yellow
  
// i.far.fa-sad-tear
//   border-radius: 50%
//   background-color: $red