/* Adapted from react-number-scroll (MIT License). */
.number-scroll-view {
  height: auto;
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: baseline;
  overflow: hidden;
  position: relative;
  font-variant-numeric: tabular-nums;
}

.number-scroll-char {
  display: inline-flex;
  align-items: center;
}

.number-placeholder {
  visibility: hidden;
}

.number-scroll-column-container {
  position: relative;
  display: inline-block;
}

.number-scroll-column {
  position: absolute;
  height: 1000%;
  bottom: 0;
  transition: transform var(--duration, 500ms)
    cubic-bezier(0.37, 0.37, 0.11, 1.25);
  will-change: transform;
}

.number-scroll-digit {
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.number-scroll-digit span {
  line-height: 1;
}

.number-scroll-column.increase {
  color: var(--increment, #34d399);
  animation: pulseGreen calc(var(--duration, 500ms) + 100ms)
    cubic-bezier(0.4, 0, 0.6, 1) 1;
}

.number-scroll-column.decrease {
  color: var(--decrement, var(--decerement, #f87171));
  animation: pulseRed calc(var(--duration, 500ms) + 100ms)
    cubic-bezier(0.4, 0, 0.6, 1) 1;
}

@keyframes pulseGreen {
  0%,
  100% {
    color: inherit;
  }

  50% {
    color: var(--increment, #34d399);
  }
}

@keyframes pulseRed {
  0%,
  100% {
    color: inherit;
  }

  50% {
    color: var(--decrement, var(--decerement, #f87171));
  }
}