// Flex Layout mixins

// import necessary libraries
@import 'flexbox';
@import 'media-queries';


// :: Layout container
// For general page layout
// For individual components or pieces of a layout, use flexboxes instead

// To use:
// include mixin 'layout' or placeholder '%layout' on your parent container

// Use classes '.sidebar', '.right.sidebar' and '.workspace' to layout your page

// Column height: equal or collapse (to content-height)
// Vertical Alignment applies to unequal height columns
// Gutter width determines how much gutter wil appear between layout-cells
@mixin layout($gutter-width: 1em, $column-height: equal, $vertical-alignment: top) {

	& > * {
		display: block;

		margin: 0;

		@include max-screen-size(medium) {

			margin: 0 0 1em;

			&:last-child {
				margin: 0;
			}

			&.sidebar {
				display: block;
				margin-right: 0;

				&.right {
					margin-left: 0;
				}
			}
		}
	}

	@include min-screen-size(medium) {

		@include flexbox;
		@include flex-wrap(wrap);
		@include flex-direction(row);

		& > * {

			&:not(.sidebar) {
				@include flex;
			}

			margin: {
				top: 0;
				right: ($gutter-width / 2);
				left: ($gutter-width / 2);
			}

			&:first-child {
				margin-left: 0;
			}
			&:last-child {
				margin-right: 0;
			}
		}

	}

	@if $column-height == equal {
		@include align-items(initial);
	} @else if $column-height == collapse {
		@if $vertical-alignment == top {
			@include align-items(flex-start);
		} @else if $vertical-alignment == bottom {
			@include align-items(flex-end);
		} @else if $vertical-alignment == center {
			@include align-items(center);
		} @else {
			@warn "`#{$vertical-alignment}` is not a valid alignment value.";
		}
	} @else {
		@warn "`#{$column-height}` is not a valid layout column height parameter.";
	}

	@content;
}

// Placeholder helps avoid repetition of code, use wisely.
%layout { @include layout; }

// :: Customize Layout Cell
// Use on individual cells inside a layout container to customize their properties

// Cell widths: one-quarter, one-third, half, full, or custom (percentage)

// Default gutters: 1em (.5em per side)

@mixin layout-cell($width: default, $display-order: inherit, $gutter-width: 1em) {

	margin: 0 0 1em;

	@include min-screen-size(medium) {
		margin: 0 ($gutter-width / 2);
	}

	@if $width == default {
		@extend %flex;
	} @else if $width == one-quarter {
		@include flex(0, 0, calc(25% - (#{$gutter-width} * .75)));
	} @else if $width == one-third {
		@include flex(0, 0, calc((100 / 3 * 1%) - (#{$gutter-width} * ( 2 / 3 ))));
	} @else if $width == half {
		@include flex(0, 0, calc(50% - (#{$gutter-width} * .5)));
	} @else if $width == full {
		@include flex(1, 0, 100%);
		margin-left: 0;
		margin-right: 0;
	} @else {
		@include flex(0, 0, $width);
	}

	@include order($display-order);

	@content;
}