@require '../variables'

@keyframes teeter {
  0%, 100% {
    transform: rotate(0deg) translateZ(0)
  }
  15% {
    transform: rotate($saf-teeter-angle)
  }
  30% {
    transform: rotate($saf-teeter-angle * -1)
  }
  45% {
    transform: rotate($saf-teeter-angle / 2)
  }
  60% {
    transform: rotate($saf-teeter-angle / 2 * -1)
  }
  73% {
    transform: rotate($saf-teeter-angle / 3)
  }
  86% {
    transform: rotate($saf-teeter-angle / 3 * -1)
  }
}

teeter($duration = 1s, $delay = 0s, $fill-mode = none, $count = 1)
  // hack to fix jagged edges
  outline: 1px solid transparent
  animation: teeter $duration $delay $fill-mode $count