@import "variables";

/**
 * Animations based on https://github.com/daneden/animate.css
 */

@keyframes shake {
  from,
  to {
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translate3d(1px, 0, 0);
  }
}

// ----- Flashing Colors -----

@keyframes flashRed {
  from,
  50%,
  to {
		fill: var(--red-darkest);
		stroke: var(--red-darker);
  }

  25%,
  75% {
		fill: var(--red-lighter);
		stroke: var(--red-lightest);
  }
}

@keyframes flashBlue {
  from,
  50%,
  to {
		fill: var(--teal-darkest);
		stroke: var(--teal-darker);
  }

  25%,
  75% {
		fill: var(--teal-lighter);
		stroke: var(--teal-lightest);
  }
}