// Generate inline class names for your elements
//
// <div class="actions inset-vert-small-large">
//    <button type="submit">Totes click me!</button>
// </div>
//
// Padding
// ---------------
// pad-{item}						:  pad-small (padding: 10px)
// pad-vert-{item}-{item + 1}  		:  pad-vert-small-large (padding: 10px 0 40px 0)
// pad-horz-{item}-{item + 1}  		:  pad-horz-small-large (padding: 0 10px 0 40px)
//
// Margin
// ---------------
// inset-{item}						:  inset-small (margin: 10px)
// inset-vert-{item}-{item + 1}		:  inset-vert-small-large (margin: 10px 0 40px 0)
// inset-horz-{item}-{item + 1}		:  inset-horz-small-large (margin: 0 10px 0 40px)
//
// Offset margin
// ---------------
// offset-{item}					:  offset-small (margin: -10px)
// offset-vert-{item}-{item + 1}	:  offset-vert-small-large (margin: -10px 0 -40px 0)
// offset-horz-{item}-{item + 1}	:  offset-horz-small-large (margin: 0 -10px 0 -40px)
	
@mixin spacing-classes($base: 10px, $list: small normal medium large){
	
	@for $i from 1 through length($list) {
		
		.pad-#{nth(unquote($list), $i)} { 
			padding: ($base * $i);
		}
		
		.inset-#{nth(unquote($list), $i)} { 
			margin: ($base * $i);
		}
		
		.offset-#{nth(unquote($list), $i)} { 
			margin: (-($base * $i));
		}

		.pad-top-#{nth(unquote($list), $i)} { 
			padding-top: ($base * $i);
		}
		
		.pad-right-#{nth(unquote($list), $i)} { 
			padding-right: ($base * $i);
		}
		
		.pad-bottom-#{nth(unquote($list), $i)} { 
			padding-bottom: ($base * $i);
		}
		
		.pad-left-#{nth(unquote($list), $i)} { 
			padding-left: ($base * $i);
		}

		.inset-top-#{nth(unquote($list), $i)} { 
			margin-top: ($base * $i);
		}
		
		.inset-right-#{nth(unquote($list), $i)} { 
			margin-right: ($base * $i);
		}
		
		.inset-bottom-#{nth(unquote($list), $i)} { 
			margin-bottom: ($base * $i);
		}
		
		.inset-left-#{nth(unquote($list), $i)} { 
			margin-left: ($base * $i);
		}

		.outset-top-#{nth(unquote($list), $i)} { 
			margin-top: (-($base * $i));
		}
		
		.outset-right-#{nth(unquote($list), $i)} { 
			margin-right: (-($base * $i));
		}
		
		.outset-bottom-#{nth(unquote($list), $i)} { 
			margin-bottom: (-($base * $i));
		}
		
		.outset-left-#{nth(unquote($list), $i)} { 
			margin-left: (-($base * $i));
		}

		.inset-#{nth(unquote($list), $i)} { 
			margin: ($base * $i);
		}
		
		.offset-#{nth(unquote($list), $i)} { 
			margin: (-($base * $i));
		}

		.pad-vert-#{nth(unquote($list), $i)} { 
			padding-top: ($base * $i);
			padding-bottom: ($base * $i);
		}
		
		.pad-horz-#{nth(unquote($list), $i)} { 
			padding-right: ($base * $i);
			padding-left: ($base * $i);
		}
		
		.inset-vert-#{nth(unquote($list), $i)} { 
			margin-top: ($base * $i);
			margin-bottom: ($base * $i);
		}
		
		.inset-horz-#{nth(unquote($list), $i)} { 
			margin-right: ($base * $i);
			margin-left: ($base * $i);
		}
		
		.offset-vert-#{nth(unquote($list), $i)} { 
			margin-top: (-($base * $i));
			margin-bottom: (-($base * $i));
		}
		
		.offset-horz-#{nth(unquote($list), $i)} { 
			margin-right: (-($base * $i));
			margin-left: (-($base * $i));
		}
		
		@for $j from 1 through length($list) {
				
			@if ($i != $j) {
				
				.pad-vert-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} { 
					padding-top: ($base * $i);
					padding-bottom: ($base * $j);
				}
				
				.pad-horz-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} { 
					padding-right: ($base * $i);
					padding-left: ($base * $j);
				}
				
				.inset-vert-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} { 
					margin-top: ($base * $i);
					margin-bottom: ($base * $j);
				}
				
				.inset-horz-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} { 
					margin-right: ($base * $i);
					margin-left: ($base * $j);
				}
				
				.offset-vert-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} { 
					margin-top: (-($base * $i));
					margin-bottom: (-($base * $j));
				}
				
				.offset-horz-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} { 
					margin-right: (-($base * $i));
					margin-left: (-($base * $j));
				}
			}
		}
	}
}

// @include spacing-classes();
// @include spacing-classes($base: 5px);
// @include spacing-classes($base: 5px, $list: big bigger biggerer evenbiggerer biggest);
// @include spacing-classes($list: big bigger biggerer evenbiggerer biggest);