/* FILE: global/modifiers/_decorations.scss */

// Widget title style.

	.has-widget-title-style,
	.editor-block-list__layout .has-widget-title-style {
		@include widget_title_style();
	}

// Sticky element within container.

	// This will not work if any of the parents has overflow
	// styles set. We are using `--scrollbar_width` CSS variable
	// to mitigate this problem in the theme, so it should work
	// in vast majority of cases. Unless a block parent has an
	// overflow style set, of course...
	.is-sticky-within-container {
		@include media(
			( map_get( $breakpoint, 'xl' ), 'min-width' ),
			( map_get( $breakpoint, 's' ), 'min-height' )
		) {
			position: sticky;
			top: 2em;
		}
	}

// Image mask decorations:
// - .has-image-shape-1/2/3/4
// - .has-decorative-overlay
@supports ( mask-image: url('') ) {
	// @see  setup/_others.scss for mask images.
	// @link  https://developer.mozilla.org/en-US/docs/Web/CSS/mask
	// @link  https://caniuse.com/#feat=css-masks

	// Image masks.

		.has-posts-thumbnail-shape .posts .post-thumbnail img,
		.has-posts-thumbnail-shape .products .thumbnail img,
		[class*="has-image-shape-"] img,
		img[class*="has-image-shape-"] {
			position: relative;
			mask-image: url('data:image/svg+xml;utf8,#{ encode_url( map_get( $decoration_mask, 'RB' ) ) }');
			mask-position: 50% 50%;
			mask-repeat: no-repeat;
			mask-size: contain;
		}

		.has-posts-thumbnail-shape .posts .post-thumbnail,
		.has-posts-thumbnail-shape .products .thumbnail,
		[class*="has-image-shape-"] figure,
		figure[class*="has-image-shape-"],
		[class*="has-image-shape-"] .wp-block-latest-posts__featured-image,
		[class*="has-image-shape-"] .wc-block-grid__product-image {
			display: inline-block;
			position: relative;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: var(--color_accent);
				opacity: .5;
				mask-image: url('data:image/svg+xml;utf8,#{ encode_url( map_get( $decoration_mask, 'RB' ) ) }');
				mask-position: 50% 50%;
				mask-repeat: no-repeat;
				mask-size: contain;
				transform:
					scaleX(-1)
					scale(.95)
					translateX(-8%)
					translateY(5%);
			}

		}

			.has-posts-thumbnail-shape-2 .posts .post-thumbnail img,
			.has-posts-thumbnail-shape-2 .products .thumbnail img,
			.has-posts-thumbnail-shape-2 .posts .post-thumbnail::before,
			.has-posts-thumbnail-shape-2 .products .thumbnail::before,
			.has-image-shape-2 img,
			img.has-image-shape-2,
			.has-image-shape-2 figure::before,
			figure.has-image-shape-2::before,
			.has-image-shape-2 .wp-block-latest-posts__featured-image::before,
			.has-image-shape-2 .wc-block-grid__product-image::before {
				mask-image: url('data:image/svg+xml;utf8,#{ encode_url( map_get( $decoration_mask, 'RT' ) ) }');
			}

				.has-posts-thumbnail-shape-2 .posts .post-thumbnail::before,
				.has-posts-thumbnail-shape-2 .products .thumbnail::before,
				.has-image-shape-2 figure::before,
				figure.has-image-shape-2::before,
				.has-image-shape-2 .wp-block-latest-posts__featured-image::before,
				.has-image-shape-2 .wc-block-grid__product-image::before {
					transform:
						scaleX(-1)
						scale(.95)
						translateX(-8%)
						translateY(-5%);
				}

			.has-posts-thumbnail-shape-3 .posts .post-thumbnail img,
			.has-posts-thumbnail-shape-3 .products .thumbnail img,
			.has-posts-thumbnail-shape-3 .posts .post-thumbnail::before,
			.has-posts-thumbnail-shape-3 .products .thumbnail::before,
			.has-image-shape-3 img,
			img.has-image-shape-3,
			.has-image-shape-3 figure::before,
			figure.has-image-shape-3::before,
			.has-image-shape-3 .wp-block-latest-posts__featured-image::before,
			.has-image-shape-3 .wc-block-grid__product-image::before {
				mask-image: url('data:image/svg+xml;utf8,#{ encode_url( map_get( $decoration_mask, 'LT' ) ) }');
			}

				.has-posts-thumbnail-shape-3 .posts .post-thumbnail::before,
				.has-posts-thumbnail-shape-3 .products .thumbnail::before,
				.has-image-shape-3 figure::before,
				figure.has-image-shape-3::before,
				.has-image-shape-3 .wp-block-latest-posts__featured-image::before,
				.has-image-shape-3 .wc-block-grid__product-image::before {
					transform:
						scaleX(-1)
						scale(.95)
						translateX(8%)
						translateY(-5%);
				}

			.has-posts-thumbnail-shape-4 .posts .post-thumbnail img,
			.has-posts-thumbnail-shape-4 .products .thumbnail img,
			.has-posts-thumbnail-shape-4 .posts .post-thumbnail::before,
			.has-posts-thumbnail-shape-4 .products .thumbnail::before,
			.has-image-shape-4 img,
			img.has-image-shape-4,
			.has-image-shape-4 figure::before,
			figure.has-image-shape-4::before,
			.has-image-shape-4 .wp-block-latest-posts__featured-image::before,
			.has-image-shape-4 .wc-block-grid__product-image::before {
				mask-image: url('data:image/svg+xml;utf8,#{ encode_url( map_get( $decoration_mask, 'LB' ) ) }');
			}

				.has-posts-thumbnail-shape-4 .posts .post-thumbnail::before,
				.has-posts-thumbnail-shape-4 .products .thumbnail::before,
				.has-image-shape-4 figure::before,
				figure.has-image-shape-4::before,
				.has-image-shape-4 .wp-block-latest-posts__featured-image::before,
				.has-image-shape-4 .wc-block-grid__product-image::before {
					transform:
						scaleX(-1)
						scale(.95)
						translateX(8%)
						translateY(5%);
				}

			.no-image-shape-bg::before,
			.no-image-shape-background::before,
			.wp-block-gallery[class*="has-image-shape-"]::before {
				display: none;
			}

	// Decorative overlay.

		$mask_image: map_get( $decoration_mask, 'RB' );

		@if 'right' == $left {
			$mask_image: map_get( $decoration_mask, 'LB' );
		}

		.has-decorative-overlay,
		.has-category-decorative-overlay .product-category .thumbnail {
			position: relative;

			&::after {
				content: '';
				position: absolute;
				#{$right}: -1em;
				bottom: -1em;
				width: 100%;
				height: 100%;
				font-size: inherit;
				background: var(--color_accent);
				opacity: .5;
				mask-image: url('data:image/svg+xml;utf8,#{ encode_url( $mask_image ) }');
				mask-repeat: no-repeat;
				mask-size: contain;
				transform: scale( .5 );
				z-index: 1;
				pointer-events: none;

				@if 'left' == $left {
					mask-position: 100% 100%;
					transform-origin: 100% 100%;
				} @else {
					mask-position: 0 100%;
					transform-origin: 0 100%;
				}

			}

		}

		.site .has-decorative-overlay > {

			h2,
			h3,
			p,
			div {
				position: relative;
				z-index: 2;
			}

		}

}