$duration: 300ms;
$loop-duration: 1000ms;

.bounce-animation {
  &--active#{&}--size-small {
    animation: bounce-animation-small $duration;
  }

  &--active#{&}--size-small#{&}--loop {
    animation: bounce-animation-small-loop $loop-duration infinite;
  }

  &--active#{&}--size-medium {
    animation: bounce-animation-medium $duration;
  }

  &--active#{&}--size-medium#{&}--loop {
    animation: bounce-animation-medium-loop $loop-duration infinite;
  }

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

@keyframes bounce-animation-small {
  0% {
    transform: scale(1);
  }

  42% {
    transform: scale(1.07);
  }

  84% {
    transform: scale(0.98);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes bounce-animation-medium {
  0% {
    transform: scale(1);
  }

  42% {
    transform: scale(1.03);
  }

  84% {
    transform: scale(0.98);
  }

  100% {
    transform: scale(1);
  }
}

/* values were calculated as explained here: https://css-tricks.com/css-keyframe-animation-delay-iterations */
@keyframes bounce-animation-small-loop {
  0% {
    transform: scale(1);
  }

  12.6% {
    transform: scale(1.07);
  }

  25.2% {
    transform: scale(0.98);
  }

  30%,
  100% {
    transform: scale(1);
  }
}

@keyframes bounce-animation-medium-loop {
  0% {
    transform: scale(1);
  }

  12.6% {
    transform: scale(1.03);
  }

  25.2% {
    transform: scale(0.98);
  }

  30%,
  100% {
    transform: scale(1);
  }
}