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

@include layer(utilities, $use-css-layers, $layer-prefix) {
// flex direction
@include spread-map-into-utilities(
	$map: $flex-direction,
	$class: flex,
	$attribute: flex-direction,
	$bps: $breakpoints,
	$zero-specificity: $zero-specificity-for-utilities
);

// flex wrap
@include spread-map-into-utilities(
	$map: $flex-wrap,
	$class: flex,
	$attribute: flex-wrap,
	$bps: $breakpoints,
	$zero-specificity: $zero-specificity-for-utilities
);

// flex
@include spread-map-into-utilities(
	$map: $flex,
	$class: flex,
	$attribute: flex,
	$bps: $breakpoints,
	$zero-specificity: $zero-specificity-for-utilities
);

// flex grow
@each $prefix, $prop in (grow: flex-grow, shrink: flex-shrink) {
	@each $value, $postfix in (1: '', 0: '-0') {
		%#{$prefix}#{$postfix} {
			#{$prop}: #{$value};
		}

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

// order
@include spread-map-into-utilities(
	$map: $order,
	$class: order,
	$attribute: order,
	$bps: $breakpoints,
	$zero-specificity: $zero-specificity-for-utilities
);

// gap
@each $size, $value in map.merge($spacing, $spacing-dynamic) {
	$default: null;

	// check if value is not a map (spacing-dynamic)
	@if meta.type-of($value) != 'map' {
		$default: $value;
	}

	$var: var(--spacing-#{$size}, #{$default});

	// all
	%gap-#{$size} {
		gap: #{$var};
	}

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

	// horizontal
	%gap-x-#{$size} {
		column-gap: #{$var};
	}

	@include wrap-with-where(
		$selector: '.gap-x-#{$size}',
		$enabled: $zero-specificity-for-utilities
	) {
		@extend %gap-x-#{$size};
	}

	// vertical
	%gap-y-#{$size} {
		row-gap: #{$var};
	}

	@include wrap-with-where(
		$selector: '.gap-y-#{$size}',
		$enabled: $zero-specificity-for-utilities
	) {
		@extend %gap-y-#{$size};
	}
}

// justify and align content
@each $class, $attribute in (justify: justify-content, content: align-content) {
	@include spread-map-into-utilities(
		$map: $justify-align-content,
		$class: $class,
		$attribute: $attribute,
		$bps: $breakpoints,
		$zero-specificity: $zero-specificity-for-utilities
	);
}

// justify and align items
@each $class, $attribute in (justify-items: justify-items, items: align-items) {
	@include spread-map-into-utilities(
		$map: $justify-align-items,
		$class: $class,
		$attribute: $attribute,
		$bps: $breakpoints,
		$zero-specificity: $zero-specificity-for-utilities
	);
}

// justify and align self
@each $class, $attribute in (justify-self: justify-self, self: align-self) {
	@include spread-map-into-utilities(
		$map: $justify-align-self,
		$class: $class,
		$attribute: $attribute,
		$bps: $breakpoints,
		$zero-specificity: $zero-specificity-for-utilities
	);
}

}