/**
 * Grid Mixins
 * @Author 瞿龙俊 - qulongjun@shine.design
 * @Date 2020-03-22 13:02
 */
@mixin shine-grid-generate($mode) {
	$mode-class: '';
	$mode-dir: '';

	// Grid mode
	@if ($mode == general) {
		$mode-class: ":not(.#{$classPrefix}-grid--desktop):not(.#{$classPrefix}-grid--desktop-and-tablet):not(.#{$classPrefix}-grid--tablet):not(.#{$classPrefix}-grid--tablet-and-mobile):not(.#{$classPrefix}-grid--mobile)";
	} @else {
		$mode-class: ".#{$classPrefix}-grid--" + $mode;
		$mode-dir: "-" + $mode;
	}

	// Horizontal grid
	.#{$classPrefix}-grid.#{$classPrefix}-grid--hor#{$mode-dir}#{$mode-class} {
		display: flex;
		flex-direction: column;

		&.#{$classPrefix}-grid--root {
			flex: 1;
			-ms-flex: 1 0 0px; // IE10-11 fix
		}

		> .#{$classPrefix}-grid__item {
			flex: none;

			&.#{$classPrefix}-grid__item--fluid,
			&.#{$classPrefix}-grid__item--fluid#{$mode-dir} {
				flex: 1 0 auto;
				//-ms-flex: 1 0 0px;  // IE10-11 fix
			}
		}

		// flex ordering
		@for $i from 1 through 12 {
			> .#{$classPrefix}-grid__item.#{$classPrefix}-grid__item--order-#{$i}#{$mode-dir} {
				order: $i;
			}
		}
	}

	// Vertical grid
	.#{$classPrefix}-grid.#{$classPrefix}-grid--ver#{$mode-dir}#{$mode-class} {
		display: flex;
		flex-direction: row;

		&.#{$classPrefix}-grid--root {
			flex: 1;
			-ms-flex: 1 0 0px;  // IE10-11 fix
		}

		> .#{$classPrefix}-grid__item {
			flex: 0 0 auto;

			&.#{$classPrefix}-grid__item--fluid,
			&.#{$classPrefix}-grid__item--fluid#{$mode-dir} {
				flex: 1 auto;
				-ms-flex: 1 0 0px;  // IE10-11 fix
				min-width: 0;

				@include shine-hack-ie {
					min-width: none;  // IE10-11 fix
				}
			}
		}

		// flex ordering
		@for $i from 1 through 12 {
			> .#{$classPrefix}-grid__item.#{$classPrefix}-grid__item--order-#{$i}#{$mode-dir} {
				order: $i;
			}
		}
	}

	// Grid item order
	.#{$classPrefix}-grid {
		// horizontal items aligment
		&.#{$classPrefix}-grid--center {
			align-content: center;
		}

		&.#{$classPrefix}-grid--stretch {
			align-items: stretch;
		}

		// vertical item alignment
		> .#{$classPrefix}-grid__item {
			max-width:100%;

			&.#{$classPrefix}-grid__item--top {
				align-self: flex-start;
			}

			&.#{$classPrefix}-grid__item--middle {
				align-self: center;
			}


			&.#{$classPrefix}-grid__item--bottom {
				align-self: flex-end;
			}
		}

		// flex ordering
		@for $i from 1 through 12 {
			> .#{$classPrefix}-grid__item.#{$classPrefix}-grid__item--order-#{$i} {
				order: $i;
			}
		}
	}
}