// //////////// //
//  Animation   //
// //////////// //
@keyframes loading
  0%
    width: 60px
    height: 60px
    transform: scale(0.2)
    border-radius: 50px
    opacity: 0.9
    // background: $brand-warning
  100%
    width: 60px
    height: 60px
    transform: scale(1)
    border-radius: 50px
    opacity: 0.1

@keyframes container-rotate
  to
    transform: rotate(360deg)

@keyframes fill-unfill-rotate
  12.5%
    transform: rotate(135deg)
  25%
    transform: rotate(270deg)
  37.5%
    transform: rotate(405deg)
  50%
    transform: rotate(540deg)
  62.5%
    transform: rotate(675deg)
  75%
    transform: rotate(810deg)
  87.5%
    transform: rotate(945deg)
  to
    transform: rotate(1080deg)

@keyframes left-spin
  from
    transform: rotate(130deg)
  50%
    transform: rotate(-5deg)
  to
    transform: rotate(130deg)

@keyframes right-spin
  from
    transform: rotate(-130deg)
  50%
    transform: rotate(5deg)
  to
    transform: rotate(-130deg)

@keyframes typing
  from
    opacity: 0
  50%
    opacity: 1
  to
    opacity: 0

@keyframes show-up
  0%
    transform: translateY(100%)
    opacity: 0
  100%
    transform: translateY(0)
    opacity: 1