/*
 * Row: Background Pattern and Background Mask
 * The outer element is the layer in the Row, the inner one has the mask image,
 * its :before paints the color with the reverse transforms, so gradients keep their direction
 * Note: the pattern transforms and the mask rotation are applied inside the SVG images, CSS transforms would blur them,
 * Live Builder does them by CSS for the instant preview, see builder-preview.css
 */

.l-section-pattern,
.l-section-mask,
.l-section-pattern-h,
.l-section-pattern-h:before,
.l-section-mask-h,
.l-section-mask-h:before {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	}
.l-section-pattern,
.l-section-mask {
	pointer-events: none;
	}
.l-section-pattern-h:before,
.l-section-mask-h:before {
	content: '';
	}

/* Pattern */
.l-section-pattern-h {
	-webkit-mask-image: var(--pattern-img);
	mask-image: var(--pattern-img);
	/* The top left anchor keeps 1px lines aligned to pixels, "center" shifts tiles by 0.5px in Rows of odd size */
	-webkit-mask-position: 0 0;
	mask-position: 0 0;
	}
.l-section-pattern-h:before {
	background: var(--pattern-color);
	}
.l-section-pattern.invert > .l-section-pattern-h {
	-webkit-mask-image: var(--pattern-img), linear-gradient(#000 0 0);
	mask-image: var(--pattern-img), linear-gradient(#000 0 0);
	-webkit-mask-size: auto, 100% 100%;
	mask-size: auto, 100% 100%;
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	}

/* Mask */
.l-section-mask {
	--mask-x: 50%;
	--mask-y: 50%;
	--mask-flip-x: 1;
	--mask-flip-y: 1;
	}
.l-section-mask[data-pos~="left"] {
	--mask-x: 0%;
	}
.l-section-mask[data-pos~="right"] {
	--mask-x: 100%;
	}
.l-section-mask[data-pos~="top"] {
	--mask-y: 0%;
	}
.l-section-mask[data-pos~="bottom"] {
	--mask-y: 100%;
	}
.l-section-mask.flip_h {
	--mask-flip-x: -1;
	}
.l-section-mask.flip_v {
	--mask-flip-y: -1;
	}
.l-section-mask-h {
	transform: scale(var(--mask-flip-x), var(--mask-flip-y));
	-webkit-mask-image: var(--mask-img);
	mask-image: var(--mask-img);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	}
.l-section-mask-h:before {
	transform: scale(var(--mask-flip-x), var(--mask-flip-y));
	background: var(--mask-color);
	}
.l-section-mask.invert > .l-section-mask-h {
	-webkit-mask-image: var(--mask-img), linear-gradient(#000 0 0);
	mask-image: var(--mask-img), linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	}

/* Cover keeps the image proportions, its position is relative to the Row edges, so it's recalculated for the flipped image */
.l-section-mask.size_cover > .l-section-mask-h {
	--mask-pos-x: var(--mask-x);
	--mask-pos-y: var(--mask-y);
	-webkit-mask-size: cover;
	mask-size: cover;
	-webkit-mask-position: var(--mask-pos-x) var(--mask-pos-y);
	mask-position: var(--mask-pos-x) var(--mask-pos-y);
	}
.l-section-mask.size_cover.flip_h > .l-section-mask-h {
	--mask-pos-x: calc(100% - var(--mask-x));
	}
.l-section-mask.size_cover.flip_v > .l-section-mask-h {
	--mask-pos-y: calc(100% - var(--mask-y));
	}

/* With Image Slider */
.l-section.with_slider > .l-section-pattern,
.l-section.with_slider > .l-section-mask {
	z-index: 1;
	}