/* GRID
========================================================================
*/

$sugar-column-width: 5rem;
$grid-columns-count: 12;

:where(.s-grid) {
	--span: 1;
	--offset: 0;
	--gap: 1rem;
	--padding: 0rem;
	--col-width: #{$sugar-column-width};

	@for $i from 2 through $grid-columns-count {
		--span-#{$i}: initial;
		--offset-#{$i}: initial;
	}

	margin-right: calc(var(--gap) * -1);

	container-type: inline-size;
	container-name: s-grid;
}

:where(.s-grid > *) {
	gap: var(--gap);
	display: grid;
	margin-right: var(--gap);

	grid-template-columns: repeat(auto-fit, minmax(calc(var(--col-width) - var(--gap)), 1fr));
}

:where(.s-grid.s-fixed > *) {
	grid-template-columns: repeat(auto-fill, minmax(var(--col-width), 1fr));
}

:where(.s-grid > * > .s-grid) {
	margin-right: 0;
}

:where(.s-grid > * > .s-grid > *) {
	margin-right: 0;
	grid-template-columns: subgrid;
}

:where(.s-grid:has(+ .s-grid)) {
	margin-bottom: var(--gap);
}

:where(.s-grid > * > *) {
	--max-span: 1;
	--span-1f: var(--span);
	--offset-1f: var(--offset);
	--span-result: 1;

	--span-plus-offset: calc(var(--span-result) + var(--offset-result));
	grid-column: span min(var(--max-span), var(--span-plus-offset));

	margin-inline-start: calc(
		calc(100% / var(--span-plus-offset) * var(--offset-result)) + (var(--gap) / 2)
	);
	padding: var(--padding);
}

@for $i from 2 through $grid-columns-count {
	@container s-grid (min-width: #{$i * $sugar-column-width}) {
		:where(.s-grid > * > *) {
			--max-span: #{$i};
			--span-#{$i}f: var(--span-#{$i}, var(--span-#{$i - 1}f));
			--offset-#{$i}f: var(--offset-#{$i}, var(--offset-#{$i - 1}f));

			--span-result: var(--span-#{$i}f);
			--offset-result: var(--offset-#{$i}f);
		}
	}
}

/* 
:where(.s-col-full) {
	grid-column-start: 1;
	grid-column-end: -1;
}
 */