@use "../../abstracts/mixins";

.wp-block-cover {
	position: relative; // so negative margins inside will work.
	display: flex;
	justify-content: var(--cover-block-justify-content, center);
	min-height: 0;
	overflow: initial; // WP 6.3 added overflow clip/hidden.
	padding: var(--cover-block-padding-top, 0.05px) var(--cover-block-padding-right, 0.05px) var(--cover-block-padding-bottom, 0.05px) var(--cover-block-padding-left, 0.05px); // 0.05px prevents margin collapsing.

	&.has-background:not(.alignfull) {
		--cover-block-padding-right: var(--spacing-lg);
		--cover-block-padding-left: var(--spacing-lg);
	}

	&:where(.alignfull) {
		// Can't override property or it will break nested blocks.
		padding-right: var(--cover-block-alignfull-padding-left, calc(((var(--viewport-width) - var(--breakpoint-xl)) / 2) - var(--side-spacing)));
		padding-left: var(--cover-block-alignfull-padding-right, calc(((var(--viewport-width) - var(--breakpoint-xl)) / 2) - var(--side-spacing)));

		> .wp-block-cover__inner-container {
			margin-right: var(--side-spacing);
			margin-left: var(--side-spacing);
		}
	}
}

.has-sidebar,
.has-boxed-container {
	// Undo side-spacing padding and use 0.05px to prevent margin collapsing.
	--cover-block-alignfull-padding-right: 0.05px;
	--cover-block-alignfull-padding-left: 0.05px;
}

.wp-block-cover__inner-container {
	width: 100% !important;
	max-width: var(--content-max-width, var(--breakpoint-xl));
}

.wp-block-cover__image-background {
	object-position: var(--object-position, 50%);

	&.has-parallax {
		background-image: var(--cover-block-background-image, var(--background-image-sm, var(--background-image, none)));

		@include mixins.mq(sm) {
			--cover-block-background-image: var(--background-image-md);
		}

		@include mixins.mq(md) {
			--cover-block-background-image: var(--background-image-lg);
		}
	}
}