.vote_button {
  --scale: 0;
  transition: background-color 1s;
  background-color: hsl(25, 100%, max(calc((95 - var(--scale) / 4) * 1%), 63%));
}

.vote_counter {
  position: absolute;
  left: 50%;
  bottom: 110%;
  color: hsl(25, 100%, 50%);
  font-weight: bold;
  font-size: 21px;
  will-change: transform;
  opacity: min(calc(var(--scale) * 1), 1);
  transform: translate(-50%, max(calc(-1px * var(--scale) / 10), -30px))
    scale(calc(1 + min(var(--scale) / 150, 2)));
  text-shadow: 0 0 4px hsl(25, 100%, 50%);
}

.spark {
  position: absolute;
  bottom: 46%;
  left: calc(var(--offsetX) * 1%);
  transform: scale(var(--scale));
  opacity: 0;
  will-change: transform;

  animation-name: fly-spark-1;
  animation-duration: calc(var(--animationSpeed) * 1s);
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  filter: drop-shadow(0 0 4px);
}

@keyframes fly_spark_1 {
  0% {
    transform: translate(0, 0) scale(var(--scale));
    opacity: 1;
  }

  33% {
    transform: translate(12px, -70px) scale(var(--scale));
  }

  66% {
    transform: translate(0, -140px) scale(var(--scale));
    opacity: 0.6;
  }

  100% {
    transform: translate(6px, -200px) scale(var(--scale));
    opacity: 0;
  }
}

@keyframes fly_spark_2 {
  0% {
    transform: translate(0, 0) scale(var(--scale));
    opacity: 1;
  }

  50% {
    transform: translate(-10px, -80px) scale(var(--scale));
  }

  80% {
    transform: translate(-4px, -140px) scale(var(--scale));
    opacity: 0.6;
  }

  100% {
    transform: translate(-6px, -160px) scale(var(--scale));
    opacity: 0;
  }
}