.chaarts.points [style]::before {
  background: var(--color, currentcolor) var(--background);
  scale: var(--is-rtl, 1) 1;
  transition: opacity 0.3s var(--move);
  --polygon: polygon(
  		calc((100% / var(--x) * 1) + var(--offset)) calc(100% - (var(--1) / var(--y) * 100%)),
  		calc((100% / var(--x) * 2) + var(--offset)) calc(100% - (var(--2) / var(--y) * 100%)),
  		calc((100% / var(--x) * 3) + var(--offset)) calc(100% - (var(--3) / var(--y) * 100%)),
  		calc((100% / var(--x) * 4) + var(--offset)) calc(100% - (var(--4) / var(--y) * 100%)),
  		calc((100% / var(--x) * 5) + var(--offset)) calc(100% - (var(--5) / var(--y) * 100%)),
  		calc((100% / var(--x) * 6) + var(--offset)) calc(100% - (var(--6) / var(--y) * 100%)),
  		calc((100% / var(--x) * 7) + var(--offset)) calc(100% - (var(--7) / var(--y) * 100%)),
  		calc((100% / var(--x) * 8) + var(--offset)) calc(100% - (var(--8) / var(--y) * 100%)),
  		calc((100% / var(--x) * 9) + var(--offset)) calc(100% - (var(--9) / var(--y) * 100%)),
  		calc((100% / var(--x) * 10) + var(--offset)) calc(100% - (var(--10) / var(--y) * 100%)),
  		calc((100% / var(--x) * 11) + var(--offset)) calc(100% - (var(--11) / var(--y) * 100%)),
  		calc((100% / var(--x) * 12) + var(--offset)) calc(100% - (var(--12) / var(--y) * 100%)),
  		calc((100% / var(--x) * 13) + var(--offset)) calc(100% - (var(--12) / var(--y) * 100%)),
  		100% calc(100% - (var(--12) / var(--y) * 100%)),
  		100% calc((100% + 0.25rem) - (var(--12) / var(--y) * 100%)),
  		calc((100% / var(--x) * 13) + var(--offset)) calc((100% + 0.25rem) - (var(--12) / var(--y) * 100%)),
  		calc((100% / var(--x) * 12) + var(--offset)) calc((100% + 0.25rem) - (var(--12) / var(--y) * 100%)),
  		calc((100% / var(--x) * 11) + var(--offset)) calc((100% + 0.25rem) - (var(--11) / var(--y) * 100%)),
  		calc((100% / var(--x) * 10) + var(--offset)) calc((100% + 0.25rem) - (var(--10) / var(--y) * 100%)),
  		calc((100% / var(--x) * 9) + var(--offset)) calc((100% + 0.25rem) - (var(--9) / var(--y) * 100%)),
  		calc((100% / var(--x) * 8) + var(--offset)) calc((100% + 0.25rem) - (var(--8) / var(--y) * 100%)),
  		calc((100% / var(--x) * 7) + var(--offset)) calc((100% + 0.25rem) - (var(--7) / var(--y) * 100%)),
  		calc((100% / var(--x) * 6) + var(--offset)) calc((100% + 0.25rem) - (var(--6) / var(--y) * 100%)),
  		calc((100% / var(--x) * 5) + var(--offset)) calc((100% + 0.25rem) - (var(--5) / var(--y) * 100%)),
  		calc((100% / var(--x) * 4) + var(--offset)) calc((100% + 0.25rem) - (var(--4) / var(--y) * 100%)),
  		calc((100% / var(--x) * 3) + var(--offset)) calc((100% + 0.25rem) - (var(--3) / var(--y) * 100%)),
  		calc((100% / var(--x) * 2) + var(--offset)) calc((100% + 0.25rem) - (var(--2) / var(--y) * 100%)),
  		calc((100% / var(--x) * 1) + var(--offset)) calc((100% + 0.25rem) - (var(--1) / var(--y) * 100%))
  );
}

.chaarts.points [style] th::before {
  background: var(--color, currentcolor) var(--background);
  block-size: 1rem;
  content: "";
  display: inline-block;
  inline-size: 1rem;
  translate: -0.2rem 0.1rem 0;
}

.chaarts.points [style] td::before {
  --size: 1rem;
  --top: calc(var(--height) - (var(--value) / var(--y) * var(--height)));
  background: var(--color, currentcolor) var(--background);
  block-size: var(--size);
  border: 2px solid var(--background-lighter);
  border-radius: 50%;
  box-shadow: 0 0 0.25rem var(--foreground-o-50);
  content: "";
  inline-size: var(--size);
  inset-block-start: var(--top, 100%);
  inset-inline-start: calc(var(--offset) * 3);
  position: absolute;
  transition: opacity 0.3s var(--move), transform 0.3s var(--move);
  translate: calc(var(--size) / -2) calc(var(--size) / -2) 0;
  z-index: 4;
}

.chaarts.points [style] td + td::before {
  inset-inline-start: calc(100% / var(--x) * var(--index) + var(--offset));
}

[dir=rtl] .chaarts.points [style] td::before, [dir=rtl] .chaarts.points [style] td + td::before {
  inset-inline-start: unset;
}

.chaarts.points [style] td:nth-of-type(2)::before {
  --value: var(--2);
  --index: 2;
}

.chaarts.points [style] td:nth-of-type(3)::before {
  --value: var(--3);
  --index: 3;
}

.chaarts.points [style] td:nth-of-type(4)::before {
  --value: var(--4);
  --index: 4;
}

.chaarts.points [style] td:nth-of-type(5)::before {
  --value: var(--5);
  --index: 5;
}

.chaarts.points [style] td:nth-of-type(6)::before {
  --value: var(--6);
  --index: 6;
}

.chaarts.points [style] td:nth-of-type(7)::before {
  --value: var(--7);
  --index: 7;
}

.chaarts.points [style] td:nth-of-type(8)::before {
  --value: var(--8);
  --index: 8;
}

.chaarts.points [style] td:nth-of-type(9)::before {
  --value: var(--9);
  --index: 9;
}

.chaarts.points [style] td:nth-of-type(10)::before {
  --value: var(--10);
  --index: 10;
}

.chaarts.points [style] td:nth-of-type(11)::before {
  --value: var(--11);
  --index: 11;
}

.chaarts.points [style] td:nth-of-type(12)::before {
  --value: var(--12);
  --index: 12;
}

.chaarts.points [style]:nth-of-type(1n + 1) {
  --background: var(--checkers);
}

.chaarts.points [style]:nth-of-type(2n + 2) {
  --background: var(--hexagons);
}

.chaarts.points [style]:nth-of-type(3n + 3) {
  --background: var(--triangles);
}

.chaarts.points [style]:nth-of-type(4n + 4) {
  --background: var(--zig);
}

.chaarts.points [style]:nth-of-type(5n + 5) {
  --background: var(--stripes);
}

.chaarts.points [style]:nth-of-type(6n + 6) {
  --background: var(--dots);
}

.chaarts.points tbody:hover [style]::before,
.chaarts.points tbody:hover [style] td::before {
  opacity: 0.25;
}

.chaarts.points tbody:hover [style]:hover::before,
.chaarts.points tbody:hover [style]:hover td::before {
  opacity: 1;
}

.chaarts.points tbody:hover [style]:hover td::before {
  scale: 1.25;
  translate: calc(var(--size) / -2) calc(var(--size) / -2) 0;
}

.chaarts.points [scope=col]:not(:first-child)::after {
  mix-blend-mode: multiply;
}

.chaarts.points [scope=col]:not(:first-child):hover::after {
  opacity: 0.5;
}
