landscape-template/src/Components/VoteButton/styles.module.scss

.vote_button {
  --scale: 0;
  --increments: 0;
  --offset: 0;
  --bg-color: hsl(0deg 86% max(calc((93 - var(--increments) / 3) * 1%), 68%));
  /* transition: background-color 1s; */
  /* background-color: hsl(25, 100%, max(calc((95 - var(--scale) / 4) * 1%), 63%)); */
}

.btn_content.clicked_1 {
  animation: shake_1 0.14s 1 ease-in-out;
}
/* Same animation, two classes so that the animation restarts between clicks */
.btn_content.clicked_2 {
  animation: shake_2 0.14s 1 ease-in-out;
}

@keyframes shake_1 {
  0% {
    transform: rotate(0deg);
  }

  33% {
    transform: rotate(calc(clamp(5, var(--increments) / 3, 20) * 1deg));
  }

  66% {
    transform: rotate(calc(-1 * clamp(5, var(--increments) / 2, 20) * 1deg));
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes shake_2 {
  0% {
    transform: rotate(0deg);
  }

  33% {
    transform: rotate(calc(clamp(10, var(--increments) / 2, 30) * 1deg));
  }

  66% {
    transform: rotate(calc(-1 * clamp(10, var(--increments) / 2, 30) * 1deg));
  }

  100% {
    transform: rotate(0deg);
  }
}

.vote_counter {
  position: absolute;
  left: 50%;
  bottom: 100%;
  color: #ff2727;
  font-weight: bold;
  font-size: 21px;
  will-change: transform;
  transform: translate(-50%, 0) scale(0.5);
  animation: fly_value 0.5s 1 ease-out;
}

.color_overlay {
  position: absolute;
  border-radius: inherit;
  inset: 0;
  overflow: hidden;
  transition: all 0.1s;
}

.color_overlay > div {
  content: "";
  background: var(--bg-color);
  width: 100%;
  height: 100%;
  position: absolute;
}

.color_overlay__background > div {
  top: 0;
  right: 0;
}

.color_overlay__leftRight > div {
  top: 0;
  right: 100%;
  transform: translateX(var(--offset));
}

.color_overlay__upDown > div {
  top: 100%;
  right: 0;
  transform: translateY(calc(-1 * var(--offset)));
}

.color_overlay__radial > div {
  top: 0;
  right: 0;
  background: radial-gradient(
    circle at center,
    var(--bg-color) var(--offset),
    transparent calc(var(--offset) * 1.1)
  );
}

.loading {
  pointer-events: none;
  position: absolute;
  border-radius: inherit;

  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f9f6f6;
  font-size: 14px;
  color: #dc2626;
  z-index: 10;
}

.success {
  pointer-events: none;
  position: absolute;
  border-radius: inherit;

  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f9f6f6;
  font-weight: 600;
  font-size: 14px;
  color: #dc2626;
  outline: 1px solid #ef4444;
  z-index: 11;
}

@keyframes fly_value {
  0% {
    transform: translate(-50%, 0) scale(0.5);
    opacity: 1;
  }

  66% {
    transform: translate(-50%, -26px) scale(1.2);
    opacity: 0.6;
  }

  100% {
    transform: translate(-50%, -38px) scale(0.8);
    opacity: 0;
  }
}

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

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

@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;
  }
}