@use 'sass:map';
@use '../context' as *;

// width / height / max-width / max-height / min-width / min-height
@each $class,
	$attribute
		in(
			w: width,
			h: height,
			max-w: max-width,
			max-h: max-height,
			min-w: min-width,
			min-h: min-height
		)
{
	@include spread-map-into-utilities(
		$map: map.merge($spacing, $spacing-dynamic),
		$class: $class,
		$attribute: $attribute,
		$bps: $breakpoints,
		$prop: spacing,
		$zero-specificity: $zero-specificity-for-utilities
	);
}

@include spread-map-into-utilities(
	$map: $width,
	$class: w,
	$attribute: width,
	$bps: $breakpoints,
	$prop: w,
	$zero-specificity: $zero-specificity-for-utilities
);
@include spread-map-into-utilities(
	$map: $height,
	$class: h,
	$attribute: height,
	$bps: $breakpoints,
	$prop: h,
	$zero-specificity: $zero-specificity-for-utilities
);
@include spread-map-into-utilities(
	$map: $max-width,
	$class: max-w,
	$attribute: max-width,
	$bps: $breakpoints,
	$zero-specificity: $zero-specificity-for-utilities
);
@include spread-map-into-utilities(
	$map: $max-height,
	$class: max-h,
	$attribute: max-height,
	$bps: $breakpoints,
	$zero-specificity: $zero-specificity-for-utilities
);

@each $breakpoint, $breakpoint-value in $breakpoints {
	@if $breakpoint-value > 0 {
		%max-w-screen-#{$breakpoint} {
			max-width: $breakpoint-value;
		}

		@include wrap-with-where(
			$selector: '.max-w-screen-#{$breakpoint}',
			$enabled: $zero-specificity-for-utilities
		) {
			@extend %max-w-screen-#{$breakpoint};
		}
	}
}

// min-width / min-height
@include spread-map-into-utilities(
	$map: $min-width,
	$class: min-w,
	$attribute: min-width,
	$bps: $breakpoints,
	$zero-specificity: $zero-specificity-for-utilities
);
@include spread-map-into-utilities(
	$map: $min-height,
	$class: min-h,
	$attribute: min-height,
	$bps: $breakpoints,
	$zero-specificity: $zero-specificity-for-utilities
);