@use "sass:math";

@import "../_variables.scss";

// # Grid Rows and Columns
// -----------------------------------------------------------------------------

$fractions: (12);

@mixin widths($columns, $breakpoint: null) {
	// Loop through the number of columns for each denominator of our fractions.
	@each $denominator in $columns {

		// Begin creating a numerator for our fraction up until we hit the
		// denominator.
		@for $numerator from 1 through $denominator {
			.u-#{$numerator}of#{$denominator}#{$breakpoint} {
				width: math.div($numerator, $denominator) * 100% !important;
			}

			.u-offset-#{$numerator}of#{$denominator}#{$breakpoint} {
				margin-left: math.div($numerator, $denominator) * 100% !important;
			}
		}
	}
}



// Add classes for each of the $fractions in `variables.scss`
// e.g. .u-6of12, .u-8of12-lg, .u-9of12-md

// No suffix on classes for < small breakpoint
@include widths($fractions);

@each $name, $size in $breakpoints {
	@include respond-to(">#{$name}") {
		$suffix: "-#{$name}";
		@include widths($fractions, $suffix);
	}
}