// =========================================================================================================================
// Spice - Grid system
// ------------------------------------------------------

@charset "utf-8";
@import "variables";
@import "utils";

/// This mixin is used by @include gridClasses to calculate widths of 
/// column elements but it can also
/// be used nested in selectors in the same way that you might use 
/// the susy ruby gem. This is useful if you dont need all the grid
/// classes or if you want to apply column widths to elements that
/// are dynamicly added on to the page - e.g. iframes.
/// @name gridColumns
/// @group grid
/// @param {Integer} amount [] Amount of grid columns
/// @param {Integer} col-count [12] Total column count
/// @param {Percentage} gutter-width [2%] Grid gutter width (percentage)
/// @param {Bool} last [false] Add margin-right attribute unless true
/// @example scss - Include
///  .main{
///  	@include gridColumns(8);
///  }
///  
///  .sidebar{
///  	@include gridColumns(4,12,2%,true);
///  }
///
/// @example css - Output
///  .main {
///    float: left;
///    position: relative;
///    width: 66%;
///    margin-right: 2%;
///  }
///  
///  .sidebar {
///    float: left;
///    position: relative;
///    width: 32%;
///  }
///

@mixin gridColumns($amount,$col-count:$grid-col-count,$gutter-width:$grid-gutter-width,$last:false){


	$amount : Num($amount);
	$col-count : Num($col-count);

	$gutter-total : ($col-count - 1) * $gutter-width;
	$remainder  : 100% - $gutter-total;
	$fill : ($amount - 1)*$gutter-width;
	$unit : $remainder / $col-count;

	float:left;
	position:relative;
	width:$unit*$amount+$fill;

	@if not $last{
		margin-right:$gutter-width;
	}
}

// ------------------------------------------------------

/// This mixin is used by @include gridClasses to calculate the margin
/// indents needed for the various push classes. as with @include gridColumns
/// this mixin can be used individually, nested in a selector to calculate
/// the margin width of an element.
/// @name gridIndent
/// @group grid
/// @param {Integer} amount [] Amount of grid columns to indent
/// @param {Integer} col-count [12] Total column count
/// @param {Percentage} gutter-width [2%] Grid gutter width (percentage)
/// @example scss - Include
///  .indented {
///      @include gridIndent(2);
///  }
///
/// @example css - Output
///  .indented {
///      margin-left: 17%;
///  }
///

@mixin gridIndent($amount,$col-count:$grid-col-count,$gutter-width:$grid-gutter-width){


	$amount : Num($amount);
	$col-count : Num($col-count);

	$gutter-total : ($col-count - 1) * $gutter-width;
	$remainder  : 100% - $gutter-total;
	$fill : ($amount - 1)*$gutter-width;
	$unit : $remainder / $col-count;

	margin-left:$unit*$amount+$fill+$gutter-width; 

}

// ------------------------------------------------------

/// This mixin is used by @include gridClasses to calculate the margin
/// outdents needed for the various pull classes. as with @include gridIndent
/// this mixin can be used individually, nested in a selector to calculate
/// the margin width of an element.
/// @name gridOutdent
/// @group grid
/// @param {Integer} amount [] Amount of grid columns to outdent
/// @param {Integer} col-count [12] Total column count
/// @param {Percentage} gutter-width [2%] Grid gutter width (percentage)
/// @example scss - Include
///  .oudented {
///  	@include gridOutdent(3);
///  }
///
/// @example css - Output
///  .oudented {
///    margin-left: auto;
///    margin-right: 25.5% !important;
///  }
///

@mixin gridOutdent($amount,$col-count:$grid-col-count,$gutter-width:$grid-gutter-width){


	$amount : Num($amount);
	$col-count : Num($col-count);

	$gutter-total : ($col-count - 1) * $gutter-width;
	$remainder  : 100% - $gutter-total;
	$fill : ($amount - 1)*$gutter-width;
	$unit : $remainder / $col-count;

	margin-left:auto;
	margin-right:($unit*$amount+$fill+$gutter-width)!important; 

}

// ------------------------------------------------------

/// This mixin genrates classes for a fluid grid system. Arguments allow you to define
/// the amount of columns you want, the guttering, the screen width at
/// which you want elements to stack and optional outdent/indent classes.
/// Default settings can be overwritten to suit your template. 
///
/// **Default Settings:**
/// - $grid-col-count     : 12;
/// - $grid-gutter-width  : 2%;
/// - $grid-stack-point   : 550px;
/// - $grid-mobile-first  : true;
/// - $grid-shift-classes : true;
/// @name gridClasses
/// @group grid
/// @param {Integer} col-count [12] Amount of grid columns
/// @param {Percentage} gutter-width [2%] Gutter width (must be a percentage)
/// @param {Pixel value} stack-point [550px] Breakpoint at which to stack columns
/// @param {Bool} mobile-first [true] Determines whether or not the grid is mobile first
/// @param {Bool} shift [true] Adds indent/outdent classes if true
/// @example scss - Include
///  @include gridClasses(12,2%,450px);
///
/// @example css - Output
///  .grid-row {
///    	min-height: 1%;
///  }
///  
///  .grid-row:after {
///    	content: "";
///    	display: table;
///    	clear: both;
///  }
///  
///  [class*="grid-col"] {
///    	margin-left: 0;
///    	margin-right: 0;
///    	width: 100%;
///  }
///  
///  @media (min-width: 450px) {
///    	.grid-col-1 {
///    	  	float: left;
///    	  	position: relative;
///    	  	width: 6.5%;
///    	  	margin-right: 2%;
///    	}
///    	.grid-col-indent-1 {
///    	  	margin-left: 8.5%;
///    	}
///    	.grid-col-outdent-1 {
///    	  	margin-left: auto;
///    	  	margin-right: 8.5% !important;
///    	}
///    	.grid-col-2 {
///    	  	float: left;
///    	  	position: relative;
///    	  	width: 15%;
///    	  	margin-right: 2%;
///    	}
///    	.grid-col-indent-2 {
///    	  	margin-left: 17%;
///    	}
///    	.grid-col-outdent-2 {
///    	  	margin-left: auto;
///    	  	margin-right: 17% !important;
///    	}
///    	.grid-col-3 {
///    	  	float: left;
///    	  	position: relative;
///    	  	width: 23.5%;
///    	  	margin-right: 2%;
///    	}
///    	.grid-col-indent-3 {
///    	  	margin-left: 25.5%;
///    	}
///    	.grid-col-outdent-3 {
///    	  	margin-left: auto;
///    	  	margin-right: 25.5% !important;
///    	}
///    	.grid-col-4 {
///    	  	float: left;
///    	  	position: relative;
///    	  	width: 32%;
///    	  	margin-right: 2%;
///    	}
///    	.grid-col-indent-4 {
///    	  	margin-left: 34%;
///    	}
///    	.grid-col-outdent-4 {
///    	  	margin-left: auto;
///    	  	margin-right: 34% !important;
///    	}
///    	.grid-col-5 {
///    	  	float: left;
///    	  	position: relative;
///    	  	width: 40.5%;
///    	  	margin-right: 2%;
///    	}
///    	.grid-col-indent-5 {
///    	  	margin-left: 42.5%;
///    	}
///    	.grid-col-outdent-5 {
///    	  	margin-left: auto;
///    	  	margin-right: 42.5% !important;
///    	}
///    	.grid-col-6 {
///    	  	float: left;
///    	  	position: relative;
///    	  	width: 49%;
///    	  	margin-right: 2%;
///    	}
///    	.grid-col-indent-6 {
///    	  	margin-left: 51%;
///    	}
///    	.grid-col-outdent-6 {
///    	  	margin-left: auto;
///    	  	margin-right: 51% !important;
///    	}
///    	.grid-col-7 {
///    	  	float: left;
///    	  	position: relative;
///    	  	width: 57.5%;
///    	  	margin-right: 2%;
///    	}
///    	.grid-col-indent-7 {
///    	  	margin-left: 59.5%;
///    	}
///    	.grid-col-outdent-7 {
///    	  	margin-left: auto;
///    	  	margin-right: 59.5% !important;
///    	}
///    	.grid-col-8 {
///    	  	float: left;
///    	  	position: relative;
///    	  	width: 66%;
///    	  	margin-right: 2%;
///    	}
///    	.grid-col-indent-8 {
///    	  	margin-left: 68%;
///    	}
///    	.grid-col-outdent-8 {
///    	  	margin-left: auto;
///    	  	margin-right: 68% !important;
///    	}
///    	.grid-col-9 {
///    	  	float: left;
///    	  	position: relative;
///    	  	width: 74.5%;
///    	  	margin-right: 2%;
///    	}
///    	.grid-col-indent-9 {
///    	  	margin-left: 76.5%;
///    	}
///    	.grid-col-outdent-9 {
///    	  	margin-left: auto;
///    	  	margin-right: 76.5% !important;
///    	}
///    	.grid-col-10 {
///    	  	float: left;
///    	  	position: relative;
///    	  	width: 83%;
///    	  	margin-right: 2%;
///    	}
///    	.grid-col-indent-10 {
///    	  	margin-left: 85%;
///    	}
///    	.grid-col-outdent-10 {
///    	  	margin-left: auto;
///    	  	margin-right: 85% !important;
///    	}
///    	.grid-col-11 {
///    	  	float: left;
///    	  	position: relative;
///    	  	width: 91.5%;
///    	  	margin-right: 2%;
///    	}
///    	.grid-col-indent-11 {
///    	  	margin-left: 93.5%;
///    	}
///    	.grid-col-outdent-11 {
///    	  	margin-left: auto;
///    	  	margin-right: 93.5% !important;
///    	}
///    	.grid-col-12 {
///    	  	float: left;
///    	  	position: relative;
///    	  	width: 100%;
///    	  	margin-right: 2%;
///    	}
///    	[class*="grid-col"]:last-child {
///    	  	margin-right: 0;
///    	}
///  }
///  
/// @example markup - HTML
///  <div class="grid-row grid-example">
///  
///  	<div class="grid-col-3">
///  		<span>Grid 3</span>
///  	</div>
///  
///  	<div class="grid-col-3">
///  		<span>Grid 3</span>
///  	</div>
///  
///  	<div class="grid-col-3">
///  		<span>Grid 3</span>
///  	</div>
///  
///  	<div class="grid-col-3">
///  		<span>Grid 3</span>
///  	</div>
///  
///  </div>
///  
///  
///  <div class="grid-row grid-example">
///  
///  	<div class="grid-col-4">
///  		<span>Grid 4</span>
///  	</div>
///  
///  	<div class="grid-col-4">
///  		<span>Grid 4</span>
///  	</div>
///  
///  	<div class="grid-col-4">
///  		<span>Grid 4</span>
///  	</div>
///  
///  </div>
///  
///  <div class="grid-row grid-example">
///  
///  	<div class="grid-col-2">
///  		<span>Grid 2</span>
///  	</div>
///  
///  	<div class="grid-col-7">
///  		<span>Grid 7</span>
///  	</div>
///  
///  	<div class="grid-col-3">
///  		<span>Grid 3</span>
///  	</div>
///  
///  </div>
///  
///  
///  <div class="grid-row grid-example">
///  
///  	<div class="grid-col-12">
///  		<span>Grid 12</span>
///  	</div>
///  
///  </div>
///  
///  <div class="grid-row grid-example">
///  
///  	<div class="grid-col-4 grid-col-indent-2">
///  		<span>Grid 4 | push 2</span>
///  	</div>
///  
///  	<div class="grid-col-4 grid-col-outdent-2">
///  		<span>Grid 4 | pull 2</span>
///  	</div>
///  
///  </div>

@mixin gridClasses ($col-count:$grid-col-count,$gutter-width:$grid-gutter-width,$stack-point:$grid-stack-point,$mobile-first:$grid-mobile-first,$shift:$grid-shift-classes){


	.grid-row {

		min-height: 1%;

		&:after {
	        content: "";
	        display: table;
	        clear: both;
	    }
	}

	
	@if not $mobile-first {

		@for $i from 1 through $col-count{

			.grid-col-#{$i}{
				@include gridColumns($i,$col-count,$gutter-width);
			}

			@if $shift and $i != $col-count{

				.grid-col-indent-#{$i}{
					@include gridIndent($i,$col-count,$gutter-width)
				}

				.grid-col-outdent-#{$i}{
					@include gridOutdent($i,$col-count,$gutter-width)
				}

			}
		}

		[class*="grid-col"]:last-child{
			margin-right:0;
		}

		@include breakPoint($stack-point,'max'){


			[class*="grid-col"]{
				margin-left: 0;
				margin-right: 0;
				width: 100%;
			}
		}
	}

	@else {

		[class*="grid-col"]{
			margin-left: 0;
			margin-right: 0;
			width: 100%;
		}

		@include breakPoint($stack-point,"min"){


			@for $i from 1 through $col-count{

				.grid-col-#{$i}{
					@include gridColumns($i,$col-count,$gutter-width);
				}

				@if $shift and $i != $col-count{

					.grid-col-indent-#{$i}{
						@include gridIndent($i,$col-count,$gutter-width)
					}

					.grid-col-outdent-#{$i}{
						@include gridOutdent($i,$col-count,$gutter-width)
					}
				}
			}

			[class*="grid-col"]:last-child{
				margin-right:0;
			}
		}
	}
}

// ------------------------------------------------------

/// Add grid system styles to a list of elements. Arguments allow you to control the 
/// amont of blocks to display on a row, the grid column count, the gutter width, the screen width at 
/// which the elements will stack on top of each other.
/// @name griddedList
/// @group grid
/// @param {Integer} count [] The amount of blocks to display on a row
/// @param {Integer} cols [12] Total column count
/// @param {Percentage} gutter-width [2%] Grid gutter width 
/// @param {Pixel value} stack-point [550px] Breakpoint at which to stack columns
/// @example scss - Include
///  .grid-row{
///  
///  	@include clearFix;
///  }
///  
///  @include griddedList(3);
///
/// @example css - Output
///  .grid-row {
///    	min-height: 1%;
///  }
///  
///  .grid-row:after {
///    	content: "";
///    	display: table;
///    	clear: both;
///  }
///  
///  .gridded-list {
///    	float: left;
///    	position: relative;
///    	width: 100%;
///    	margin-right: 2%;
///    	margin-right: 0;
///  }
///  
///  @media (min-width: 550px) {
///    	.gridded-list {
///    	  	float: left;
///    	  	position: relative;
///    	  	width: 32%;
///    	  	margin-right: 2%;
///    	}
///    	.gridded-list:nth-child(2n+2) {
///    	  	margin-right: 0;
///    	}
///  }
///
/// @example markup - HTML
///  <div class="grid-row grid-example">
///  	
///  	<div class="gridded-list">
///  		<span>Gridded list</span>
///  	</div>
///  	<div class="gridded-list">
///  		<span>Gridded list</span>
///  	</div>
///  	<div class="gridded-list">
///  		<span>Gridded list</span>
///  	</div>
///  	<div class="gridded-list">
///  		<span>Gridded list</span>
///  	</div>
///  	<div class="gridded-list">
///  		<span>Gridded list</span>
///  	</div>
///  	<div class="gridded-list">
///  		<span>Gridded list</span>
///  	</div>
///  	<div class="gridded-list">
///  		<span>Gridded list</span>
///  	</div>
///  	<div class="gridded-list">
///  		<span>Gridded list</span>
///  	</div>
///  	<div class="gridded-list">
///  		<span>Gridded list</span>
///  	</div>
///  	<div class="gridded-list">
///  		<span>Gridded list</span>
///  	</div>
///  	<div class="gridded-list">
///  		<span>Gridded list</span>
///  	</div>
///  	<div class="gridded-list">
///  		<span>Gridded list</span>
///  	</div>
///  	<div class="gridded-list">
///  		<span>Gridded list</span>
///  	</div>
///  	<div class="gridded-list">
///  		<span>Gridded list</span>
///  	</div>
///  	<div class="gridded-list">
///  		<span>Gridded list</span>
///  	</div>
///  	<div class="gridded-list">
///  		<span>Gridded list</span>
///  	</div>
///  	<div class="gridded-list">
///  		<span>Gridded list</span>
///  	</div>
///  	<div class="gridded-list">
///  		<span>Gridded list</span>
///  	</div>
///  	<div class="gridded-list">
///  		<span>Gridded list</span>
///  	</div>
///  	<div class="gridded-list">
///  		<span>Gridded list</span>
///  	</div>
///  	<div class="gridded-list">
///  		<span>Gridded list</span>
///  	</div>
///  	<div class="gridded-list">
///  		<span>Gridded list</span>
///  	</div>
///  	<div class="gridded-list">
///  		<span>Gridded list</span>
///  	</div>
///  	<div class="gridded-list">
///  		<span>Gridded list</span>
///  	</div>
///  
///  </div>  

@mixin griddedList($count,$cols:$grid-col-count,$gutter-width:$grid-gutter-width,$stackpoint:$grid-stack-point){

	$width : $cols / $count;
	$nth   :  "#{$count}n+#{$count}" ;

	.gridded-list{

		@include gridColumns($cols,$cols,$gutter-width);
		margin-right:0;

		@include breakPoint($stackpoint,'min'){
		
			@include gridColumns($width,$cols,$gutter-width);

			&:nth-child(#{$nth}){

				margin-right:0;
			}
		}
	}
}

/// When using grid classes this mixin will allow you to specify a limit 
/// for the amount of elements in a row.
/// @name gridRowLimit
/// @group grid
/// @param {Integer} limit [] The amout of elements to limit to a single row
/// @example scss - Include
///  .list{
///  	
///  	@include gridColumns(3);
///  	@include gridRowLimit(4);
///  }
/// @example css - Output
///  .list {
///  	float: left;
///  	position: relative;
///  	width: 23.5%;
///  	margin-right: 2%;
///  }
///  
///  .list:nth-child(4n + 4) {
///    	margin-right: 0;
///  }

@mixin gridRowLimit($limit){
	&:nth-child(#{$limit}n + #{$limit}){
		margin-right:0;
	}
}

@mixin gridAddMargin($n,$gutter-width:$grid-gutter-width){
	&:nth-child(#{$n}n + #{$n}){
		margin-right:$gutter-width;
	}
}

@mixin flexGridColumns($amount,$col-count:$grid-col-count,$gutter-width:$grid-gutter-width){
	
	
		$amount : Num($amount);
		$col-count : Num($col-count);
	
		$gutter-total : ($col-count - 1) * $gutter-width;
		$remainder  : 100% - $gutter-total;
		$fill : ($amount - 1)*$gutter-width;
		$unit : $remainder / $col-count;
	
		width:$unit*$amount+$fill;

	}

// ------------------------------------------------------

/// This mixin genrates classes for a flex-box grid system. Arguments allow you to define
/// the amount of columns you want, the guttering, the screen width at
/// which you want elements to stack and optional outdent/indent classes.
/// Default settings can be overwritten to suit your template. 
///
/// **Default Settings:**
/// - $grid-col-count     : 12;
/// - $grid-gutter-width  : 2%;
/// - $grid-stack-point   : 550px;
/// - $grid-shift-classes : true;
/// @name flexGrid
/// @group grid
/// @param {Integer} col-count [12] Amount of grid columns
/// @param {Percentage} gutter-width [2%] Gutter width (must be a percentage)
/// @param {Pixel value} stack-point [550px] Breakpoint at which to stack columns
/// @param {Bool} mobile-first [true] Determines whether or not the grid is mobile first
/// @param {Bool} shift [true] Adds indent/outdent classes if true
/// @example scss - Include
///  @include flexGrid(12,2%,450px);
///
/// @example css - Output
/// .flex-grid-row {
/// 	display: inline;
///   }
///   
///   @media (min-width: 550px) {
/// 	.flex-grid-row {
/// 	  display: flex;
/// 	}
/// 	.flex-grid-col-1 {
/// 	  width: 6.5%;
/// 	}
/// 	.flex-grid-col-indent-1 {
/// 	  margin-left: 8.5%;
/// 	}
/// 	.flex-grid-col-outdent-1 {
/// 	  margin-left: auto;
/// 	  margin-right: 8.5% !important;
/// 	}
/// 	.flex-grid-col-2 {
/// 	  width: 15%;
/// 	}
/// 	.flex-grid-col-indent-2 {
/// 	  margin-left: 17%;
/// 	}
/// 	.flex-grid-col-outdent-2 {
/// 	  margin-left: auto;
/// 	  margin-right: 17% !important;
/// 	}
/// 	.flex-grid-col-3 {
/// 	  width: 23.5%;
/// 	}
/// 	.flex-grid-col-indent-3 {
/// 	  margin-left: 25.5%;
/// 	}
/// 	.flex-grid-col-outdent-3 {
/// 	  margin-left: auto;
/// 	  margin-right: 25.5% !important;
/// 	}
/// 	.flex-grid-col-4 {
/// 	  width: 32%;
/// 	}
/// 	.flex-grid-col-indent-4 {
/// 	  margin-left: 34%;
/// 	}
/// 	.flex-grid-col-outdent-4 {
/// 	  margin-left: auto;
/// 	  margin-right: 34% !important;
/// 	}
/// 	.flex-grid-col-5 {
/// 	  width: 40.5%;
/// 	}
/// 	.flex-grid-col-indent-5 {
/// 	  margin-left: 42.5%;
/// 	}
/// 	.flex-grid-col-outdent-5 {
/// 	  margin-left: auto;
/// 	  margin-right: 42.5% !important;
/// 	}
/// 	.flex-grid-col-6 {
/// 	  width: 49%;
/// 	}
/// 	.flex-grid-col-indent-6 {
/// 	  margin-left: 51%;
/// 	}
/// 	.flex-grid-col-outdent-6 {
/// 	  margin-left: auto;
/// 	  margin-right: 51% !important;
/// 	}
/// 	.flex-grid-col-7 {
/// 	  width: 57.5%;
/// 	}
/// 	.flex-grid-col-indent-7 {
/// 	  margin-left: 59.5%;
/// 	}
/// 	.flex-grid-col-outdent-7 {
/// 	  margin-left: auto;
/// 	  margin-right: 59.5% !important;
/// 	}
/// 	.flex-grid-col-8 {
/// 	  width: 66%;
/// 	}
/// 	.flex-grid-col-indent-8 {
/// 	  margin-left: 68%;
/// 	}
/// 	.flex-grid-col-outdent-8 {
/// 	  margin-left: auto;
/// 	  margin-right: 68% !important;
/// 	}
/// 	.flex-grid-col-9 {
/// 	  width: 74.5%;
/// 	}
/// 	.flex-grid-col-indent-9 {
/// 	  margin-left: 76.5%;
/// 	}
/// 	.flex-grid-col-outdent-9 {
/// 	  margin-left: auto;
/// 	  margin-right: 76.5% !important;
/// 	}
/// 	.flex-grid-col-10 {
/// 	  width: 83%;
/// 	}
/// 	.flex-grid-col-indent-10 {
/// 	  margin-left: 85%;
/// 	}
/// 	.flex-grid-col-outdent-10 {
/// 	  margin-left: auto;
/// 	  margin-right: 85% !important;
/// 	}
/// 	.flex-grid-col-11 {
/// 	  width: 91.5%;
/// 	}
/// 	.flex-grid-col-indent-11 {
/// 	  margin-left: 93.5%;
/// 	}
/// 	.flex-grid-col-outdent-11 {
/// 	  margin-left: auto;
/// 	  margin-right: 93.5% !important;
/// 	}
/// 	.flex-grid-col-12 {
/// 	  width: 100%;
/// 	}
/// 	[class*="flex-grid-col"] {
/// 	  margin-right: 2%;
/// 	}
/// 	[class*="flex-grid-col"]:last-child {
/// 	  margin-right: 0;
/// 	}
///   }
///  
/// @example markup - HTML
///  <div class="flex-grid-row grid-example">
///  
///  	<div class="flex-grid-col-3">
///  		<span>Grid 3</span>
///  	</div>
///  
///  	<div class="flex-grid-col-3">
///  		<span>Grid 3</span>
///  	</div>
///  
///  	<div class="flex-grid-col-3">
///  		<span>Grid 3</span>
///  	</div>
///  
///  	<div class="flex-grid-col-3">
///  		<span>Grid 3</span>
///  	</div>
///  
///  </div>
///  
///  
///  <div class="flex-grid-row grid-example">
///  
///  	<div class="flex-grid-col-4">
///  		<span>Grid 4</span>
///  	</div>
///  
///  	<div class="flex-grid-col-4">
///  		<span>Grid 4</span>
///  	</div>
///  
///  	<div class="flex-grid-col-4">
///  		<span>Grid 4</span>
///  	</div>
///  
///  </div>
///  
///  <div class="flex-grid-row grid-example">
///  
///  	<div class="flex-grid-col-2">
///  		<span>Grid 2</span>
///  	</div>
///  
///  	<div class="flex-grid-col-7">
///  		<span>Grid 7</span>
///  	</div>
///  
///  	<div class="flex-grid-col-3">
///  		<span>Grid 3</span>
///  	</div>
///  
///  </div>
///  
///  
///  <div class="flex-grid-row grid-example">
///  
///  	<div class="flex-grid-col-12">
///  		<span>Grid 12</span>
///  	</div>
///  
///  </div>
///  
///  <div class="flex-grid-row grid-example">
///  
///  	<div class="flex-grid-col-4 flex-grid-col-indent-2">
///  		<span>Grid 4 | push 2</span>
///  	</div>
///  
///  	<div class="flex-grid-col-4 flex-grid-col-outdent-2">
///  		<span>Grid 4 | pull 2</span>
///  	</div>
///  
///  </div>

@mixin flexGrid($col-count:$grid-col-count, $gutter-width:$grid-gutter-width, $stack-point:$grid-stack-point, $shift:$grid-shift-classes) {
	.flex-grid-row {
		display: inline;
	}

	@include breakPoint($stack-point,"min"){

		.flex-grid-row {
			display: flex;
		}
		
		@for $i from 1 through $col-count{

			.flex-grid-col-#{$i}{
				@include flexGridColumns($i,$col-count,$gutter-width);
			}

			@if $shift and $i != $col-count{
				
				.flex-grid-col-indent-#{$i}{
					@include gridIndent($i,$col-count,$gutter-width);
				}

				.flex-grid-col-outdent-#{$i}{
					@include gridOutdent($i,$col-count,$gutter-width);
				}
			}
		}
		
		[class*="flex-grid-col"] {
			margin-right: $grid-gutter-width;
	
			&:last-child {
				margin-right:0;
			}
		}
	}
}
