@use "abstracts/variables";
@use "abstracts/mixins";

// ====================
// == Points Charts
//
// @note (!) Requires line chart
// ====================

.chaarts.points {
	[style] {
		&::before {
			background: var(--color, currentcolor) var(--background);
			scale: var(--is-rtl, 1) 1;
			transition: opacity .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% + #{variables.$gutter * 0.25}) - (var(--12) / var(--y) * 100%)),
					calc((100% / var(--x) * 13) + var(--offset)) calc((100% + #{variables.$gutter * 0.25}) - (var(--12) / var(--y) * 100%)),
					calc((100% / var(--x) * 12) + var(--offset)) calc((100% + #{variables.$gutter * 0.25}) - (var(--12) / var(--y) * 100%)),
					calc((100% / var(--x) * 11) + var(--offset)) calc((100% + #{variables.$gutter * 0.25}) - (var(--11) / var(--y) * 100%)),
					calc((100% / var(--x) * 10) + var(--offset)) calc((100% + #{variables.$gutter * 0.25}) - (var(--10) / var(--y) * 100%)),
					calc((100% / var(--x) * 9) + var(--offset)) calc((100% + #{variables.$gutter * 0.25}) - (var(--9) / var(--y) * 100%)),
					calc((100% / var(--x) * 8) + var(--offset)) calc((100% + #{variables.$gutter * 0.25}) - (var(--8) / var(--y) * 100%)),
					calc((100% / var(--x) * 7) + var(--offset)) calc((100% + #{variables.$gutter * 0.25}) - (var(--7) / var(--y) * 100%)),
					calc((100% / var(--x) * 6) + var(--offset)) calc((100% + #{variables.$gutter * 0.25}) - (var(--6) / var(--y) * 100%)),
					calc((100% / var(--x) * 5) + var(--offset)) calc((100% + #{variables.$gutter * 0.25}) - (var(--5) / var(--y) * 100%)),
					calc((100% / var(--x) * 4) + var(--offset)) calc((100% + #{variables.$gutter * 0.25}) - (var(--4) / var(--y) * 100%)),
					calc((100% / var(--x) * 3) + var(--offset)) calc((100% + #{variables.$gutter * 0.25}) - (var(--3) / var(--y) * 100%)),
					calc((100% / var(--x) * 2) + var(--offset)) calc((100% + #{variables.$gutter * 0.25}) - (var(--2) / var(--y) * 100%)),
					calc((100% / var(--x) * 1) + var(--offset)) calc((100% + #{variables.$gutter * 0.25}) - (var(--1) / var(--y) * 100%))
			);
		}

		th::before {
			background: var(--color, currentcolor) var(--background);
			block-size: 1rem;
			content: "";
			display: inline-block;
			inline-size: 1rem;
			translate: -.2rem .1rem 0;
		}

		td {
			&::before {
				--size: #{variables.$gutter};
				--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 #{variables.$gutter * 0.25} 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 .3s var(--move),
										transform .3s var(--move);
				translate: calc(var(--size) / -2) calc(var(--size) / -2) 0;
				z-index: 4;
			}

			+ td::before {
				inset-inline-start: calc((100% / var(--x) * var(--index)) + var(--offset));
			}

			[dir="rtl"] &::before,
			[dir="rtl"] & + td::before {
				inset-inline-start: unset;
			}

			@each $number in 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 {
				&:nth-of-type(#{$number})::before {
					--value: var(--#{$number});
					--index: #{$number};
				}
			}
		}

		@include mixins.patterns;
	}

	tbody:hover [style]::before,
	tbody:hover [style] td::before {
		opacity: .25;
	}

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

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

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

		&:hover::after {
			opacity: .5;
		}
	}
}
