//------------------------------------------------------------------------------------------------
// SPACING UTILITIES
//------------------------------------------------------------------------------------------------

/*
Utility classes to add simple spacing styles to seperate elements from one
another.


[Note 1]
	When margins from different elements touch each other, they collapse, so to avoid this and keep things simple we only declare margins in single directions.
	- https://csswizardry.com/2012/06/single-direction-margin-declarations/
*/


// CLASSES
//------------------------------------------------------------------------------------------------

// Example: u-mb-small (margin bottom)
// Example: u-pb-small (padding bottom)
@each $sp-name, $sp-value in $spacing {
	.u-mb-#{$sp-name} {
		margin-bottom: rem($sp-value) !important;
	}

	.u-mr-#{$sp-name} {
		margin-right: rem($sp-value) !important;
	}

	.u-pt-#{$sp-name},
	.u-pv-#{$sp-name},
	.u-p-#{$sp-name} {
		padding-top: rem($sp-value) !important;
	}

	// Add a little more padding to bottom to better visually balance
	.u-pb-#{$sp-name},
	.u-pv-#{$sp-name},
	.u-p-#{$sp-name} {
		padding-bottom: rem($sp-value + ($sp-value * 0.2)) !important;
	}

	.u-pr-#{$sp-name},
	.u-ph-#{$sp-name},
	.u-p-#{$sp-name} {
		padding-right: rem($sp-value) !important;
	}

	.u-pl-#{$sp-name},
	.u-ph-#{$sp-name},
	.u-p-#{$sp-name} {
		padding-left: rem($sp-value) !important;
	}
}

// Changes margin when breakpoint is hit
// Example: u-margin-bottom-small@md
@each $bp-name, $bp-value in $mq-breakpoints {
	@include mq(#{$bp-name}) {
		@each $sp-name, $sp-value in $spacing {
			.u-mb-#{$sp-name}\@#{$bp-name} {
				margin-bottom: rem($sp-value) !important;
			}

			.u-mr-#{$sp-name}\@#{$bp-name} {
				margin-right: rem($sp-value) !important;
			}

			.u-pt-#{$sp-name}\@#{$bp-name},
			.u-pv-#{$sp-name}\@#{$bp-name},
			.u-p-#{$sp-name}\@#{$bp-name} {
				padding-top: rem($sp-value) !important;
			}

			// Add a little more padding to bottom to better visually balance
			.u-pb-#{$sp-name}\@#{$bp-name},
			.u-pv-#{$sp-name}\@#{$bp-name},
			.u-p-#{$sp-name}\@#{$bp-name} {
				padding-bottom: rem($sp-value + ($sp-value * 0.2)) !important;
			}

			.u-pr-#{$sp-name}\@#{$bp-name},
			.u-ph-#{$sp-name}\@#{$bp-name},
			.u-p-#{$sp-name}\@#{$bp-name} {
				padding-right: rem($sp-value) !important;
			}

			.u-pl-#{$sp-name}\@#{$bp-name},
			.u-ph-#{$sp-name}\@#{$bp-name},
			.u-p-#{$sp-name}\@#{$bp-name} {
				padding-left: rem($sp-value) !important;
			}
		}
	}
}


// LAST CHILD MODIFIER
//------------------------------------------------------------------------------------------------

/*
An addon for spacing utility classes which disables spacing only if the
element which the class is applied to is a last-child.

This is useful, as when you're using these classes with dynamically
generated content, it allows you to disable the margin for the 
last item, as that can sometimes result in too much spacing when
combined with the spacing of its parent.
*/


.u-mb-disable-last-child:last-child {
	margin-bottom: 0 !important;
}

.u-mr-disable-last-child:last-child {
	margin-right: 0 !important;
}