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

$separator: '-' !default;

$gap-sizes: (
	('xxs', tokens.$layout-1),
	('xs', tokens.$layout-2),
	('sm', tokens.$layout-3),
	('md', tokens.$layout-4),
	('lg', tokens.$layout-5),
	// ('xl', tokens.$layout-6),
	// ('xxl', tokens.$layout-7),
	// ('xxxl', tokens.$layout-8),
	('none', tokens.$layout-0)
);

@function sizeValue($key, $value) {
	@return if($key == 'none', 0, $value);
}

@each $size in $gap-sizes {
	$sizeKey: nth($size, 1);
	$sizeValue: nth($size, 2);

	// .<property>-<value>
	.gap#{$separator}#{$sizeKey} {
		gap: sizeValue($sizeKey, $sizeValue) !important;
	}
}

@include mixins.tablet {
	@each $size in $gap-sizes {
		$sizeKey: nth($size, 1);
		$sizeValue: nth($size, 2);

		.gap#{$separator}#{$sizeKey}#{$separator}tablet {
			gap: $sizeValue !important;
		}
	}
}

@include mixins.desktop {
	@each $size in $gap-sizes {
		$sizeKey: nth($size, 1);
		$sizeValue: nth($size, 2);

		.gap#{$separator}#{$sizeKey}#{$separator}desktop {
			gap: $sizeValue !important;
		}
	}
}

@include mixins.widescreen {
	@each $size in $gap-sizes {
		$sizeKey: nth($size, 1);
		$sizeValue: nth($size, 2);

		.gap#{$separator}#{$sizeKey}#{$separator}widescreen {
			gap: $sizeValue !important;
		}
	}
}