//
// Row
//
@mixin _gridle_common_row(
	$state : default
) {
	@include flexbox;
	@include flex-wrap(wrap);
	@include flex(0 1 auto);
}
@mixin gridle_row(
	$reverse : false
) {
	@include _gridle_call(row) {
		@if $reverse {
			@include flex-direction(row-reverse);
		} @else {
			@include flex-direction(row);
		}
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: -#{gridle_get_state_var(gutter-left)};
		margin-right: -#{gridle_get_state_var(gutter-right)};
	
		// handle row in no-gutter
		#{_gridle_get_generic_selector(no-gutter)} > & {
			margin-left: 0 !important;
			margin-right: 0 !important;
		}

		// do this only when not in generate phase
		// mean that we use the mixin directly
		@if _gridle_is_in_generate_phase() == false {
			@each $stateName, $state in gridle_get_states() {
				@include gridle_state($state) {	
					& #{str-replace(#{&},".state-#{gridle_get_state_var(name, $state)}","")} {
						margin-left: -#{gridle_get_state_var(gutter-left, $state)};
						margin-right: -#{gridle_get_state_var(gutter-right, $state)};
					}
				}
			}
		}
	}
}


//
// Col
//
@mixin _gridle_common_col(
	$state : default
) {
}
@mixin gridle_col(
	$reverse : false
) {
	@include _gridle_call(col) {
		@if $reverse {
			@include flex-direction(column-reverse);
		} @else {
			@include flex-direction(column);
		}
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: -#{gridle_get_state_var(gutter-left)};
		margin-right: -#{gridle_get_state_var(gutter-right)};

		// do this only when not in generate phase
		// mean that we use the mixin directly
		@if _gridle_is_in_generate_phase() == false {
			@each $stateName, $state in gridle_get_states() {
				@include gridle_state($state) {	
					& #{str-replace(#{&},".state-#{gridle_get_state_var(name, $state)}","")} {
						margin-left: -#{gridle_get_state_var(gutter-left, $state)};
						margin-right: -#{gridle_get_state_var(gutter-right, $state)};
					}
				}
			}
		}
	}
}


//
// Nowrap
//
@mixin _gridle_common_nowrap(
	$state : default
) {
	@include flex-wrap(nowrap);
	white-space:nowrap;

	> * {
		white-space: normal;
	}
}
@mixin gridle_nowrap() {
	@include _gridle_call(nowrap) {
	}
}


//
// Wrap
//
@mixin _gridle_common_wrap(
	$state : default
) {
	@include flex-wrap(wrap);
	white-space:normal;
}
@mixin gridle_wrap() {
	@include _gridle_call(wrap) {
	}
}


//
// Grid
//
@mixin _gridle_common_grid(
	$state : default
) {
	// @include flexbox;
	@include flex(0,0,auto);
	@include flex-direction(column); // reset direction for inner elements
	display: block;
	@if $gridle-vendor-prefix {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	}
	box-sizing: border-box;
	@include gridle_gutter();
	
}
@mixin gridle_grid(
	$columns,
	$context : null
) {
	@if $columns == grow {
		@include gridle_grid_grow();
	} @else if $columns == adapt {
		@include gridle_grid_adapt();
	} @else {

		@include _gridle_call(grid) {

			// vars
			$name : gridle_get_state_var(name);
			@if type-of($context) != number {
				$context : gridle_get_state_var(context);
			}
			$name-multiplicator : gridle_get_state_var(name-multiplicator);
			$gutter-left : gridle_get_state_var(gutter-left);
			$gutter-right : gridle_get_state_var(gutter-right);
			$column-width : gridle_get_state_var(column-width);
			
			// manage columns
			@if type-of($columns) != number and map-has-key($_gridle_columns, $columns) {
				// the columns is a saved one, get the context and column value
				$column : map-get($_gridle_columns, $columns);
				$context : map-get($column, context);
				$columns : map-get($column, columns);
			} @else if type-of($columns) == number {
				// check if we have a ratio
				@if $columns < 1 {
					$columns : $context / 100 * ($columns * 100);
				}
				$columns : $columns / $name-multiplicator;
			} @else {
				@error "the column #{$columns} does not exist...";
			}

			// width :
			$width : 0;
			@if $column-width {
				$width : $column-width * $columns;
			} @else {
				$width : percentage(1 / $context * $columns);
			}

			// if flex
			@include flex-basis($width);
			max-width : $width;
		}

	}
}

//
// Grid table
//
@mixin _gridle_common_grid_table(
	$state : default
) {
}
@mixin gridle_grid_table(
) {
	@include _gridle_call(grid-table) {
	}
}


//
// Row full
//
@mixin _gridle_common_row_full(
	$state : default
) {
}
@mixin gridle_row_full(
) {
	@include _gridle_call(row-full) {
		$direction : gridle_get_state_var(direction);
		width: 100vw;
		@if $direction == rtl {
			margin-right:50% !important;
			margin-left:0 !important;
			@if $gridle-vendor-prefix {
				-webkit-transform: translateX(50%);
				-moz-transition: translateX(50%);
				-ms-transform: translateX(50%);
				-o-transform: translateX(50%);
			}
			transform: translateX(50%);
		} @else {
			margin-left:50% !important;
			margin-right:0 !important;
			@if $gridle-vendor-prefix {
				-webkit-transform: translateX(-50%);
				-moz-transition: translateX(-50%);
				-ms-transform: translateX(-50%);
				-o-transform: translateX(-50%);
			}
			transform: translateX(-50%);
		}
		@if gridle_get_state_var(dir-attribute) {
			[dir="ltr"] & {
				margin-left:50% !important;
				margin-right:0 !important;
				@if $gridle-vendor-prefix {
					-webkit-transform: translateX(-50%);
					-moz-transition: translateX(-50%);
					-ms-transform: translateX(-50%);
					-o-transform: translateX(-50%);
				}
				transform: translateX(-50%);
			}
			[dir="rtl"] & {
				margin-right:50% !important;
				margin-left:0 !important;
				@if $gridle-vendor-prefix {
					-webkit-transform: translateX(50%);
					-moz-transition: translateX(50%);
					-ms-transform: translateX(50%);
					-o-transform: translateX(50%);
				}
				transform: translateX(50%);
			}
		}
	}
}


//
// grid adapt
//
@mixin _gridle_common_grid_adapt(
	$state : default
) {
	max-width: 100%;
	@include flexbox;
	@include flex(0,1,auto);
	@include flex-direction(column); // reset direction for inner elements
	@if $gridle-vendor-prefix {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	}
	box-sizing: border-box;
	@include gridle_gutter();
}
@mixin gridle_grid_adapt(
) {
	@include _gridle_call(grid-adapt) {
	}
}


//
// Grow
//
@mixin _gridle_common_grid_grow(
	$state : default
) {
	max-width: 100%;
	@include flexbox;
	@include flex(1,1,auto);
	@include flex-direction(column); // reset direction for inner elements	
	@if $gridle-vendor-prefix {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	}
	box-sizing: border-box;
	@include gridle_gutter();
	
}
@mixin gridle_grid_grow(
) {
	@include _gridle_call(grid-grow) {
	}
}


//
// Order
//
@mixin _gridle_common_order(
	$state : default
) {
}
@mixin gridle_order(
	$position
) {
	@include _gridle_call(order) {
		@include order($position);
	}
}


//
// Clear each
//
@mixin _gridle_common_clear_each(
	$state : default
) {
}
@mixin gridle_clear_each(
	$clearEach,
	$clearWhat : both
) {
	@include _gridle_call(clear-each) {
	}
}


//
// Align :
//
@mixin _gridle_common_row_align(
	$state : default
) {
}

@mixin gridle_row_align(
	$align : middle
) {
	@include _gridle_call(row-align) {
		@each $al in $align {
			@if $al == around {
				@include justify-content(space-around);
			} @else if $al == between {
				@include justify-content(space-between);
			} @else if $al == left {
				@include justify-content(flex-start);
			} @else if $al == center {
				@include justify-content(center);
			} @else if $al == right {
				@include justify-content(flex-end);
			} @else if $al == top {
				@include align-items(flex-start);
			} @else if $al == middle {
				@include align-items(center);
			} @else if $al == bottom {
				@include align-items(flex-end);
			}
		}
	}
}