// grid.scss v0.1-dev | @ajlkn | MIT licensed */

// Mixins.

	/// Initializes grid classes.
	/// @param {mixed} $gutters Gutters (either a single number to set both column/row gutters, or a list to set them individually).
	/// @param {string} $suffix Optional column class suffix.
	/// @param {list} $override Optional list of column classes to override.
	@mixin grid($gutters: 1.5em, $suffix: '', $override: ()) {

		// Initialize.
			$cols: 12;
			$multipliers: 0, 0.25, 0.5, 1, 1.50, 2.00;
			$unit: 100% / $cols;
			$suffixes: join($override, ($suffix));

			// Gutters.
				$guttersCols: null;
				$guttersRows: null;

				@if (type-of($gutters) == 'list') {

					$guttersCols: nth($gutters, 1);
					$guttersRows: nth($gutters, 2);

				}
				@else {

					$guttersCols: $gutters;
					$guttersRows: 0;

				}

		// Row.
			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;

				// Columns.
					> * {
						box-sizing: border-box;
					}

				// Gutters.
					&.gtr-uniform {
						> * {
							> :last-child {
								margin-bottom: 0;
							}
						}
					}

			}

		// Step through suffixes.
			@each $suffix in $suffixes {

				// Suffix.
					@if ($suffix != '') {
						$suffix: '-' + $suffix;
					}
					@else {
						$suffix: '';
					}

				// Row.
					.row {

						// Important.
							> .imp#{$suffix} {
								order: -1;
							}

						// Columns, offsets.
							@for $i from 1 through $cols {
								> .col-#{$i}#{$suffix} {
									width: $unit * $i;
								}

								> .off-#{$i}#{$suffix} {
									margin-left: $unit * $i;
								}
							}

						// Step through multipliers.
							@each $multiplier in $multipliers {

								// Gutters.
									$class: null;

									@if ($multiplier != 1) {
										$class: '.gtr-' + ($multiplier * 100);
									}

									&#{$class} {
										margin-top: ($guttersRows * $multiplier * -1);
										margin-left: ($guttersCols * $multiplier * -1);

										> * {
											padding: ($guttersRows * $multiplier) 0 0 ($guttersCols * $multiplier);
										}

										// Uniform.
											&.gtr-uniform {
												margin-top: $guttersCols * $multiplier * -1;

												> * {
													padding-top: $guttersCols * $multiplier;
												}
											}

									}

							}

					}

			}

	}