/* stylelint-disable declaration-no-important, plugin/stylelint-selector-no-empty */
////
/// @author Mark Otto
////

/// Assign responsive-friendly `width`, `max-width`, `min-width`, `height`, `max-height`, and `min-height` utilities to an element. Includes support for 25%, 50%, 75%, and 100% by default.
///
/// #### Notation
///
/// The classes are named using the format `{property}-{breakpoint}-{size}`.
///
/// Where *property* is one of:
///
/// * `w` - for classes that set `width`
/// * `max-w` - for classes that set `max-width`
/// * `min-w` - for classes that set `min-width`
/// * `h` - for classes that set `height`
/// * `max-h` - for classes that set `max-height`
/// * `min-h` - for classes that set `min-height`
///
/// Where *breadkpoints* is one of the standard set (`xs`, `sm`, `md`, `lg`, `xl`)
///
/// Where *size* is one of:
///
/// * `25` - 25%
/// * `50` - 50%
/// * `75` -  75%
/// * `100` - 100%
///
/// (You can add more sizes by adding entries to the `$spacers` Sass map variable.)
/// @name {property}-{breakpoint}-{size}
/// @since 0.1.0 - The O.G.
/// @example html
/// <div class="w-xs-25 p-a-1 bg-gray-light">Width 25%</div>
/// <div class="w-xs-50 p-a-1 bg-gray-light">Width 50%</div>
/// <div class="w-xs-75 p-a-1 bg-gray-light">Width 75%</div>
/// <div class="w-xs-100 p-a-1 bg-gray-light">Width 100%</div>
/// <div class="m-y-1 spacer"></div>
/// <div style="height: 100px;">
///   <div class="h-xs-25 d-xs-inline-block p-x-1 bg-gray-light">Height 25%</div>
///   <div class="h-xs-50 d-xs-inline-block p-x-1 bg-gray-light">Height 50%</div>
///   <div class="h-xs-75 d-xs-inline-block p-x-1 bg-gray-light">Height 75%</div>
///   <div class="h-xs-100 d-xs-inline-block p-x-1 bg-gray-light">Height 100%</div>
/// </div>
@mixin sizing-helpers($breakpoints) {
	.h {
		@each $breakpoint in map-keys($breakpoints) {
			@include media-breakpoint-up($breakpoint, $breakpoints) {
				&-#{$breakpoint}-auto {
					height: auto !important;
				}
			}
		}
	}

	.w {
		@each $breakpoint in map-keys($breakpoints) {
			@include media-breakpoint-up($breakpoint, $breakpoints) {
				&-#{$breakpoint}-auto {
					width: auto !important;
				}
			}
		}
	}

	@each $breakpoint in map-keys($breakpoints) {
		@each $prop, $abbrev in (width: w, max-width: max-w, min-width: min-w, height: h, max-height: max-h, min-height: min-h) {
			@each $size, $length in (25: 25%, 50: 50%, 75: 75%, 100: 100%) {
				@include media-breakpoint-up($breakpoint, $breakpoints) {
					.#{$abbrev}-#{$breakpoint}-#{$size} {
						#{$prop}: $length !important;
					}
				}
			}
		}
	}
}