@use '../context' as *;

@include layer(utilities, $use-css-layers, $layer-prefix) {
// background-attachment
@include spread-map-into-utilities(
	$map: $background-attachment,
	$class: bg,
	$attribute: 'background-attachment',
	$zero-specificity: $zero-specificity-for-utilities
);

// background-clip
@include spread-map-into-utilities(
	$map: $background-clip,
	$class: bg-clip,
	$attribute: 'background-clip',
	$zero-specificity: $zero-specificity-for-utilities
);

// background-origin
@include spread-map-into-utilities(
	$map: $background-origin,
	$class: bg-origin,
	$attribute: 'background-origin',
	$zero-specificity: $zero-specificity-for-utilities
);

// background-position
@include spread-map-into-utilities(
	$map: $background-position,
	$class: bg,
	$attribute: 'background-position',
	$zero-specificity: $zero-specificity-for-utilities
);

// background-repeat
@include spread-map-into-utilities(
	$map: $background-repeat,
	$class: bg,
	$attribute: background-repeat,
	$zero-specificity: $zero-specificity-for-utilities
);

// background-size
@include spread-map-into-utilities(
	$map: $background-size,
	$class: bg,
	$attribute: background-size,
	$zero-specificity: $zero-specificity-for-utilities
);

// background-image
@include spread-map-into-utilities(
	$map: $background-image,
	$class: bg,
	$attribute: background-image,
	$prop: bg,
	$zero-specificity: $zero-specificity-for-utilities
);

// background gradients
@include spread-map-into-utilities(
	$map: $gradient,
	$class: bg-gradient,
	$attribute: background-image,
	$prop: gradient,
	$zero-specificity: $zero-specificity-for-utilities
);

}