//------------------------------------------------------------------------------------------------
// 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.
*/

/*
<div class="o-layout">
	<div class="o-layout__item u-width-6/12">CONTENT</div>
	<div class="o-layout__item u-width-6/12">CONTENT</div>
</div>
*/


// 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;
}


// 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;
	}
}


// 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;
}

/*
This stretches the immediate content of a layout__item, and would
typically be used in combination with either of the above modifiers
*/

.o-layout__item--content-fit-height {
	display: flex;
	align-items: stretch;
}


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

/*
Tweak the spacing between individual columns.
*/

// Generate using settings.spacing
// Example o-layout--spacing-small
@each $sp-name, $sp-value in $spacing {
	.o-layout--spacing-#{$sp-name} {
		margin-left: rem(-$sp-value / 2);
		margin-right: rem(-$sp-value / 2);
		& > .o-layout__item {
			padding-left: rem($sp-value / 2);
			padding-right: rem($sp-value / 2);
		}
	}
}


// VERTICAL ALIGNMENT MODIFIERS
//------------------------------------------------------------------------------------------------

/*
Modifiers to change the vertical alignment of the whole layout or just
individual columns.
*/

.o-layout__item--top {
	align-self: flex-start;
}

.o-layout--bottom {
	align-items: flex-end;
}

.o-layout__item--bottom {
	align-self: flex-end;
}

.o-layout--middle {
	align-items: center;
}

.o-layout__item--middle {
	align-self: center;
}


// HORIZONTAL ALIGNMENT MODIFIERS
//------------------------------------------------------------------------------------------------

/*
Modifiers to change the horizontal alignment of the whole layout.
*/

.o-layout--right {
	justify-content: flex-end;
}

.o-layout--center {
	justify-content: center;
}