.loadster
  .loadster__body
    .body__gum
  .loadster__mask
  .loadster__head
    .head__face
    .head__ear
    .head__eye
    .head__horn
      .horn__circle
    .head__smile
    .head__hand
  .loadster__bottom
    .bottom__foot
  

$size: 300px
$border-size: 4px
$color-main: #EEDAD1
$color-border: #373D46
$color-body: #89b793
$color-light: #FFFFCC
$color-add: #99CCA4

body
  background-color: $color-main
  font-size: 16px
  
.loadster
  position: relative
  margin: 10em auto
  width: $size + $border-size*2
  height: $size + $border-size*2
  
  &__body
    position: absolute
    width: $size
    height: $size
    border: $border-size solid $color-border
    border-radius: 50%
    background-color: $color-body
    
    &::before
      content: ''
      position: absolute
      width: $size/1.5
      height: $size/1.5
      top: $size/2 - $size/3 - $border-size
      left: $size/2 - $size/3 - $border-size
      border: $border-size solid $color-border
      border-radius: 50%
      background-color: $color-main
    
    &::after
      content: ''
      position: absolute
      top: 3*$size/26 - $border-size*6
      left: 3*$size/26 - $border-size*6
      width: $size/1.3
      height: $size/1.3
      border: $border-size*6 solid $color-add
      border-radius: 50%
    
  &__mask
    position: absolute
    width: 50%
    height: 50%
    background-color: $color-main
    transform-origin: right bottom
    
    &::before
      content: ''
      position: absolute
      left: 100%
      width: 100%
      height: 100%
      background-color: $color-main
      transform-origin: left bottom
 
    &::after
      content: ''
      position: absolute
      top: 100%
      width: 100%
      height: 100%
      background-color: $color-main
      transform-origin: right top
    
  &__head
    position: absolute
    top: 0
    right: 0
    width: 50%
    height: 50%
    background-color: $color-main
    transform-origin: left bottom
    
  &__bottom
    position: absolute
    left: 0
    bottom: 0
    width: 50%
    height: 50%
    background-color: $color-main
    transform-origin: right top
    
.head__face
  position: absolute
  bottom: 0
  right: 0
  width: $size/6 - $border-size
  height: $size/6
  background-color: $color-body
  border: $border-size solid $color-border
  border-bottom: 0
  border-radius: 50% 50% 0 0
 
.head__ear
  position: absolute
  top: $size/3 - $size/20
  right: ($size/6 - $border-size)/3 - $size/15
  width: $size/20
  height: $size/15
  background-color: $color-body
  border: $border-size solid $color-border
  border-radius: 50% 0
  border-top: 0
  border-right: 0
  
  &::before
    content: ''
    position: absolute
    top: 0
    right: ($size/6 - $border-size)/1.9 + $size/15
    width: $size/20
    height: $size/15
    background-color: $color-body
    border: $border-size solid $color-border
    border-radius: 0 50%
    border-top: 0
    border-left: 0
  
.head__horn
  position: absolute
  top: $size/3.7
  right: ($size/6 - $border-size)/2 - $border-size*1.5
  width: 0
  height: $size/22
  border: $border-size solid $color-border
  border-left: 0
  
  &::before
    content: ''
    position: absolute
    top: -$border-size
    right: ($size/6 - $border-size)/4
    width: 0
    height: $size/22
    border: $border-size solid $color-border
    border-right: 0
  
.horn__circle
  position: absolute
  top: -$size/22
  right: -$size/35
  width: $size/70
  height: $size/70
  background-color: $color-body
  border: $border-size solid $color-border
  border-radius: 50%
  
  &::before
    content: ''
    position: absolute
    top: -$border-size
    right: $size/35 + $border-size/1.5
    width: $size/70
    height: $size/70
    background-color: $color-body
    border: $border-size solid $color-border
    border-radius: 50%
  
.head__eye
  position: absolute
  top: $size/2.8
  right: ($size/6 - $border-size)/2 - $border-size*3
  width: $size/70
  height: $size/70
  background-color: $color-light
  border: $border-size solid $color-border
  border-radius: 50%
  
  &::before
    content: ''
    position: absolute
    top: -$border-size
    right: -$border-size + $size/15
    width: $size/70
    height: $size/70
    background-color: $color-light
    border: $border-size solid $color-border
    border-radius: 50%
  
.head__smile
  content: ''
  position: absolute
  top: $size/2.5
  right: ($size/6 - $border-size)/2 - $border-size*6
  width: $size/6
  height: $size/50
  border: $border-size solid $color-border
  border-top: 0
  border-radius: 50%
  
.head__hand
  position: absolute
  width: $size/5
  height: $size/6
  top: $size/2.2
  right: -$border-size*2
  border: $border-size solid
  border-color: transparent $color-border transparent transparent
  border-radius: 0 0 50% 0
  transform: rotate(10deg)
  
  &::before
    content: ''
    position: absolute
    width: $size/5
    height: $size/6
    top: 0
    right: ($size/6 - $border-size)
    border: $border-size solid
    border-color: transparent $color-border transparent transparent
    border-radius: 0 0 50% 0
  
.bottom__foot
  position: absolute
  bottom: 0
  right: 0
  width: $size/8
  height: $size/25
  background-color: $color-body
  border: $border-size solid $color-border
  border-right: 0
  border-radius: 100% 0 0 0
  
  &::before
    content: ''
    position: absolute
    bottom: -2*$border-size + $size/6 - $size/25
    right: 0
    width: $size/8
    height: $size/25
    background-color: $color-body
    border: $border-size solid $color-border
    border-right: 0
    border-radius: 0 0 0 100%
  
  &::after
    content: ''
    position: absolute
    bottom: $size/25
    right: 0
    width: 0
    height: $size/6 - $size/25*2 - $border-size*4
    border: $border-size solid $color-border
    border-left: 0
  
.loadster__mask
  transform: rotate(40deg)
  animation: mask-circle 2s 1s infinite
  
  &::before
    animation: mask-circle-right 2s 1s infinite
  
  &::after
    animation: mask-circle-left 2s 1s infinite
  
.loadster__head
  transform: rotate(40deg)
  animation: head-circle 2s 1s infinite
  animation-timing-function: cubic-bezier(.2,0,.1,1)

.loadster__bottom
  animation: bottom-circle 2s 1s infinite
  animation-timing-function: cubic-bezier(.2,0,.42,1)
    
@keyframes mask-circle
  0%
    transform: rotate(0deg)
  100%
    transform: rotate(-720deg)
  
@keyframes mask-circle-right
  0%
    transform: rotate(0deg)
  50%
    transform: rotate(-90deg)
  100%
    transform: rotate(0deg)
  
@keyframes mask-circle-left
  0%
    transform: rotate(0deg)
  50%
    transform: rotate(90deg)
  100%
    transform: rotate(0deg)
  
@keyframes head-circle
  0%
    transform: rotate(0deg)
  100%
    transform: rotate(-720deg)
  
@keyframes bottom-circle
  0%
    transform: rotate(-10deg)
  100%
    transform: rotate(-730deg)