@each $key, $value in $background-colors {
	.#{$atom-prefix}bgcl-#{$key} {
		--bgcl-opacity: 1;
		background-color: #{$value} !important;
	}
}

@each $key, $value in $opacity {
	.#{$atom-prefix}bgcl-opacity-#{$key} {
		--bgcl-opacity: #{$value};
	}
}

@each $breakpointName, $breakpointSize in $breakpoints {
	@media (min-width: $breakpointSize) {
		@each $key, $value in $background-colors {
			.#{$atom-prefix}bgcl-#{$key}\:#{$breakpointName} {
				--bgcl-opacity: 1;
				background-color: #{$value} !important;
			}
		}
	}
}

@each $key, $value in $background-colors {
	.#{$atom-prefix}bgcl-#{$key}\:hover {
		&:hover {
			--bgcl-opacity: 1;
			background-color: #{$value} !important;
		}
	}
} ;