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

// Provide special styling for the placeholder.
// @todo this particular minimal style of placeholder could be componentized further.
.wp-block-post-featured-image {
	.block-editor-media-placeholder {
		z-index: 1; // Need to put it above the overlay so the upload button works.
		backdrop-filter: none; // Removes background blur so the overlay's actual color is visible.
	}

	// Style the placeholder.
	.wp-block-post-featured-image__placeholder,
	.components-placeholder {
		justify-content: center;
		align-items: center;
		padding: 0;
		display: flex;

		// Hide the upload button, as it's also available in the media library.
		.components-form-file-upload {
			display: none;
		}

		// Style the upload button.
		.components-button {
			margin: auto;
			padding: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			width: $grid-unit-60;
			height: $grid-unit-60;
			border-radius: 50%;
			position: relative;
			background: var(--wp-admin-theme-color);
			border-color: var(--wp-admin-theme-color);
			border-style: solid;
			color: $white;

			> svg {
				color: inherit;
			}
		}

		// Show default placeholder height when not resized.
		min-height: 200px;
	}

	// The following override the default placeholder styles that remove
	// its border so that a user selection for border color or width displays
	// a visual border. They also override the `img { border: none; }` applied
	// by core.
	.wp-block-post-featured-image__placeholder,
	.components-placeholder,
	img {
		// The following is required to overcome WP Core applying styles that clear
		// img borders with a higher specificity than those added by the border
		// block support to provide a default border-style of solid when a border
		// color or width has been set.
		&:where(.has-border-color) {
			border-style: solid;
		}
		&:where([style*="border-top-color"]) {
			border-top-style: solid;
		}
		&:where([style*="border-right-color"]) {
			border-right-style: solid;
		}
		&:where([style*="border-bottom-color"]) {
			border-bottom-style: solid;
		}
		&:where([style*="border-left-color"]) {
			border-left-style: solid;
		}

		&:where([style*="border-width"]) {
			border-style: solid;
		}
		&:where([style*="border-top-width"]) {
			border-top-style: solid;
		}
		&:where([style*="border-right-width"]) {
			border-right-style: solid;
		}
		&:where([style*="border-bottom-width"]) {
			border-bottom-style: solid;
		}
		&:where([style*="border-left-width"]) {
			border-left-style: solid;
		}
	}

	// Provide a minimum size for the placeholder when resized.
	// Note, this should be as small as we can afford it, and exists only
	// to ensure there's room for the upload button.
	&[style*="height"] .components-placeholder {
		min-height: $grid-unit-60;
		min-width: $grid-unit-60;
		height: 100%;
		width: 100%;
	}

	// When the Post Featured Image block is linked,
	// it's wrapped with a disabled <a /> tag.
	// Ensure that the link is not clickable.
	> a {
		pointer-events: none;
	}

	// When the Post Featured Image block is linked,
	// and wrapped with a disabled <a /> tag
	// ensure that the placeholder items are visible when selected.
	&.is-selected .components-placeholder.has-illustration {
		.components-button,
		.components-placeholder__instructions,
		.components-placeholder__label {
			opacity: 1;
			pointer-events: auto;
		}
	}

	// When image being uploaded.
	&.is-transient {
		position: relative;

		img {
			opacity: 0.3;
		}

		// Show spinner while image is being uploaded.
		.components-spinner {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
}

div[data-type="core/post-featured-image"] {
	img {
		max-width: 100%;
		height: auto;
		display: block;
	}
}