// @import "common";

/**
 * Background/boxed styles
 */
// .gutenstrap--has-background,
// .gutenstrap-has-background {
// 	@include box();
// }
.gutenstrap-has-background,
.gutenstrap--has-background-image,
.gutenstrap--has-background-gradient,
.gutenstrap--has-background-video {
	position: relative;
	background-size: cover;
	background-position: center;

	// We need to reset this to none, or else the container's
	// background color will apply to all child blocks.
	--gutenstrap-background-color: none;
	--gutenstrap-background-color2: none;
	--gutenstrap-background-direction: none;
	--gutenstrap-background-image: none;
	

	&::before {
		display: block !important;
		content: "";
		position: absolute;
		z-index: 2;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background-color: var(--gutenstrap-background-color, #fff);
	}
	&.gutenstrap--has-background-gradient {
		overflow: hidden;
		&::before {
			background-image: linear-gradient(
				var(--gutenstrap-background-direction, 0deg),
				var(--gutenstrap-background-color, #fff),
				var(--gutenstrap-background-color2, #fff)
			);
		}
	}
	.gutenstrap-video-background {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		width: 100%;
		height: 100%;
		z-index: 1;
		object-fit: cover;
	}
	> * {
		position: relative;
		z-index: 3;
	}

	&.gutenstrap-background-on-hover:not(:hover) {
		background-color: transparent !important;
			background-image: none !important;

		&::before {
			visibility: hidden;
		}
		&.gutenstrap--has-background-gradient {
			&::before {
				visibility: hidden;
			}
    }
    .gutenstrap-video-background{
      display: none;
    }
	}

	
}



@for $i from 0 through 10 {
	.gutenstrap--background-opacity-#{ $i }::before,
	.gutenstrap-has-background-opacity-#{ $i }::before {
		opacity: $i * 0.1;
	}
}