.makeFlexGrid(@flexGridEnabled, @rowName) when (@flexGridEnabled = true) {
	.@{rowName} {
		clear: both;
		display: flex;
		flex-wrap: wrap;

		.@{rowName} {
			margin-left: -(@colGutter / 2);
			margin-right: -(@colGutter / 2);
		}

		&.flex-wrap-reverse {
			flex-wrap: wrap-reverse;
		}
		&.flex-row-reverse {
			flex-direction: row-reverse;
		}
		&.flex-column {
			flex-direction: column;
		}
		&.flex-column-reverse {
			flex-direction: column-reverse;
		}

		&.justify-content-center {
			justify-content: center;
		}
		&.justify-content-start {
			justify-content: flex-start;
		}
		&.justify-content-end {
			justify-content: flex-end;
		}
		&.justify-content-around {
			justify-content: space-around;
		}
		&.justify-content-between {
			justify-content: space-between;
		}

		&.align-items-start {
			align-items: flex-start;
		}
		&.align-items-end {
			align-items: flex-end;
		}
		&.align-items-center {
			align-items: center;
		}
		&.align-items-stretch {
			align-items: stretch;
		}
		&.align-items-baseline {
			align-items: baseline;
		}
		&.align-items-stretch {
			align-items: stretch;
		}

		.makeGrid(@gridEnabled, @colName, @offsetName, @orderName, @tinyName, @smallName, @mediumName, @largeName, @extraLargeName) when (@gridEnabled = true) {

			[class*="@{colName}"] {
				display: block;
				min-height: 1px;
				padding-left: (@colGutter / 2);
				padding-right: (@colGutter / 2);
				width: 100%;
				float: none;
				position: static;

				&.no-left-gutter {
					padding-left: 0;
				}

				&.no-right-gutter {
					padding-right: 0;
				}

				&.no-gutter {
					padding-left: 0;
					padding-right: 0;
				}
			}

			// Build a row of columns
			.makeRow(@spanName) {
				// Trim trailing - from span names
				@spanNameClean: replace(@spanName, "-$", "");
				@colWidth: percentage(((100 / @numColumns) / 100));

				&.flex-@{spanNameClean}-row {
					flex-direction: row;
				}
				&.flex-@{spanNameClean}-row-reverse {
					flex-direction: row-reverse;
				}
				&.flex-@{spanNameClean}-column {
					flex-direction: column;
				}
				&.flex-@{spanNameClean}-column-reverse {
					flex-direction: column-reverse;
				}

				&.justify-content-@{spanNameClean}-center {
					justify-content: center;
				}
				&.justify-content-@{spanNameClean}-start {
					justify-content: flex-start;
				}
				&.justify-content-@{spanNameClean}-end {
					justify-content: flex-end;
				}
				&.justify-content-@{spanNameClean}-around {
					justify-content: space-around;
				}
				&.justify-content-@{spanNameClean}-between {
					justify-content: space-between;
				}

				&.align-items-@{spanNameClean}-start {
					align-items: flex-start;
				}
				&.align-items-@{spanNameClean}-end {
					align-items: flex-end;
				}
				&.align-items-@{spanNameClean}-center {
					align-items: center;
				}
				&.align-items-@{spanNameClean}-stretch {
					align-items: stretch;
				}
				&.align-items-@{spanNameClean}-baseline {
					align-items: baseline;
				}
				&.align-items-@{spanNameClean}-stretch {
					align-items: stretch;
				}

				[class*="@{colName}"] {
					&.left-gutter-@{spanNameClean} {
						padding-left: @colGutter / 2;
					}

					&.no-left-gutter-@{spanNameClean} {
						padding-left: 0;
					}

					&.right-gutter-@{spanNameClean} {
						padding-right: @colGutter / 2;
					}

					&.no-right-gutter-@{spanNameClean} {
						padding-right: 0;
					}

					&.gutter-@{spanNameClean} {
						padding-left: @colGutter / 2;
						padding-right: @colGutter / 2;
					}

					&.no-gutter-@{spanNameClean} {
						padding-left: 0;
						padding-right: 0;
					}
				}

				.makeCols(@name, @span) when (@span > 0) {
					.@{colName}@{name}@{span} {
						width: @colWidth + (@colWidth * (@span - 1));
					}

					// If in bootstrap compatible mode
					.makeOffset(@colName) when (@colName = col-) {
						.@{colName}@{name}@{offsetName}@{span} {
							margin-left: @colWidth * @span;
						}

						.@{colName}@{name}@{orderName}@{span} {
							order: @span;
						}
					}
					// Else in fusionCSS
					.makeOffset(@colName) when not (@colName = col-) {
						.@{offsetName}@{name}@{span} {
							margin-left: @colWidth * @span;
						}

						.@{orderName}@{name}@{span} {
							order: @span;
						}
					}
					.makeOffset(@colName);

					.makeCols(@name, @span - 1);
				}

				.makeCols(@spanName, @numColumns);
			}

			.makeRow(@tinyName);

			@media (min-width: @breakpoint-s) {
				.makeRow(@smallName);
			}

			@media (min-width: @breakpoint-m) {
				.makeRow(@mediumName);
			}

			@media (min-width: @breakpoint-l) {
				.makeRow(@largeName);
			}

			@media (min-width: @breakpoint-x) {
				.makeRow(@extraLargeName);
			}
		}

		// Build the grid for fusionCSS
		.makeGrid(@fusionCSSStyle, span-, offset-, order-, t, s, m, l, x);

		// Build the grid for Bootstap 3
		.makeGrid(@bootstrap3Style, col-, offset-, order-, xs-, sm-, md-, lg-, xl-);
	}
}

.makeFlexGrid(@withFlexGrid, @flexRowName);

// If using float grid then we need to allow flex rows in rows or rows in flex rows
.nestFlexInFloat(@flexGridEnabled, @floatGridEnabled, @rowName) when (@flexGridEnabled = true) and (@floatGridEnabled = true) {
	.row .@{rowName},
	.@{rowName} .row {
		&:extend(.row .row);
	}
}
.nestFlexInFloat(@withFlexGrid, @withFloatGrid, @flexRowName);
