.editor-post-featured-image {
	padding: 0;

	.components-spinner {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -9px;
		margin-left: -9px;
	}
}

.editor-post-featured-image__container {
	position: relative;

	&:hover,
	&:focus,
	&:focus-within {
		.editor-post-featured-image__actions {
			opacity: 1;
		}
	}

	.components-drop-zone__content {
		border-radius: $radius-small;
	}

	// Align text and icons horizontally to avoid clipping when the featured image is not set.
	&:has(.editor-post-featured-image__toggle) .components-drop-zone .components-drop-zone__content-inner {
		display: flex;
		align-items: center;
		gap: $grid-unit-10;

		.components-drop-zone__content-icon {
			margin: 0;
		}
	}
}

.editor-post-featured-image__toggle,
.editor-post-featured-image__preview {
	width: 100%;
	padding: 0;
	transition: all 0.1s ease-out;
	@include reduce-motion("transition");
	box-shadow: 0 0 0 0 var(--wp-admin-theme-color);
	overflow: hidden; // Ensure the focus style properly encapsulates the image.
	outline-offset: -#{$border-width};
	min-height: $grid-unit-50;

	display: flex;
	justify-content: center;
}

.editor-post-featured-image__preview {
	height: auto !important;
	outline: $border-width solid rgba($black, 0.1);

	.editor-post-featured-image__preview-image {
		object-fit: cover;
		width: 100%;
		object-position: 50% 50%;
		aspect-ratio: 2/1;
	}
}

.editor-post-featured-image__toggle {
	box-shadow: inset 0 0 0 $border-width $gray-400;
}

.editor-post-featured-image__actions {
	@include reduce-motion("transition");
	bottom: 0;
	opacity: 0; // Use opacity instead of visibility so that the buttons remain in the tab order.
	padding: $grid-unit-10;
	position: absolute;
	transition: opacity 50ms ease-out;
}

.editor-post-featured-image__action {
	backdrop-filter: blur(16px) saturate(180%);
	background: rgba(255, 255, 255, 0.75);
	flex-grow: 1;
	justify-content: center;
}