/*
	SPACING
*/

/* Padding */

[[@foreach padding]]
.[[@use prefix]]pa[[@index]] { padding: [[@value]]; }
[[/@foreach]]

[[@foreach padding]]
.[[@use prefix]]pl[[@index]] { padding-left: [[@value]]; }
[[/@foreach]]

[[@foreach padding]]
.[[@use prefix]]pr[[@index]] { padding-right: [[@value]]; }
[[/@foreach]]

[[@foreach padding]]
.[[@use prefix]]pb[[@index]] { padding-bottom: [[@value]]; }
[[/@foreach]]

[[@foreach padding]]
.[[@use prefix]]pt[[@index]] { padding-top: [[@value]]; }
[[/@foreach]]

[[@foreach padding]]
.[[@use prefix]]pv[[@index]] {
	padding-top: [[@value]];
	padding-bottom: [[@value]];
}
[[/@foreach]]

[[@foreach padding]]
.[[@use prefix]]ph[[@index]] {
	padding-left: [[@value]];
	padding-right: [[@value]];
}
[[/@foreach]]

/* Margin */

[[@foreach margin]]
.[[@use prefix]]ma[[@index]] { margin: [[@value]]; }
[[/@foreach]]

[[@foreach margin]]
.[[@use prefix]]ml[[@index]] { margin-left: [[@value]]; }
[[/@foreach]]

[[@foreach margin]]
.[[@use prefix]]mr[[@index]] { margin-right: [[@value]]; }
[[/@foreach]]

[[@foreach margin]]
.[[@use prefix]]mb[[@index]] { margin-bottom: [[@value]]; }
[[/@foreach]]

[[@foreach margin]]
.[[@use prefix]]mt[[@index]] { margin-top: [[@value]]; }
[[/@foreach]]

[[@foreach margin]]
.[[@use prefix]]mv[[@index]] {
	margin-top: [[@value]];
	margin-bottom: [[@value]];
}
[[/@foreach]]

[[@foreach margin]]
.[[@use prefix]]mh[[@index]] {
	margin-left: [[@value]];
	margin-right: [[@value]];
}
[[/@foreach]]

[[@responsive]]
	[[@foreach padding]]
	.[[@use prefix]]pa[[@index]]-[[@screen-size]] { padding: [[@value]]; }
	[[/@foreach]]

	[[@foreach padding]]
	.[[@use prefix]]pl[[@index]]-[[@screen-size]] { padding-left: [[@value]]; }
	[[/@foreach]]

	[[@foreach padding]]
	.[[@use prefix]]pr[[@index]]-[[@screen-size]] { padding-right: [[@value]]; }
	[[/@foreach]]

	[[@foreach padding]]
	.[[@use prefix]]pb[[@index]]-[[@screen-size]] { padding-bottom: [[@value]]; }
	[[/@foreach]]

	[[@foreach padding]]
	.[[@use prefix]]pt[[@index]]-[[@screen-size]] { padding-top: [[@value]]; }
	[[/@foreach]]

	[[@foreach padding]]
	.[[@use prefix]]pv[[@index]]-[[@screen-size]] {
		padding-top: [[@value]];
		padding-bottom: [[@value]];
	}
	[[/@foreach]]

	[[@foreach padding]]
	.[[@use prefix]]ph[[@index]]-[[@screen-size]] {
		padding-left: [[@value]];
		padding-right: [[@value]];
	}
	[[/@foreach]]


	[[@foreach margin]]
	.[[@use prefix]]ma[[@index]]-[[@screen-size]] { margin: [[@value]]; }
	[[/@foreach]]

	[[@foreach margin]]
	.[[@use prefix]]ml[[@index]]-[[@screen-size]] { margin-left: [[@value]]; }
	[[/@foreach]]

	[[@foreach margin]]
	.[[@use prefix]]mr[[@index]]-[[@screen-size]] { margin-right: [[@value]]; }
	[[/@foreach]]

	[[@foreach margin]]
	.[[@use prefix]]mb[[@index]]-[[@screen-size]] { margin-bottom: [[@value]]; }
	[[/@foreach]]

	[[@foreach margin]]
	.[[@use prefix]]mt[[@index]]-[[@screen-size]] { margin-top: [[@value]]; }
	[[/@foreach]]

	[[@foreach margin]]
	.[[@use prefix]]mv[[@index]]-[[@screen-size]] {
		margin-top: [[@value]];
		margin-bottom: [[@value]];
	}
	[[/@foreach]]

	[[@foreach margin]]
	.[[@use prefix]]mh[[@index]]-[[@screen-size]] {
		margin-left: [[@value]];
		margin-right: [[@value]];
	}
	[[/@foreach]]
[[/@responsive]]