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

/*
Utility classes to add simple spacing styles to seperate elements from one
another. You would typically declare these in all the same direction, hence
only margin-bottom and margin-right styles are included here.

https://csswizardry.com/2012/06/single-direction-margin-declarations/
*/


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

	.u-margin-right-#{$sp-name} {
		margin-right: 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-margin-bottom-#{$sp-name}\@#{$bp-name} {
				margin-bottom: rem($sp-value) !important;
			}

			.u-margin-right-#{$sp-name}\@#{$bp-name} {
				margin-right: 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-margin-bottom-disable-last-child:last-child {
	margin-bottom: 0 !important;
}

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