@layer slider, animation;

@layer animation {
  :root {
    --min: 0;
    --transition: 0.625s;
    --ease: linear(
      0 0%,
      0.5007 7.21%,
      0.7803 12.29%,
      0.8883 14.93%,
      0.9724 17.63%,
      1.0343 20.44%,
      1.0754 23.44%,
      1.0898 25.22%,
      1.0984 27.11%,
      1.1014 29.15%,
      1.0989 31.4%,
      1.0854 35.23%,
      1.0196 48.86%,
      1.0043 54.06%,
      0.9956 59.6%,
      0.9925 68.11%,
      1 100%
      );
  }

  .slider .wheels {
    --val: round(var(--value) + var(--min), 1);
    --digit-count: max(1, ceil(log10(var(--val))));
    width: 144px;
    pointer-events: none;
    display: grid;
    grid-template-columns: 1fr 1fr 5px 1fr 1fr 1fr 5px 1fr 1fr 1fr 4px 1fr 1fr;
    align-content: center;
    height: calc(var(--label) * 2rem);
    transition: grid-template-columns 0.2s;
    font-weight: 500;

    mask: linear-gradient(
      #0000 0.15rem,
      #000 calc(50% - 0.35rem) calc(50% + 0.35rem),
      #0000 calc(100% - 0.25rem)
      );

    .currency {
      translate: calc(var(--digit-count) * 100%) 0;
      transition: all 0.2s ease-out;
    }
  }

  .slider__wheel {
    font-size: 20px;
    width: calc(var(--label) * 0.65rem);
    height: calc(var(--label) * 1.25rem);
    transform-style: preserve-3d;
    transition: transform 0.5s var(--ease);
  }

  .slider__wheel:nth-of-type(1) {
    --val: round(var(--value) + var(--min), 1);
    transform: rotateX(calc(round(down, var(--val) / 100000000, 1) * -36deg));
    span {
      opacity: min(1, round(down, var(--val) / 100000000, 1));
      transition: opacity 0.2s ease-out;
    }
    &+ .comma {
      opacity: min(1, round(down, var(--val) / 100000000, 1));
      transition: opacity 0.2s ease-out;
    }
  }

  .slider__wheel:nth-of-type(2) {
    --val: round(var(--value) + var(--min), 1);
    transform: rotateX(calc(round(down, var(--val) / 10000000, 1) * -36deg));
    span {
      opacity: min(1, round(down, var(--val) / 10000000, 1));
      transition: opacity 0.2s ease-out;
    }
  }

  .slider__wheel:nth-of-type(3) {
    --val: round(var(--value) + var(--min), 1);
    transform: rotateX(calc(round(down, var(--val) / 1000000, 1) * -36deg));
    span {
      opacity: min(1, round(down, var(--val) / 1000000, 1));
      transition: opacity 0.2s ease-out;
    }
  }

  .slider__wheel:nth-of-type(4) {
    --val: round(var(--value) + var(--min), 1);
    transform: rotateX(calc(round(down, var(--val) / 100000, 1) * -36deg));
    span {
      opacity: min(1, round(down, var(--val) / 100000, 1));
      transition: opacity 0.2s ease-out;
    }
    &+ .comma {
      opacity: min(1, round(down, var(--val) / 100000, 1));
      transition: opacity 0.2s ease-out;
    }
  }
  .slider__wheel:nth-of-type(5) {
    --val: round(var(--value) + var(--min), 1);
    transform: rotateX(calc(round(down, var(--val) / 10000, 1) * -36deg));
    span {
      opacity: min(1, round(down, var(--val) / 10000, 1));
      transition: opacity 0.2s ease-out;
    }
  }
  .slider__wheel:nth-of-type(6) {
    --val: round(var(--value) + var(--min), 1);
    transform: rotateX(calc(round(down, var(--val) / 1000, 1) * -36deg));
    span {
      opacity: min(1, round(down, var(--val) / 1000, 1));
      transition: opacity 0.2s ease-out;
    }
  }
  .slider__wheel:nth-of-type(7) {
    --val: round(var(--value) + var(--min), 1);
    transform: rotateX(calc(round(down, var(--val) / 100, 1) * -36deg));
    span {
      opacity: min(1, round(down, var(--val) / 100, 1));
      transition: opacity 0.2s ease-out;
    }
  }
  .slider__wheel:nth-of-type(8) {
    --val: round(var(--value) + var(--min), 1);
    --rotation: round(down, var(--val) / 10, 1);
    transform: rotateX(calc(var(--rotation) * -36deg));

    span {
      opacity: min(1, round(down, var(--val) / 10, 1));
      transition: opacity 0.2s ease-out;
    }
  }
  .slider__wheel:nth-of-type(9) {
    --min-rotation: calc(var(--min) * -36);
    --rotation: calc((var(--value) / var(--max)) * (var(--max) * -36));
    --final: round(nearest, var(--min-rotation) + var(--rotation), 1);
    transform: rotateX(calc(var(--final) * 1deg));
  }

  .slider__wheel span {
    --radius: calc(
      (var(--character-width, var(--label) * 1.25) / sin(36deg)) * -1rem
      );
    transform: translate(-50%, -50%) rotateX(calc(36deg * var(--index)))
      translateZ(calc(var(--radius, -5ch) * -1));
    display: grid;
    place-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    backface-visibility: hidden;
  }
}

@layer slider {
  .slider {
    --label: 1.25;
    --max: 999999999;
  }

  .slider__track {
    container-type: inline-size;
  }
}