/*
	Spacing utility classes, Bootstrap-style. Keyed to the --space-1..6 scale in tokens.css, so a
	utility's number is its spacing token. Loaded after components.css by every HTML entrypoint so a
	utility overrides a component's own spacing.

	Naming: {property}{side}-{size}
	- property: p (padding), m (margin)
	- side: (none) all sides, t top, b bottom, s start (left), e end (right), x left+right, y top+bottom
	- size: 1-6, mapping to var(--space-1) .. var(--space-6); 0 zeroes the property
*/

.p-0 { padding: 0; }
.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }
.ps-0 { padding-left: 0; }
.pe-0 { padding-right: 0; }
.px-0 { padding-left: 0; padding-right: 0; }
.py-0 { padding-top: 0; padding-bottom: 0; }

.p-1 { padding: var(--space-1); }
.pt-1 { padding-top: var(--space-1); }
.pb-1 { padding-bottom: var(--space-1); }
.ps-1 { padding-left: var(--space-1); }
.pe-1 { padding-right: var(--space-1); }
.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }

.p-2 { padding: var(--space-2); }
.pt-2 { padding-top: var(--space-2); }
.pb-2 { padding-bottom: var(--space-2); }
.ps-2 { padding-left: var(--space-2); }
.pe-2 { padding-right: var(--space-2); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }

.p-3 { padding: var(--space-3); }
.pt-3 { padding-top: var(--space-3); }
.pb-3 { padding-bottom: var(--space-3); }
.ps-3 { padding-left: var(--space-3); }
.pe-3 { padding-right: var(--space-3); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }

.p-4 { padding: var(--space-4); }
.pt-4 { padding-top: var(--space-4); }
.pb-4 { padding-bottom: var(--space-4); }
.ps-4 { padding-left: var(--space-4); }
.pe-4 { padding-right: var(--space-4); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }

.p-5 { padding: var(--space-5); }
.pt-5 { padding-top: var(--space-5); }
.pb-5 { padding-bottom: var(--space-5); }
.ps-5 { padding-left: var(--space-5); }
.pe-5 { padding-right: var(--space-5); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }

.p-6 { padding: var(--space-6); }
.pt-6 { padding-top: var(--space-6); }
.pb-6 { padding-bottom: var(--space-6); }
.ps-6 { padding-left: var(--space-6); }
.pe-6 { padding-right: var(--space-6); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }

.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.ms-0 { margin-left: 0; }
.me-0 { margin-right: 0; }
.mx-0 { margin-left: 0; margin-right: 0; }
.my-0 { margin-top: 0; margin-bottom: 0; }

.m-1 { margin: var(--space-1); }
.mt-1 { margin-top: var(--space-1); }
.mb-1 { margin-bottom: var(--space-1); }
.ms-1 { margin-left: var(--space-1); }
.me-1 { margin-right: var(--space-1); }
.mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); }
.my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }

.m-2 { margin: var(--space-2); }
.mt-2 { margin-top: var(--space-2); }
.mb-2 { margin-bottom: var(--space-2); }
.ms-2 { margin-left: var(--space-2); }
.me-2 { margin-right: var(--space-2); }
.mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }

.m-3 { margin: var(--space-3); }
.mt-3 { margin-top: var(--space-3); }
.mb-3 { margin-bottom: var(--space-3); }
.ms-3 { margin-left: var(--space-3); }
.me-3 { margin-right: var(--space-3); }
.mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); }
.my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }

.m-4 { margin: var(--space-4); }
.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
.ms-4 { margin-left: var(--space-4); }
.me-4 { margin-right: var(--space-4); }
.mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }

.m-5 { margin: var(--space-5); }
.mt-5 { margin-top: var(--space-5); }
.mb-5 { margin-bottom: var(--space-5); }
.ms-5 { margin-left: var(--space-5); }
.me-5 { margin-right: var(--space-5); }
.mx-5 { margin-left: var(--space-5); margin-right: var(--space-5); }
.my-5 { margin-top: var(--space-5); margin-bottom: var(--space-5); }

.m-6 { margin: var(--space-6); }
.mt-6 { margin-top: var(--space-6); }
.mb-6 { margin-bottom: var(--space-6); }
.ms-6 { margin-left: var(--space-6); }
.me-6 { margin-right: var(--space-6); }
.mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); }
.my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }