//------------------------------------------------------------------------------------------------
// LAYOUT OBJECT
//------------------------------------------------------------------------------------------------

/*
The layout object is used to construct a grid-like layout system, with each
layout__item representing an individual column. Typically used with
container object and width utilities to form a grid system.
*/

// BLOCK & ELEMENTS
//------------------------------------------------------------------------------------------------

/*
[1] Allows us to use the layout object on any type of element.
[2] Makes layout fill all available space. Useful for nesting layouts within
layouts.
[3] We need to defensively reset any box-model properties.
[4] Absorb amount equal to half of $gutter on either side to account for
their spacing.
[5] Removes bullet points if layout is a list
*/

.o-layout {
	align-items: flex-start;
	display: flex; /* [1] */
	flex-wrap: wrap;
	flex-grow: 1; /* [2] */
	margin: 0; /* [3] */
	padding: 0; /* [3] */
	margin-left: rem(-$gutter / 2); /* [4] */
	margin-right: rem(-$gutter / 2); /* [4] */
	list-style: none; /* [5] */
}

/*
[1] Required in order to combine fluid widths with fixed gutters.
*/

.o-layout__item {
	box-sizing: border-box; /* [1] */
	padding-left: rem($gutter / 2);
	padding-right: rem($gutter / 2);
	vertical-align: top;
	width: 100%;
	max-width: 100%;
	flex-basis: 0;
	flex-grow: 1;
}


// BREAK MODIFIER
//------------------------------------------------------------------------------------------------

/*
When columns have no width utilities applied, they size themselves
automatically. This modifier class allows you to create a column break,
and would typically be placed on an empty element. The same
result could be acheived by adding a u-width-12/12 class, but this is more
verbose as it explains developer intent via classname.

You could add responsive behavour to this by showing/hiding at the 
right breakpoint via utility classes.
*/

.o-layout__item--break {
	width: 100%;
	flex-basis: 100%;
}


// FIT MODIFIER
//------------------------------------------------------------------------------------------------

/*
Allows each layout item to size itself automatically on a single row by
dividing the space equally between the total number of items.
*/

.o-layout--fit {
	flex-wrap: nowrap;
}


// EQUAL HEIGHT MODIFIERS
//------------------------------------------------------------------------------------------------

/*
Makes each column have an equal height. Also includes modifiers for
individual columns.
*/

.o-layout--fit-height {
	align-items: stretch;
}

.o-layout__item--fit-height {
	align-self: stretch;
}

/*
With a fit-height modifier active, any child element
with 'o-layout__fill-column' or 'o-layout__fill-row' will expand to fill all available
space created by everything being equal height.
*/

.o-layout--fit-height,
.o-layout__item--fit-height {
	.o-layout__fill-column {
		display: flex;
		flex-grow: 1;
		flex-direction: column;
	}
	.o-layout__fill-row {
		display: flex;
		flex-grow: 1;
		flex-direction: row;
	}
}


// SPACING MODIFIERS
//--------------------------------------------------------------------------------------------------------------------------------------

/*
Tweak the spacing between individual columns.
*/

// Generate using settings.spacing
// Example o-layout--spacing-small
@each $sp-name, $sp-value in $spacing {
	@if $sp-name != 'none' {
		.o-layout--spacing-#{$sp-name} {
			margin-left: rem(-$sp-value / 2);
			margin-right: rem(-$sp-value / 2);
			& > .o-layout__item,
			& > .o-layout__item--flush:first-child {
				padding-left: rem($sp-value / 2);
			}
			& > .o-layout__item,
			& > .o-layout__item--flush:last-child {
				padding-right: rem($sp-value / 2);
			}
			& > .o-layout__item--flush:not(:first-child) {
				padding-left: 0;
			}
			& > .o-layout__item--flush:not(:last-child) {
				padding-right: 0;
			}
		}
	}
}

// Example o-layout--spacing-small@md
@each $bp-name, $bp-value in $mq-breakpoints {
	@include mq(#{$bp-name}) {
		@each $sp-name, $sp-value in $spacing {
			@if $sp-name != 'none' {
				.o-layout--spacing-#{$sp-name}\@#{$bp-name} {
					margin-left: rem(-$sp-value / 2);
					margin-right: rem(-$sp-value / 2);
					& > .o-layout__item,
					& > .o-layout__item--flush:first-child {
						padding-left: rem($sp-value / 2);
					}
					& > .o-layout__item,
					& > .o-layout__item--flush:last-child {
						padding-right: rem($sp-value / 2);
					}
					& > .o-layout__item--flush:not(:first-child) {
						padding-left: 0;
					}
					& > .o-layout__item--flush:not(:last-child) {
						padding-right: 0;
					}
				}
			}
		}
	}
}


// FLUSH MODIFIER
//------------------------------------------------------------------------------------------------

/*
Flush removes the gutter between layout items.
*/

/*
[1] Remove negative margins as we no longer have to absorb any paddings
from columns
*/

.o-layout--flush {
	margin-left: 0; /* [1] */
	margin-right: 0; /* [1] */
	& > .o-layout__item {
		padding-left: 0;
		padding-right: 0;
	}
}

/*
Flush modifiers doesn't cancel the relevant padding if a column is first or
last to prevent it being affected by the parents negative margin.
*/

.o-layout__item--flush { 
	&:not(:first-child) {
		padding-left: 0;
	}
	&:not(:last-child) {
		padding-right: 0;
	}
}