@layer utils {
	:root {
		--spacing-base: 0.25rem; /* 4px */

		--spacing-0: 	0rem;								/* 0px */
		--spacing-0-5:	calc(var(--spacing-base) * 0.5);	/* 0.125rem | 2px */
		--spacing-1:	calc(var(--spacing-base) * 1);		/* 0.25rem | 4px */
		--spacing-1-5:	calc(var(--spacing-base) * 1.5);	/* 0.375rem | 6px */
		--spacing-2:	calc(var(--spacing-base) * 2);		/* 0.5rem | 8px */
		--spacing-3:	calc(var(--spacing-base) * 3);		/* 0.75rem | 12px */
		--spacing-4:	calc(var(--spacing-base) * 4);		/* 1rem | 16px */
		--spacing-5:	calc(var(--spacing-base) * 5);		/* 1.25rem | 20px */
		--spacing-6:	calc(var(--spacing-base) * 6);		/* 1.5rem | 24px */
		--spacing-7:	calc(var(--spacing-base) * 7);		/* 1.75rem | 28px */
		--spacing-8:	calc(var(--spacing-base) * 8);		/* 2rem | 32px */
		--spacing-9:	calc(var(--spacing-base) * 9);		/* 2.25rem | 36px */
		--spacing-10:	calc(var(--spacing-base) * 10);		/* 2.5rem | 40px */
		--spacing-11:	calc(var(--spacing-base) * 11);		/* 2.75rem | 44px */
		--spacing-12:	calc(var(--spacing-base) * 12);		/* 3rem | 48px */
		--spacing-14:	calc(var(--spacing-base) * 14);		/* 3.5rem | 56px */
		--spacing-16:	calc(var(--spacing-base) * 16);		/* 4rem | 64px */
		--spacing-18:	calc(var(--spacing-base) * 18);		/* 4.5rem | 72px */
		--spacing-20:	calc(var(--spacing-base) * 20);		/* 5rem | 80px */
	}

	/* Generate margin utilities */
	$margin-sides: (
		"t": "top",
		"r": "right",
		"b": "bottom",
		"l": "left"
	);

	$margin-sizes: (0, 1, 2, 3, 4, 6, 8, 9, 10, 12, 16, 20);

	@each $abbr, $side in $margin-sides {
		@each $size in $margin-sizes {
			@if ($size <= 12 or ($abbr == "t" and $size <= 20)) {
				.u-m#{$abbr}-#{$size} { margin-#{$side}: var(--spacing-#{$size}); }
				.u-p#{$abbr}-#{$size} { margin-#{$side}: var(--spacing-#{$size}); }
			}
		}
	}

	/* Generate margin-x and margin-y utilities */
	$margin-combos: (
		"x": ("left", "right"),
		"y": ("top", "bottom")
	);

	$margin-combo-sizes: (0, 1, 2, 3, 4, 6, 8, 10, 12);

	@each $abbr, $sides in $margin-combos {
		@each $size in $margin-combo-sizes {
			.u-m#{$abbr}-#{$size} {
				@each $side in $sides {
					margin-#{$side}: var(--spacing-#{$size});
				}
			}
		}
	}

	/* Generate padding utilities */
	$padding-sides: (
		"t": "top",
		"r": "right",
		"b": "bottom",
		"l": "left"
	);

	$padding-sizes: (0, 2, 4, 6, 8);

	@each $abbr, $side in $padding-sides {
		@each $size in $padding-sizes {
			.u-p#{$abbr}-#{$size} { padding-#{$side}: var(--spacing-#{$size}); }
		}
	}

	/* Generate padding-x and padding-y utilities */
	$padding-combos: (
		"x": ("left", "right"),
		"y": ("top", "bottom")
	);

	$padding-combo-sizes: (0, 2, 4, 6, 8);

	@each $abbr, $sides in $padding-combos {
		@each $size in $padding-combo-sizes {
			.u-p#{$abbr}-#{$size} {
				@each $side in $sides {
					padding-#{$side}: var(--spacing-#{$size});
				}
			}
		}
	}
}
