.vertical-roulette {
  white-space: nowrap;
  animation-name: spinVerticalRoulette;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.390, -0.375, 0.000, 1.280);
}

.replay-roulette {
  animation-name: spinVerticalRoulette;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.465, 0.005, 0.020, 1.245);
}

/* Each icon is 36x36 pixels. There are 20 icons in the roulette */
@keyframes spinVerticalRoulette {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(calc(-40px * 19));
  }
}

@keyframes replayRoulette {
  0% {
    transform: translateY(0.5rem);
  }

  100% {
    transform: translateY(calc(-40px * 19));
  }
}

.wind-up-transition {
  transition-property: transform;
  transition-timing-function: ease-out;
  transition-duration: 400ms;
}