@use "sass:list";
@use "sass:map";
@use "abstracts/variables";
@use "abstracts/mixins";

// ====================
// == Line Charts
//
// @note Grid charts based on
// @see https://css-tricks.com/css-charts-grid-custom-properties/
// @author Miriam Suzanne
//
// @note Massively using clip-path
// @see Bennett Feely's clippy to understand polygon() syntax
// @link http://bennettfeely.com/clippy/
// ====================

.chaarts.line {
	--offset: calc((100% / var(--x)) / 2);
	--height: calc(#{variables.$width * 0.5} - #{variables.$gutter * 2});
	--bottom: calc(100% - var(--height));

	padding: var(--height) 0 variables.$gutter;
	position: relative;
	transition: background .3s var(--move),
	color .3s var(--move);

	&::after {
		--scale: calc((100% - (var(--y) * 1px)) / var(--y));

		background: repeating-linear-gradient(
				to bottom,
				var(--scrollable-background) 0 var(--scale),
				var(--foreground-o-25) calc(var(--scale) + 1px)
		);
		content: "";
		inline-size: 100%;
		inset-block-end: var(--bottom);
		inset-block-start: 0;
		position: absolute;
		z-index: 1;
	}

	tr::before {
		content: "";
		position: absolute;
	}

	[scope="row"],
	thead th:first-child {
		color: var(--color, currentcolor);
		text-align: start;
	}

	[style]::before {
		background: linear-gradient(to top, var(--chaarts-blue), var(--chaarts-red) 75%);
		clip-path: var(--polygon);
		content: "";
		inline-size: 100%;
		inset-block-end: var(--bottom);
		inset-block-start: 0;
		position: absolute;
		scale: var(--is-rtl, 1) 1;
		z-index: 2;

		--polygon: polygon(
				0% 100%,
				calc((100% / var(--x) * 1)) 100%,
				calc((100% / var(--x) * 1)) calc(100% - (var(--1) / var(--y) * 100%)),
				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%)),
				100% calc(100% - (var(--12) / var(--y) * 100%)),
				100% 100%,
				0% 100%
		);

		@media (prefers-contrast: more) {
			background: var(--chaarts-blue);
		}
	}

	th,
	td {
		background: var(--background-lighter);
		font-weight: bold;
		inline-size: calc(100% / var(--x));
		text-align: center;
	}

	[scope="col"] {
		&:not(:first-child)::after {
			background: var(--background-lighter) var(--stripes);
			background-blend-mode: exclusion;
			block-size: calc(100% - #{variables.$gutter * 4});
			content: "";
			inline-size: inherit;
			inset-block-end: variables.$gutter * 4;
			inset-inline-start: calc(100% / var(--x) * var(--index));
			mix-blend-mode: soft-light;
			opacity: 0;
			position: absolute;
			transition: opacity .3s var(--move);
			z-index: 3;

			@include mixins.dark-mode {
				mix-blend-mode: lighten;
			}
		}

		@each $number in 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13 {
			&:nth-child(#{$number})::after {
				--index: #{$number - 1};
			}
		}

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

	td {
		--value: var(--1);
		--term: var(--t-1);

		line-height: 1.5;

		&::before {
			block-size: 1.5rem;
			content: "";
			inline-size: inherit;
			position: absolute;
			translate: calc(-50% * var(--is-rtl, 1)) 0;
			z-index: 10;
		}

		// ====================
		// 1.
		// @note Using white-space and:
		// `\A` to make a line-break
		// `\A0` for a non-breakable space
		// @note Based on CSS Secrets by
		// @author Lea Verou
		// @link https://lea.verou.me/2012/02/flexible-multiline-definition-lists-with-2-lines-of-css/
		//
		// 2.
		// @note Display CSS integers custom properties with a trick using counters
		// @author Cassie Evans
		// @link https://codepen.io/cassie-codes/pen/22ea69e0f681d45f2f4c2ca5e6acf4ab
		//
		// 3.
		// @note We need to ensure our counter uses an integer, --value might a a floating number
		// @author Carter Li
		// @link https://css-tricks.com/animating-number-counters/#the-new-school-css-solution
		// ====================
		&::after {
			--arrow: calc(100% - #{variables.$gutter * 0.25});
			--top: calc(var(--height) - (var(--value) / var(--y) * var(--height)));
			--polygon: polygon(
					0% 0%,
					100% 0%,
					100% var(--arrow),
					calc(50% - #{variables.$gutter * 0.25}) var(--arrow),
					50% 100%,
					calc(50% + #{variables.$gutter * 0.25}) var(--arrow),
					0% var(--arrow)
			);
			--integer: calc(var(--value)); // 3

			background-color: var(--foreground-lighter);
			clip-path: var(--polygon);
			color: var(--background-lighter);
			content: var(--term) " " var(--year) "\A " counter(value) "\A0" var(--unit); // 1
			counter-reset: value var(--integer); // 2, 3
			inset-block-start: var(--top, 0);
			inset-inline-start: calc(var(--offset) * 3);
			opacity: 0;
			padding: variables.$gutter * 0.5;
			pointer-events: none;
			position: absolute;
			transform: translate3d(var(--rtl-offset, -50%), -125%, 0) perspective(1000px) rotate3d(1, 0, 0, 45deg);
			transform-origin: 50% calc(100% + 10px);
			transition: opacity .2s var(--enter),
									transform .2s var(--enter);
			white-space: pre;
			z-index: 5;
		}

		[dir="rtl"] &:first-of-type::after {
			inset-inline-start: var(--offset);
		}

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

		@each $number in 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13 {
			&:nth-child(#{$number})::after {
				--value: var(--#{$number - 1});
				--term: var(--t-#{$number - 1});
				--index: #{$number - 1};

				[dir="rtl"] & {
					--index: #{$number - 2};
					--rtl-offset: -40%;
				}
			}
		}

		&:hover::after {
			opacity: 1;
			transform: translate3d(var(--rtl-offset, -50%), -125%, 0) perspective(1000px) rotate3d(1, 0, 0, 0deg);
			transition: opacity .2s var(--exit),
									transform .2s var(--exit);
		}
	}
}

