/* Animation master - Shake */

/*
  Usage:
    <div class="t-shake">...</div>

  Put `.t-shake` on any icon, badge, card, or control
  that should rock side to side with a repeated shake motion.
*/

:root {
  --shake-dur: 1000ms;
  --shake-rot-a: 12deg;
  --shake-rot-b: -13deg;
}

.t-shake {
  animation: t-shake var(--shake-dur) infinite;
  transform-origin: center bottom;
  will-change: transform;
}

@keyframes t-shake {
  0% {
    transform: rotate(var(--shake-rot-a));
    animation-timing-function: cubic-bezier(0.261, -0.019, 0.58, 1);
  }

  50% {
    transform: rotate(var(--shake-rot-b));
    animation-timing-function: ease-in-out;
  }

  100% {
    transform: rotate(var(--shake-rot-a));
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-shake {
    animation: none !important;
  }
}