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

// ====================
// == Pie Charts
//
// ====================

.chaarts.pie {
	--radius: 32em;

	margin: 0 auto;
	padding-block-start: calc(var(--radius) - #{variables.$gutter * 2});
	position: relative;

	tbody {
		border: 0;
		display: flex;
		flex-wrap: wrap;
	}

	tr {
		--lt-25: clamp(0, 25 - var(--value), 1);
		--gt-25: calc(1 - var(--lt-25));
		--lt-50: clamp(0, 50 - var(--value), 1);
		--gt-50: calc(1 - var(--lt-50));
		--lt-75: clamp(0, 75 - var(--value), 1);
		--gt-75: calc(1 - var(--lt-75));

		align-items: center;
		display: flex;
		flex: 1 1 auto;
		transition: opacity .3s var(--move);

		@include mixins.patterns;


		&:first-child {
			--value: var(--1);
			--position: 0turn;
		}

		&:nth-child(2) {
			--value: var(--2);
			--position: calc(var(--1) * .01turn);
		}

		@each $index in 3, 4, 5, 6, 7 {
			$start: 'var(--1)';
			$value: $index - 1;

			@while $value > 1 {
				$start: string.insert($start, ' + var(--#{$value})', 100);
				$value: $value - 1;
			}

			&:nth-of-type(#{$index}n + #{$index}) {
				--value: var(--#{$index});
				--position: calc((#{$start}) * .01turn);
			}
		}
	}

	[scope="row"] {
		padding-inline-end: variables.$gutter * 0.5;

		&::before {
			background: var(--color, currentcolor) var(--background);
			block-size: variables.$gutter;
			content: "";
			display: inline-block;
			inline-size: variables.$gutter;
			translate: calc(-.2rem * var(--is-rtl, 1)) .1rem 0;
		}
	}

	td::after,
	td::before {
		inset-block-start: calc(var(--radius) / 2);
		inset-inline-start: 50%;
		position: absolute;
		transform-origin: center;
	}

	[dir="rtl"] & td::after {
		inset-inline-start: 40%;
	}

	// ====================
	// Using clip-path + calc() + transform + CSS vars
	// Using mask-image to make a circle
	//
	// 1.
	// @note Based on Ana Tudor's work
	// @link https://css-tricks.com/1-html-element-5-css-properties-magic/
	// @author Ana Tudor
	//
	// 2.
	// @note Using a Roma Komarov's idea about boolean custom properties
	// @link https://www.kizu.ru/conditions-for-css-variables/
	//
	// 3.
	// @note Mask support:
	// @link https://caniuse.com/#search=mask
	// ====================
	td::before {
		--zoom: .75;
		--part: calc(var(--value) * 3.6);
		--main-angle: calc(var(--part) - (90 * (var(--gt-25, 0) + var(--gt-50, 0) + var(--gt-75, 0))));
		--β: calc(var(--main-angle) * var(--to-radians));
		--α: calc((90 - var(--main-angle)) * var(--to-radians));
		--pos-B: calc(sin(var(--β)) * 50%);
		--pos-A: calc(sin(var(--α)) * 50%);
		--polygon: polygon(
				50% 50%,
				50% 0%,
				100% 0%,
				max(50% + var(--pos-B), var(--gt-25, 0) * 100%) calc(50% - var(--pos-A) * var(--lt-25, 1)),
				max(50%, var(--gt-25, 0) * 100%) max(50%, var(--gt-25, 0) * 100%),
				max(50% + var(--pos-A) * var(--gt-25, 0), var(--gt-50, 0) * 100%) max(50% + var(--pos-B) * var(--gt-25, 0) * var(--lt-50, 0), var(--gt-50, 0) * 100%),
				max(0%, var(--lt-50, 0) * 50%) max(50%, var(--gt-50, 0) * 100%),
				clamp(0%, 100% * (var(--lt-75, 1)), 50% - var(--pos-B) * var(--gt-50, 0)) calc(50% + var(--pos-A) * var(--gt-50, 0) * var(--lt-75, 1)),
				max(0%, var(--lt-75, 0) * 50%) max(0%, var(--lt-75, 0) * 50%),
				calc(50% - var(--pos-A) * var(--gt-75, 0)) calc(50% - var(--pos-B) * var(--gt-75, 0))
		);

		background: var(--color, currentcolor) var(--background);
		block-size: var(--radius);
		border-radius: 50%;
		clip-path: var(--polygon);
		content: '';
		inline-size: var(--radius);
		transform:
			translate3d(calc(-50% * var(--is-rtl, 1)), -50%, 0)
			rotate(var(--position))
			scale(var(--zoom));
		transition: transform .2s var(--move);
	}

	tr:hover td::before {
		--zoom: .8;
	}

	// ====================
	// 1.
	// @note Display CSS integers custom properties with a trick using counters
	// @author Cassie Evans
	// @link https://codepen.io/cassie-codes/pen/22ea69e0f681d45f2f4c2ca5e6acf4ab
	//
	// 2.
	// @note We need to ensure our counter uses an integer, --value might be a floating number
	// @author Carter Li
	// @link https://css-tricks.com/animating-number-counters/#the-new-school-css-solution
	// ====================
	td::after {
		--axis: calc(var(--position) - .25turn + var(--value) * .005turn);
		--away: calc(var(--radius) / 2 - #{variables.$gutter});
		--integer: calc(var(--value)); // 2

		background-color: var(--foreground-lighter);
		color: var(--background-lighter);
		content: var(--term) "\A0: " counter(value) "\A0%"; // 1
		counter-reset: value var(--value); // 1
		opacity: 0;
		padding: variables.$gutter * 0.5;
		pointer-events: none;
		transform:
			translate3d(-50%, -50%, 0)
			rotate(var(--axis))
			translate(var(--away))
			rotate(calc(var(--axis) * -1))
			perspective(1000px)
			rotate3d(1, 0, 0, 45deg);
		transform-origin: 50% calc(100% + 10px);
		transition: opacity .2s var(--enter),
								transform .2s var(--enter);
		z-index: 3;
	}

	tbody:hover tr {
		opacity: .5;

		&:hover {
			opacity: 1;
		}

		&:hover td::after {
			opacity: 1;
			transform:
				translate3d(-50%, -50%, 0)
				rotate(var(--axis))
				translate(var(--away))
				rotate(calc(var(--axis) * -1))
				perspective(1000px)
				rotate3d(1, 0, 0, 0deg);
			transition: opacity .2s var(--exit),
									transform .2s var(--exit);
		}
	}
}
