@use "sass:math";
@use "abstracts/variables";

// ====================
// == Multiple radar Charts
//
// @note (!) Requires radar chart
// ====================

.chaarts.radar-multiple {
	margin-block-end: variables.$gutter * 12;

	tbody {
		columns: var(--areas);
		vertical-align: bottom;
	}

	[scope="row"] {
		block-size: variables.$gutter * 2;
		bottom: variables.$gutter * -8;
		left: variables.$gutter;
		position: absolute;

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

	// Allowing more areas :)
	@each $number in 1 {
		tr:nth-child(#{$number + 1}) [scope="row"] {
			left: calc(#{variables.$gutter} + (100% / var(--areas)) * #{$number});
		}
	}

	td {
		align-items: flex-end;
		border-color: var(--color, currentcolor);
		display: flex;
		justify-content: flex-end;
		opacity: .5;
		pointer-events: none;
		z-index: 0;

		&::after {
			color: var(--foreground);
			display: block;
			font-size: small;
			font-weight: 700;
			inline-size: 100%;
			text-indent: math.div(variables.$gutter, -2);
			transform: skew(calc(var(--skew) * -1)) rotate(calc(var(--part) * var(--index, 1) * -1));
			transform-origin: 0 0;
			white-space: nowrap;
		}

		@each $number in 1, 2, 3, 4, 5, 6, 7 {
			&:nth-of-type(#{$number})::after {
				--integer: calc(var(--#{$number})); // 2

				content: counter(value); // 1
				counter-reset: value var(--integer); // 1
				inline-size: calc(var(--#{$number}) * 100% / var(--scale));
			}
		}
	}

	span {
		--mask: radial-gradient(circle at bottom right, var(--foreground), var(--foreground-o-50));

		background: var(--color, currentcolor);
		mask-image: var(--mask);
		pointer-events: auto;
	}

	@media (hover: hover) {
		td {
			opacity: .25;
			transition: opacity .2s var(--move);

			&::after {
				opacity: 0;
				transition: inherit;
			}
		}

		tr:hover td {
			opacity: 1;
			z-index: 1;

			&::after {
				opacity: inherit;
			}
		}
	}
}
