@use '../tokens/index.scss' as tokens;

$adaptive-grid-gap: tokens.$layout-2 !default;

$adaptive-grid-columns-2-variants: (
	adaptive-grid-columns-2: 400px,
	adaptive-grid-columns-2-min-width-600: 600px,
	adaptive-grid-columns-2-min-width-800: 800px
) !default;

@mixin _adaptive-grid-columns-2-at($min-width) {
	@container adaptive-grid (min-width: #{$min-width}) {
		> .adaptive-grid-content {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}
}

.adaptive-grid {
	container: adaptive-grid / inline-size;

	> .adaptive-grid-content {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: $adaptive-grid-gap;

		> .adaptive-grid-item {
			min-inline-size: 0;
		}
	}

	@each $class-name, $min-width in $adaptive-grid-columns-2-variants {
		&.#{$class-name} {
			@include _adaptive-grid-columns-2-at($min-width);
		}
	}
}