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

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

	.hidden {
		display: none;
	}

	.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:not(.editor-post-featured-image__actions-is-requesting-image) {
			opacity: 1;
		}
	}

	.editor-post-featured-image__actions.editor-post-featured-image__actions-missing-image {
		opacity: 1;
		margin-top: $grid-unit-20;
	}

	.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;
	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);
	@include checkerboard-background( 12px );

	.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;

	&:focus:not(:disabled) {
		// Allow smooth transition between focused and unfocused box-shadow states.
		box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
	}
}

.editor-post-featured-image__actions {
	&:not(.editor-post-featured-image__actions-missing-image) {
		bottom: 0;
		opacity: 0; // Use opacity instead of visibility so that the buttons remain in the tab order.
		padding: $grid-unit-10;
		position: absolute;

		@media not (prefers-reduced-motion) {
			transition: opacity 50ms ease-out;
		}

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

	.editor-post-featured-image__action {
		flex-grow: 1;
		justify-content: center;
	}
}