// core/cover
// @version  1.1.3

@import '../_tools/_index';
@import '../_setup/_index';

.wp-block-cover-image,
.wp-block-cover {
	color: var(--wp--preset--color--white);

	&.alignfull {
		padding-left: var(--wp--style--root--padding-left);
		padding-right: var(--wp--style--root--padding-right);
	}

	&.has-custom-content-position {

		&.is-position-top-center,
		&.is-position-bottom-center {

			.wp-block-cover__inner-container {
				width: 100%;
			}
		}
	}

	&__background,
	&__image-background,
	.wp-block-cover__image--placeholder-image {
		border-radius: inherit;
	}
}

.wp-block-cover {

	// Only within Query:
	.wp-block-post &.has-post-link {

		.wp-block-cover__inner-container {
			position: relative;
			z-index: 3;
		}
	}

	&__post-link {
		display: none;

		// Render only within Query.
		.wp-block-post & {
			display: block;
			position: absolute;
			inset: 0;
			border-radius: inherit;
			z-index: 2;
		}
	}
}

.is-style-image-blur {
	position: relative; // Just in case.

	> .is-blur-wrapper {
		overflow: hidden;
		position: absolute;
		inset: 0;
	}

	> img,
	> .wp-block-cover__image-background,
	> .wp-block-cover__video-background,
	> .is-blur-wrapper img,
	> .is-blur-wrapper video {
		filter: blur( var(--wp--custom--filter--blur--image) );
		transform: scale( 1.25 );
		clip-path: inset( 10% );
	}

	> .wp-block-cover__video-background,
	> .is-blur-wrapper video {
		filter: blur( var( --wp--custom--filter--blur--video, var(--wp--custom--filter--blur--image) ) );
	}
}

.is-style-zoom-in {
	overflow: hidden;

	.wp-block-cover__image-background,
	.wp-block-cover__video-background {
		transition: transform 8s ease-in-out;
	}

	&:hover {

		.wp-block-cover__image-background,
		.wp-block-cover__video-background {
			transform: scale( 1.2 );
		}
	}
}

.is-style-hover-content {

	// Hover enabled devices only.
	// (Do not hide the content on touch screens, so it is accessible.)
	@media (hover: hover) {

		> .has-background-dim,
		> .wp-block-cover__inner-container {
			transition:
				opacity .3s,
				transform .3s;
		}

		&:not(:hover, :focus-within, .is-selected, .has-child-selected) {

			> .has-background-dim,
			> .wp-block-cover__inner-container {
				opacity: 0 !important;
			}

			> .has-background-dim {
				transform: scale(.9);
			}
		}
	}
}
