/*
 *	This code was created for Printr B.V. It is open source under the formide-client package.
 *	Copyright (c) 2017, All rights reserved, http://printr.nl
 */


$layout-breakpoints: (
	md: 1024px,
	sm: 720px
) !default;

$layout-fractions: 1 2 3 4 5 !default;
$layout-gutter-size: 24px !default;


// Core layout component
//
// DO NOT apply dimension or offset utilities to the `layout` element. All cell
// widths and offsets should be applied to child layout cells.


// 	layout container
//	==========================================================================

//  All content must be contained within child `layout__item` elements.
//
//  1. Account for browser defaults of elements that might be the root node of
//     the component.

.layout {
	box-sizing: border-box;
	display: flex; /* 1 */
	flex-flow: row wrap;
	margin: 0; /* 1 */
	padding: 0; /* 1 */
	margin: 0 (-0.5 * $layout-gutter-size);
}

 // Modifier: center align all layout cells

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

// Modifier: right align all layout cells

.layout--alignRight {
	justify-content: flex-end;
}

// Modifier: middle-align layout cells

.layout--alignMiddle {
	align-items: center;
}

// Modifier: bottom-align layout cells

.layout--alignBottom {
	align-items: flex-end;
}

// Modifier: allow cells to equal distribute width
//
// 1. Provide all values to avoid IE10 bug with shorthand flex
//
//    Use `0%` to avoid bug in IE10/11 with unitless flex basis

.layout--fit > .layout__item {
	flex: 1 1 0%; /* 1 */
}

// Modifier: all cells match height of tallest cell in a row

.layout--equalHeight > .layout__item {
	display: flex;
}

// Modifier: gutters

.layout--withoutGutter {
	margin: 0;
}

.layout--withoutGutter > .layout__item {
	padding: 0;
}

 // Half gutter size
.layout--smallGutter {
	margin: 0 (-0.25 * $layout-gutter-size);
}

.layout--smallGutter > .layout__item {
	padding: 0 (0.25 * $layout-gutter-size);
}

// Double gutter size
.layout--largeGutter {
   margin: 0 (-1 * $layout-gutter-size);
}

.layout--largeGutter > .layout__item {
   padding: 0 (1 * $layout-gutter-size);
}


// 	layout item
//	==========================================================================

// No explicit width by default. Rely on combining `layout__item` with a dimension
// utility or a component class that extends 'layout'.
//
// 1. Set flex items to full width by default
// 2. Fix issue where elements with overflow extend past the
//    `layout__item` container

.layout__item {
	box-sizing: inherit;
	flex-basis: 100%; /* 1 */
	min-width: 0; /* 2 */
	padding: 0 (0.5 * $layout-gutter-size);
}

// Modifier: horizontally center one unit
// Set a specific unit to be horizontally centered. Doesn't affect
// any other units. Can still contain a child `layout` object.

.layout__item--center {
	margin: 0 auto;
}

.layout__item--left {
	-webkit-align-self: flex-start;
   align-self: flex-start;
}

.layout__item--right {
	margin-left: auto;
}

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


// 	layout widths
//	==========================================================================

// Specify the proportional width of an object.
//
// Add breakpoint names for responsive widths.
// Responsive widths are for the breakpoint and above.
//
// 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11

@mixin layout-widths ($columns, $bp: null) {

	// Loop through the number of columns for each denominator of our fractions.
	@each $denominator in $columns {

	    // Begin creating a numerator for our fraction up until we hit the denominator.
	    @for $numerator from 1 through $denominator {

			// Build a class in the format `.u-3/4`
			.u-#{$numerator}\/#{$denominator} {
				flex-basis: auto;
				width: ($numerator / $denominator) * 100% !important;
			}
		}
	}

	// If breakpoints are given, create columns for each one
	@if ($bp) {

		// Loop through the number of columns for each denominator of our fractions.
		@each $denominator in $columns {

		    // Begin creating a numerator for our fraction up until we hit the denominator.
		    @for $numerator from 1 through $denominator {

				@each $name, $value in $bp {

					// Build a class in the format `.u-3/4-[<breakpoint>]`
					// default sizing full
					.u-#{$numerator}\/#{$denominator}-#{$name} {
						@extend .u-full;
					}

					@media (min-width: $value) {
						.u-#{$numerator}\/#{$denominator}-#{$name} {
							flex-basis: auto;
							width: ($numerator / $denominator) * 100% !important;
						}
					}

				}
			}
		}
	}
}



/* Intrinsic widths
   ========================================================================== */

@mixin layout-widths-intrinsic ($bp: null) {

	// Make an element shrink wrap its content.

	.u-fit {
		flex-basis: auto;
	}

	// Make an element fill the remaining space.
	// 1. Be explicit to work around IE10 bug with shorthand flex
	// 2. IE10 ignores previous `flex-basis` value. Setting again here fixes

	.u-fill {
		flex: 1 1 0%; /* 1 */
		flex-basis: 0%; /* 2 */
	}

	// An alternative method to make an element fill the remaining space.
	// Distributes space based on the initial width and height of the element
	// http://www.w3.org/TR/css-flexbox/images/rel-vs-abs-flex.svg

	.u-fillAlt {
		flex: 1 1 auto;
		flex-basis: auto;
	}

	// Make an element the width of its parent.

	.u-full {
		width: 100%;
	}

	// Intrinsic widths at breakpoints
	@if ($bp) {

		@each $name, $value in $bp {

			@media (min-width: $value) {
				.u-fit-#{$name} {
					flex-basis: auto;
					width: auto !important;
				}

				.u-fill-#{$name} {
					flex: 1 1 0%;
					flex-basis: 0%;
					width: auto !important;
				}

				.u-fillAlt-#{$name} {
					flex: 1 1 auto;
					flex-basis: auto;
					width: auto !important;
				}

				.u-full-#{$name} {
					width: 100%;
				}
			}
		}
	}

}

// 	layout offsets
//	==========================================================================

// Specify the proportional offset before or after an element.
// Add breakpoint names for responsive offsets.

@mixin layout-offsets ($columns, $bp: null) {

	// Loop through the number of columns for each denominator of our fractions.
	@each $denominator in $columns {

	    // Begin creating a numerator for our fraction up until we hit the denominator.
	    @for $numerator from 1 through $denominator {

			// Build a class in the format `.u-after-3/4`
			.u-after-#{$numerator}\/#{$denominator} {
				margin-right: ($numerator / $denominator) * 100%;
			}
			.u-before-#{$numerator}\/#{$denominator} {
				margin-left: ($numerator / $denominator) * 100%;
			}


			// If breakpoints are given, create offsets for each one
			@if ($bp) {

				@each $name, $value in $bp {

					// Build a class in the format `.u-after-3/4-[<breakpoint>]`

					@media (min-width: $value) {
						.u-after-#{$numerator}\/#{$denominator}-#{$name} {
							margin-right: ($numerator / $denominator) * 100%;
						}
						.u-before-#{$numerator}\/#{$denominator}-#{$name} {
							margin-left: ($numerator / $denominator) * 100%;
						}
					}

				}
			}
		}
	}
}


@include layout-widths($layout-fractions, $layout-breakpoints);
@include layout-widths-intrinsic($layout-breakpoints);
@include layout-offsets($layout-fractions, $layout-breakpoints);



// floating
//	==========================================================================

.u-pullRight{
	float: right;
}

.u-pullLeft{
	float: left;
}

.u-pullNone{
	float: none;;
}