// Essentially a copy from _grid-framework.scss and _grid.scss from bootstrap
// and determined which ones are criticals and which ones are not
// non-critical i.e offsets, pulls, push

// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `$grid-columns`.
// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin make-crit-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
		@for $i from (1 + 1) through $grid-columns {
				$list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
		}
		#{$list} {
				position: relative;
				// Prevent columns from collapsing when empty
				min-height: 1px;
				// Inner gutter via padding
				padding-left: ceil(($grid-gutter-width / 2));
				padding-right: floor(($grid-gutter-width / 2));
		}
}

// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin float-crit-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") {
		@for $i from (1 + 1) through $grid-columns {
				$list: "#{$list}, .col-#{$class}-#{$i}";
		}
		#{$list} {
				float: left;
		}
}

@mixin calc-crit-grid-column($index, $class, $type) {
		@if ($type==width) and ($index > 0) {
				.col-#{$class}-#{$index} {
						width: percentage(($index / $grid-columns));
				}
		}
		@if ($type==push) and ($index > 0) {
				.col-#{$class}-push-#{$index} {
						left: percentage(($index / $grid-columns));
				}
		}
		@if ($type==push) and ($index==0) {
				.col-#{$class}-push-0 {
						left: auto;
				}
		}
		@if ($type==pull) and ($index > 0) {
				.col-#{$class}-pull-#{$index} {
						right: percentage(($index / $grid-columns));
				}
		}
		@if ($type==pull) and ($index==0) {
				.col-#{$class}-pull-0 {
						right: auto;
				}
		}
		@if ($type==offset) {
				.col-#{$class}-offset-#{$index} {
						margin-left: percentage(($index / $grid-columns));
				}
		}
}

// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin loop-crit-grid-columns($columns, $class, $type) {
		@for $i from 0 through $columns {
				@include calc-crit-grid-column($i, $class, $type);
		}
}

// Create grid for specific class
@mixin make-crit-grid($class) {
		/* crit:start */
		@include float-crit-grid-columns($class);
		@include loop-crit-grid-columns($grid-columns, $class, width);
		/* crit:end */
		@include loop-crit-grid-columns($grid-columns, $class, pull);
		@include loop-crit-grid-columns($grid-columns, $class, push);
		@include loop-crit-grid-columns($grid-columns, $class, offset);
}

@mixin init-bootstrap-crit-grid() {
		/* crit:start */

			//
			// Grid system
			// --------------------------------------------------
			// Container widths
			//
			// Set the container width, and override it for fixed navbars in media queries.
			.container {
					@include container-fixed;
					@media (min-width: $screen-sm-min) {
							width: $container-sm;
					}
					@media (min-width: $screen-md-min) {
							width: $container-md;
					}
					@media (min-width: $screen-lg-min) {
							width: $container-lg;
					}
			}
			// Fluid container
			//
			// Utilizes the mixin meant for fixed width containers, but without any defined
			// width for fluid, full width layouts.
			.container-fluid {
					@include container-fixed;
			}
			// Row
			//
			// Rows contain and clear the floats of your columns.
			.row {
					@include make-row;
			}
			// Columns
			//
			// Common styles for small and large grid columns
			@include make-crit-grid-columns;

		/* crit:end */


		// Extra small grid
		//
		// Columns, offsets, pushes, and pulls for extra small devices like
		// smartphones.
		@include make-crit-grid(xs);
		// Small grid
		//
		// Columns, offsets, pushes, and pulls for the small device range, from phones
		// to tablets.
		@media (min-width: $screen-sm-min) {
				@include make-crit-grid(sm);
		}
		// Medium grid
		//
		// Columns, offsets, pushes, and pulls for the desktop device range.
		@media (min-width: $screen-md-min) {
				@include make-crit-grid(md);
		}
		// Large grid
		//
		// Columns, offsets, pushes, and pulls for the large desktop device range.
		@media (min-width: $screen-lg-min) {
				@include make-crit-grid(lg);
		}

}