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

// ====================
// == Column Charts
//
// @note Grid charts based on:
// @see https://css-tricks.com/css-charts-grid-custom-properties/
// @author Miriam Suzanne
// ====================

.chaarts[class*="column"] {
	--gap: #{variables.$gutter * 0.5};
	--size: calc(var(--scale, 100) * 100%);
	--width: calc(#{variables.$width} / var(--y) - #{variables.$gutter});

	display: grid;
	grid-column-gap: var(--gap);
	max-block-size: variables.$width;
	position: relative;

	td,
	th,
	col {
		grid-column: 1;
		margin: 0;
	}

	tr > * + * {
		text-align: center;
	}

	// ====================
	// @note Use display: contents to place table-cells in table's grid
	// @link https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents
	// @link https://bitsofco.de/how-display-contents-works/
	// ====================
	tr,
	tbody,
	thead,
	colgroup {
		display: contents;
	}

	caption {
		grid-column: 1 / span var(--y);
		grid-row: -1;
	}

	td {
		--integer: calc(var(--value));

		grid-row: list.slash(calc((var(--scale, 100) + 2) - var(--integer)), -2);
		pointer-events: none;
		position: relative;
		transition: opacity .2s var(--move);

		@each $number in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 {
			&:nth-of-type(#{$number}) {
				grid-column: #{$number + 1};
			}
		}
	}

	span {
		background: inherit;
		background-clip: text;
		color: transparent;
		font-weight: bold;
		inset-block-end: 100%;
		inset-inline-end: 0;
		inset-inline-start: 0;
		line-height: 1.5;
		pointer-events: auto;
		position: absolute;

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

	col {
		background: var(--background) var(--stripes);
		background-blend-mode: exclusion;
		grid-row: 1 / -1;
		mix-blend-mode: color;
		opacity: .25;
		transition: opacity .3s var(--move);

		&:hover {
			opacity: .5;
		}

		&:first-of-type {
			opacity: 0;
		}
	}

	col,
	thead tr * {
		@each $number in 2, 3, 4, 5, 6, 7, 8, 9, 10 {
			&:nth-of-type(#{$number}) {
				grid-column: #{$number};
			}
		}
	}
}

.chaarts.column-single {
	grid-auto-columns: 1fr;
	grid-template-rows: 2ex repeat(var(--scale, 100), minmax(0, .25rem)) minmax(min-content, 2rem);

	tbody th {
		grid-row: -6 / -3;
		line-height: 1;
	}

	thead * {
		grid-row: -2;
	}

	td {
		--position: calc(var(--integer, 0) / var(--scale, 100) * 100%);

		background: linear-gradient(to top,
			var(--chaarts-green),
			var(--chaarts-gray),
			var(--chaarts-blue),
			var(--chaarts-purple),
			var(--chaarts-red)
		) 0% list.slash(var(--position), 100%) var(--size),
		var(--background) center / variables.$gutter;
		background-blend-mode: hard-light;

		@include mixins.patterns;

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

