@use "@wordpress/base-styles/variables" as *;
@use "@wordpress/base-styles/z-index" as *;

.wp-block-cover {
	// Override default cover styles
	// because we're not ready yet to show the cover block.
	&.is-placeholder {
		padding: 0 !important;
		display: flex;
		align-items: stretch;
		min-height: 240px;

		.components-placeholder {
			&.is-large {
				justify-content: flex-start;
				z-index: z-index(".wp-block-cover.is-placeholder .components-placeholder.is-large");
			}
		}

		// Allow focus outline/box-shadow to align with block's min height.
		&:focus::after {
			min-height: auto;
		}
	}

	&.components-placeholder h2 {
		color: inherit;
	}

	// Applied while media is being uploaded
	&.is-transient {
		position: relative;

		&::before {
			background-color: #fff;
			content: "";
			height: 100%;
			opacity: 0.3;
			position: absolute;
			width: 100%;
			z-index: 1;
		}

		.wp-block-cover__inner-container {
			z-index: 2;
		}
	}

	// Shown while media is being uploaded
	.components-spinner {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%); // Account for spinner dimensions
		margin: 0;
	}

	// The .wp-block-cover class is used just to increase selector specificity.
	.wp-block-cover__inner-container {
		// Avoid text align inherit from cover image align.
		text-align: left;
		margin-left: 0;
		margin-right: 0;
	}

	.wp-block-cover__placeholder-background-options {
		width: 100%;
	}

	.wp-block-cover__image--placeholder-image {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
}

[data-align="left"] > .wp-block-cover,
[data-align="right"] > .wp-block-cover {
	max-width: $content-width * 0.5;
	width: 100%;
}

.block-library-cover__reset-button {
	margin-left: auto;
}

.block-library-cover__resize-container {
	position: absolute !important;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	min-height: 50px;
}

// Prevent resizable box popover form preventing inner block selection.
.components-popover.block-editor-block-popover.block-library-cover__resizable-box-popover {
	// Additional specificity is required to overcome default block popover
	// pointer events only for the intended wrappers. The default pointer events
	// are still needed for the inner resize handles of the resizable box.
	.components-popover__content > div,
	.block-library-cover__resize-container {
		// The inner drag handle will still have `pointer-events: all` allowing
		// it to continue to be interacted with.
		pointer-events: none;
		overflow: visible;
	}
}


// Remove the parallax fixed background when in the patterns preview panel as it
// doesn't work with the transforms that are applied to resize the block in that context.
.block-editor-block-patterns-list__list-item .has-parallax.wp-block-cover {
	background-attachment: scroll;
}

.color-block-support-panel__inner-wrapper > :not(.block-editor-tools-panel-color-gradient-settings__item) {
	margin-top: $grid-unit-30;
}