/**
 * Photocopier Plugin
 * 
 * Block Styles:
 * - Image Block
 * - Gallery Block
 * - Media & Text Block
 */

/**
 * Shared Styles.
 */
.wp-block-image.is-style-photocopy,
.wp-block-gallery.is-style-photocopy .blocks-gallery-item figure,
.wp-block-media-text.is-style-photocopy figure,
.wp-block-image.is-style-photocopy-warped,
.wp-block-gallery.is-style-photocopy-warped .blocks-gallery-item figure,
.wp-block-media-text.is-style-photocopy-warped figure {
	position: relative;
}

.wp-block-image.is-style-photocopy:before,
.wp-block-gallery.is-style-photocopy .blocks-gallery-item figure:before,
.wp-block-media-text.is-style-photocopy figure:before,
.wp-block-image.is-style-photocopy-warped:before,
.wp-block-gallery.is-style-photocopy-warped .blocks-gallery-item figure:before,
.wp-block-media-text.is-style-photocopy-warped figure:before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-image: url('./assets/noise.gif');
	background-size: 2048px 2048px;
	z-index: 500;
	mix-blend-mode: exclusion;
	filter: grayscale(100%) contrast(200%);
}

/* Use a higher-resolution noise pattern on high-res screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
	.wp-block-image.is-style-photocopy:before,
	.wp-block-gallery.is-style-photocopy .blocks-gallery-item figure:before,
	.wp-block-media-text.is-style-photocopy figure:before,
	.wp-block-image.is-style-photocopy-warped:before,
	.wp-block-gallery.is-style-photocopy-warped .blocks-gallery-item figure:before,
	.wp-block-media-text.is-style-photocopy-warped figure:before {
		background-size: 1024px 1024px;
	}
}

svg.photocopier-svg-filter {
	position: absolute;
	height: 0;
	width: 0;
}

/**
 * Individual Styles
 */
.wp-block-image.is-style-photocopy img,
.wp-block-gallery.is-style-photocopy .blocks-gallery-item img,
.wp-block-media-text.is-style-photocopy figure img {
	filter: grayscale(100%) contrast(800%);
}

/* Try not to overlap the caption in the editor ¯\_(ツ)_/¯ */
.wp-block-image.is-selected.is-style-photocopy:before,
.wp-block-image.is-selected.is-style-photocopy-warped:before,
.wp-block-image.is-focused.is-style-photocopy:before,
.wp-block-image.is-focused.is-style-photocopy-warped:before {
	bottom: calc( 1.5em + 13px );
}

/* Warped */
.wp-block-image.is-style-photocopy-warped img,
.wp-block-gallery.is-style-photocopy-warped .blocks-gallery-item img,
.wp-block-media-text.is-style-photocopy-warped figure img {
	filter: url(#photocopy-filter-warp) grayscale(100%) contrast(800%);
}

.wp-block-image.is-style-photocopy-warped,
.wp-block-image.is-style-photocopy-warped .components-resizable-box__container,
.wp-block-gallery.is-style-photocopy-warped .blocks-gallery-item,
.wp-block-media-text.is-style-photocopy-warped figure {
	overflow: hidden;
}

/**
 * Text Warping.
 */
h1.is-style-photocopy-warped:not(.is-selected),
h2.is-style-photocopy-warped:not(.is-selected),
h3.is-style-photocopy-warped:not(.is-selected),
h4.is-style-photocopy-warped:not(.is-selected),
h5.is-style-photocopy-warped:not(.is-selected),
h6.is-style-photocopy-warped:not(.is-selected),
p.is-style-photocopy-warped:not(.is-selected) {
	filter: url(#photocopy-filter-warp-text);
	transform: scale(1,1);
}

h1.is-style-photocopy-warped-stretched:not(.is-selected),
h2.is-style-photocopy-warped-stretched:not(.is-selected),
h3.is-style-photocopy-warped-stretched:not(.is-selected),
h4.is-style-photocopy-warped-stretched:not(.is-selected),
h5.is-style-photocopy-warped-stretched:not(.is-selected),
h6.is-style-photocopy-warped-stretched:not(.is-selected),
p.is-style-photocopy-warped-stretched:not(.is-selected) {
	filter: url(#photocopy-filter-warp-text);
	transform: scale(1,2) translateY(-15%);
}