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

// ====================
// == Bar Charts
//
// @note Grid charts based on:
// @see https://css-tricks.com/css-charts-grid-custom-properties/
// @author Miriam Suzanne
//
// @note Grid setup:
// 1. 1st column to display legends, fixed width
// 1. 2nd column is a repeater, creating a subcolumn for each unit in --scale
// 1. 3rd columns with 6ch width to ensure that 6 characters long values has enough space to not overflow <dl>
//
// @note Clipped value coming from:
// @see https://www.ffoodd.fr/le-web-en-kit/
// @see http://dabblet.com/gist/08fddf3666c39ebc62ca
// @author Gaël Poupard
// ====================

.chaarts.bar {
	--offset: #{math.div(200em, 16)};

	caption {
		text-align: initial;
		text-indent: calc(var(--offset) + #{variables.$gutter});
	}

	tr {
		display: grid;
		grid-auto-rows: 1fr;
		grid-row-gap: variables.$gutter * 0.5;
		grid-template-columns: minmax(min-content, var(--offset)) repeat(var(--scale, 100), minmax(0, 1fr)) 10ch;
		transition: opacity .2s var(--move);

		@include mixins.patterns;
	}

	th {
		grid-column: 1 / 1;
		margin: variables.$gutter * 0.5 0 0;
		padding: 0 variables.$gutter 0 0;
		text-align: end;
	}

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

		background: linear-gradient(to right,
			var(--chaarts-green),
			var(--chaarts-gray),
			var(--chaarts-blue),
			var(--chaarts-purple),
			var(--chaarts-red)
		) var(--position) list.slash(0%, var(--size)) 100%,
		var(--background) center / contain;
		background-blend-mode: hard-light;
		grid-column: list.slash(2, max(2, var(--value, 0)));
		margin: variables.$gutter * 0.5 0 0;
		position: relative;
	}

	span {
		background: inherit;
		background-clip: text;
		color: transparent;
		font-weight: bold;
		inset-inline-start: 100%;
		line-height: 1.5;
		padding-inline-start: .5ch;
		position: absolute;
	}

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

		tr:hover {
			opacity: 1;
		}
	}

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

		span {
			background: var(--background-lighter);
			background-clip: unset;
			color: var(--chaarts-blue);
		}
	}
}
