.dice-roll {
  animation: dice-roll 0.6s ease-in-out;
}

@keyframes dice-roll {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  15% {
    transform: translate(-4px, 2px) rotate(60deg);
  }
  30% {
    transform: translate(4px, -3px) rotate(130deg);
  }
  45% {
    transform: translate(-3px, -2px) rotate(210deg);
  }
  60% {
    transform: translate(3px, 3px) rotate(270deg);
  }
  80% {
    transform: translate(-2px, 1px) rotate(330deg);
  }
  100% {
    transform: translate(0, 0) rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dice-roll {
    animation: none;
  }
}

/* The hold-to-buy button (`ThemeSelector/HoldToBuy`): its fill, empty; held, sweeping full over the hold's length */
.hold-to-buy__fill {
  transform: scaleX(0);
  transition: transform 0.25s ease-out;
}
.hold-to-buy[data-holding] .hold-to-buy__fill {
  transform: scaleX(1);
  transition: transform var(--hold) linear;
}