// Fylgja (https://fylgja.dev)
// Licensed under MIT Open Source

@use "props" as *;

$use-mq: true !default;

:where(.grid-cols) {
	display: grid;
}

.grid-cols {
	--grid-cols: 1;
	--_cols: var(--grid-cols);
	grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));

	> * {
		--row: auto;
		--col: auto;
		--_gridIR: var(--row);
		--_gridIC: var(--col);
		grid-row: var(--_gridIR);
		grid-column: var(--_gridIC);
	}
}

.col-span-full {
	--col: 1 / -1;
}

.grid-flow {
	--grid-flow-size: calc(
		(100% - var(--_gap, var(--gap, 0px)) * (var(--_cols) - 1)) /
			var(--_cols)
	);
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: var(--grid-flow-size);
}

@mixin mq-utils($name) {
	.grid-cols {
		&:where([style*="--#{$name}_grid-cols:"]) {
			--_cols: var(--#{$name}_grid-cols);
		}

		> :where([style*="--#{$name}_row:"]) {
			--_gridIR: var(--#{$name}_row);
		}

		> :where([style*="--#{$name}_col:"]) {
			--_gridIC: var(--#{$name}_col);
		}
	}
}

@if $use-mq {
	@include for-mq using ($name) {
		@include mq-utils($name);
	}
}