@use "abstracts/variables";

// ====================
// == Columns Charts
//
// @note (!) Requires column chart
// ====================

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

	span {
		background-image: none;
	}

	col:nth-child(odd) {
		opacity: 0;
	}

	tbody th {
		grid-row: -10 / span 7;
	}

	thead tr * {
		grid-row: -2;
	}

	col,
	thead tr * {
		@each $number in 2, 3, 4, 5, 6 {
			&:nth-of-type(#{$number}) {
				grid-column: calc(#{($number * 2)} - var(--span)) / span var(--span);
			}
		}
	}

	thead tr + tr * {
		font-weight: normal;
		grid-row: -3;

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

	td {
		background-color: var(--chaarts-pink);
		background-image: var(--zig);
		grid-row-end: -3;
	}

	// @note Oh boy, if we could use var(--span) in selector…
	td:nth-of-type(2n + 2) {
		background: var(--chaarts-blue) var(--triangles);
	}
}
