//------------------------------------------------------------------------------------------------
// WIDTHS
//------------------------------------------------------------------------------------------------

/*
Utility classes to provide fluid widths to any element they're applied to. Most commonly used in
conjunction with the grid system object 'o-layout', but can be used with anything.

By default, only stand width utility classes are rendered, but you can enable other secondary
classes as your usage requires.
*/


// VARIABLES
//------------------------------------------------------------------------------------------------

$compile-offsets: false !default;


// WIDTHS MIXIN
//------------------------------------------------------------------------------------------------

@mixin create-widths($width-sets, $breakpoint-suffix: null, $breakpoint-key: null) {

	/*
	[1] Reset margin-left to reset any offsets so we don't have to manually
	disable them with another class.
	*/

	$breakpoint-label: '';
	@if($breakpoint-suffix) {
		$breakpoint-label: '@#{$breakpoint-key}';
	}

	@for $i from 1 through $width-sets {
		@if $i == 12 {
			.u-width-#{$i}\/#{$width-sets}#{$breakpoint-suffix}#{$breakpoint-key},
			.u-width-full#{$breakpoint-suffix}#{$breakpoint-key} {
				width: ($i / $width-sets) * 100% !important;
				max-width: ($i / $width-sets) * 100% !important;
				flex-basis: ($i / $width-sets) * 100% !important;
				margin-left: 0 !important; /* [1] */
				flex-grow: 1 !important;
			}
		}
		@else {
			.u-width-#{$i}\/#{$width-sets}#{$breakpoint-suffix}#{$breakpoint-key} {
				width: ($i / $width-sets) * 100% !important;
				max-width: ($i / $width-sets) * 100% !important;
				flex-basis: ($i / $width-sets) * 100% !important;
				margin-left: 0 !important; /* [1] */
				flex-grow: 1 !important;
			}
		}
	}

	.u-width-auto#{$breakpoint-suffix}#{$breakpoint-key} {
		width: auto !important;
		flex-basis: 0 !important;
		margin-left: 0 !important; /* [1] */
		flex-grow: 1 !important;
		max-width: none !important;
	}

	.u-width-grow#{$breakpoint-suffix}#{$breakpoint-key} {
		width: auto !important;
		flex-basis: auto !important;
		margin-left: 0 !important; /* [1] */
		flex-grow: 1 !important;
		max-width: none !important;
	}

	.u-width-shrink#{$breakpoint-suffix}#{$breakpoint-key} {
		width: auto !important;
		flex-basis: auto !important;
		margin-left: 0 !important; /* [1] */
		flex-grow: 0 !important;
		max-width: none !important;
	}
}


// OFFSETS MIXIN
//------------------------------------------------------------------------------------------------

@mixin create-offsets($width-sets, $breakpoint-suffix: null, $breakpoint-key: null) {
	$breakpoint-label: '';
	@if($breakpoint-suffix) {
		$breakpoint-label: '@#{$breakpoint-key}';
	}
	@for $i from 1 through $width-sets {
		.u-offset-#{$i}\/#{$width-sets}#{$breakpoint-suffix}#{$breakpoint-key} {
			margin-left: ($i / $width-sets) * 100% !important;
		}
	}
}

// GENERATE STANDARD WIDTHS
//------------------------------------------------------------------------------------------------

// Example: .u-width-1/3
@include create-widths(12);
// Example: .u-offset-1/3
@if($compile-offsets) {
	@include create-offsets(12);	
}


// GENERATE RESPONSIVE WIDTHS
//------------------------------------------------------------------------------------------------

// Create responsive variants using settings.breakpoints
// Changes width when breakpoint is hit
// Example: .u-width-1/3@md

@each $bp-name, $bp-value in $mq-breakpoints {
	@include mq(#{$bp-name}) {
		@include create-widths(12, \@, #{$bp-name});
		@if($compile-offsets) {
			@include create-offsets(12, \@, #{$bp-name});
		}
	}
}


// PREVENT FLEX SHRINK
//------------------------------------------------------------------------------------------------

/*
Sometimes flex elements shrink when we don't want them too. This prevents that.
*/

.u-width-no-shrink {
	flex-shrink: 0;
}