.has-background-overlay {
	position: relative;

	// Set a default overlay background color.
	&:not(.has-background) {
		background-color: $black;
	}

	&::before {
		background-color: inherit;
		bottom: 0;
		content: "";
		left: 0;
		opacity: 0.5;
		position: absolute;
		right: 0;
		top: 0;
	}
}

@for $i from 1 through 10 {

	.has-background-overlay-#{ $i * 10 }::before {
		opacity: $i * 0.1;
	}
}
