/* Utils for adding Padding and Margin */
$none: 0px !important;
$small: 0.5em !important;
$medium: 1em !important;
$large: 2em !important;
$x-large: 4em !important;

$perc5: 5% !important;
$perc7-5: 7.5% !important;
$perc10: 10% !important;
$perc12-5: 12.5% !important;
$perc15: 15% !important;
$perc17-5: 17.5% !important;
$perc20: 20% !important;

$property-list: 
	(m, 	margin), 
	(p, 	padding);

$direction-list:
	(a, 	all), 
	(v, 	vertical), 
	(h, 	horizontal), 
	(t, 	top), 
	(r, 	right), 
	(b, 	bottom), 
	(l, 	left);

$amount-list: 
	(n, 	$none), 
	(s, 	$small), 
	(m, 	$medium), 
	(l, 	$large), 
	(xl, 	$x-large), 
	(p5, 	$perc5),
	(p7-5, 	$perc7-5),
	(p10, 	$perc10),
	(p12-5, $perc12-5),
	(p15, 	$perc15),
	(p17-5, $perc17-5),
	(p20, 	$perc20);

@each $prp, $property in $property-list {
	@each $dir, $direction in $direction-list {
		@each $amt, $amount in $amount-list {
			@if $dir == a {
				.#{$prp}#{$dir}#{$amt} { #{$property}: $amount }
			} @else if $dir == v {
				.#{$prp}#{$dir}#{$amt} { #{$property}-top: $amount }
				.#{$prp}#{$dir}#{$amt} { #{$property}-bottom: $amount }
			} @else if $dir == h {
				.#{$prp}#{$dir}#{$amt} { #{$property}-left: $amount }
				.#{$prp}#{$dir}#{$amt} { #{$property}-right: $amount }
			} @else {
				.#{$prp}#{$dir}#{$amt} { #{$property}-#{$direction}: $amount }
			}
		}
	}
}