// ===================================================================
// Flexbox Grid Mixins (LibSass)
// Version 0.3.4
// Description: Sass Mixins to generate Flexbox grid
// Author: thingsym
// GitHub: https://github.com/thingsym/flexbox-grid-mixins
// MIT License
// ===================================================================

@charset 'utf-8';

$flexbox-grid-mixins-grid-type: skeleton !default;
$flexbox-grid-mixins-box-sizing: border-box !default;
$flexbox-grid-mixins-stack: margin-bottom !default;

@mixin grid($display: flex, $flex-direction: null, $flex-wrap: null, $flex-flow: null, $justify-content: null, $align-items: null, $align-content: null, $gutter: null, $gap: null, $row-gap: null, $column-gap: null)
{
	@if $flexbox-grid-mixins-box-sizing == 'border-box' or $flexbox-grid-mixins-box-sizing == 'content-box' {
		box-sizing: $flexbox-grid-mixins-box-sizing;
	}

	@if $display {
		display: $display;
	}

	@if $flex-direction {
		flex-direction: $flex-direction;
	}
	@if $flex-wrap {
		flex-wrap: $flex-wrap;
	}

	@if $flex-flow {
		flex-flow: $flex-flow;
	}

	@if $justify-content {
		justify-content: $justify-content;
	}
	@if $align-items {
		align-items: $align-items;
	}
	@if $align-content {
		align-content: $align-content;
	}

	@if $flexbox-grid-mixins-grid-type == skeleton {
		@if $gutter {
			margin-left: $gutter / 2 * -1;
			margin-right: $gutter / 2 * -1;
		}
	}

	@if $gap != null {
		@if length($gap) == 1 {
			gap: $gap;
		} @else if length($gap) == 2 {
			$row-gap: nth($gap, 1);
			$column-gap: nth($gap, 2);

			row-gap: $row-gap;
			column-gap: $column-gap;
		}
	} @else {
		row-gap: $row-gap;
		column-gap: $column-gap;
	}

	@content;
}

@mixin grid-col($col: null, $grid-columns: 12, $col-offset: null, $gutter: null, $gap: null, $row-gap: null, $column-gap: null, $align-self: null, $flex-grow: 0, $flex-shrink: 1, $flex-basis: auto, $order: null, $shorthand: true, $condense: false, $last-child: false, $width: null, $max-width: null, $min-width: null, $height: null, $max-height: null, $min-height: null)
{
	@if $flexbox-grid-mixins-box-sizing == 'border-box' or $flexbox-grid-mixins-box-sizing == 'content-box' {
		box-sizing: $flexbox-grid-mixins-box-sizing;
	}

	@if $gap != null {
		@if length($gap) == 1 {
			$row-gap: $gap;
			$column-gap: $gap;
		} @else if length($gap) == 2 {
			$row-gap: nth($gap, 1);
			$column-gap: nth($gap, 2);
		}
	}

	@if type-of($col) == number and unitless($col) == true {
		$flex-shrink: 0;
		$flex-basis: percentage($col / $grid-columns);

		@if $flexbox-grid-mixins-grid-type == skeleton {
			@if $gutter and unit($gutter) == '%' {
				$flex-basis: $flex-basis - $gutter;
			} @else if $gutter and unitless($gutter) == false {
				$flex-basis: calc( #{$flex-basis} - #{$gutter});
			}

			@if $column-gap and unit($column-gap) == '%' {
				$flex-basis: $flex-basis - $column-gap + $column-gap / $grid-columns * $col;
			} @else if $column-gap and unitless($column-gap) == false {
				@if ( $grid-columns != $col ) {
					$flex-basis: calc( #{$flex-basis} - #{$column-gap} + #{$column-gap / $grid-columns * $col});
				}
			}
		} @else if $flexbox-grid-mixins-grid-type == margin-offset {
			@if $gutter and unit($gutter) == '%' {
				$flex-basis: (100% - ($gutter * ($grid-columns / $col - 1))) / ($grid-columns / $col);
			} @else if $gutter and unitless($gutter) == false {
				$flex-basis: calc( #{$flex-basis} - #{$gutter * ($grid-columns / $col - 1) / ($grid-columns / $col)});
			}
		}

		@if $col-offset and unit($col-offset) == '%' {
			$flex-basis: $flex-basis + $col-offset;
		} @else if $col-offset and unitless($col-offset) == false {
			$flex-basis: calc( #{$flex-basis} + #{$col-offset});
		}
	} @else if type-of($col) == number and unitless($col) == false {
		$flex-grow: 0;
		$flex-shrink: 0;
		$flex-basis: $col;
	} @else if type-of($col) == string and $col == 'auto' {
		// flex: auto;
		$flex-grow: 1;
		$flex-shrink: 1;
		$flex-basis: auto;
	} @else if type-of($col) == string and $col == 'equal' {
		// flex: 1;
		$flex-grow: 1;
		$flex-shrink: 1;
		$flex-basis: 0;
	} @else if type-of($col) == string and $col == 'none' {
		// flex: none;
		$flex-grow: 0;
		$flex-shrink: 0;
		$flex-basis: auto;
	} @else if type-of($col) == string and $col == 'initial' {
		// flex: initial;
		$flex-grow: 0;
		$flex-shrink: 1;
		$flex-basis: auto;
	} @else if type-of($col) == string and $col == 'positive' {
		// positive number
		@if $flex-grow == 0 {
			$flex-grow: 1;
		}
		$flex-shrink: 0;
		$flex-basis: 0;
	}

	@if type-of($shorthand) == bool and $shorthand == true {
		flex: $flex-grow $flex-shrink $flex-basis;
	} @else {
		flex-basis: $flex-basis;
		flex-grow: $flex-grow;
		flex-shrink: $flex-shrink;
	}

	@if $align-self != null {
		align-self: $align-self;
	}

	@if type-of($order) == number {
		order: $order;
	}

	@if type-of($width) == bool and $width == true {
		width: $flex-basis;
	} @else if type-of($width) == number and unitless($width) == false {
		width: $width;
	} @else if type-of($width) == string and $width == 'auto' {
		width: auto;
	}

	@if type-of($max-width) == bool and $max-width == true {
		max-width: $flex-basis;
	} @else if type-of($max-width) == number and unitless($max-width) == false {
		max-width: $max-width;
	} @else if type-of($max-width) == string and $max-width == 'auto' {
		max-width: auto;
	}

	@if type-of($min-width) == bool and $min-width == true {
		min-width: $flex-basis;
	} @else if type-of($min-width) == number and unitless($min-width) == false {
		min-width: $min-width;
	} @else if type-of($min-width) == string and $min-width == 'auto' {
		min-width: auto;
	}

	@if $height != null {
		height: $height;
	}
	@if $max-height != null {
		max-height: $max-height;
	}
	@if $min-height != null {
		min-height: $min-height;
	}

	@if $gutter and unitless($gutter) == false {
		@if $flexbox-grid-mixins-grid-type == skeleton {
			margin-left: $gutter / 2;
			margin-right: $gutter / 2;
		} @else if $flexbox-grid-mixins-grid-type == margin-offset {
			@if type-of($last-child) == bool and $last-child == true {
				margin-right: 0;
			} @else {
				margin-right: $gutter;
			}
		}

		@if $condense == false {
			@if $flexbox-grid-mixins-stack == margin-top {
				margin-top: $gutter;
			} @else if $flexbox-grid-mixins-stack == margin-bottom {
				margin-bottom: $gutter;
			} @else if $flexbox-grid-mixins-stack == margin-both {
				margin-top: $gutter / 2;
				margin-bottom: $gutter / 2;
			}
		}
	}

	@content;
}