.blockish-media-uploader {
	padding: 0;

	// This keeps images at their intrinsic size (eg. a 50px
	// image will never be wider than 50px).
	.components-responsive-wrapper__content {
		max-width: 100%;
		width: auto;
	}
}

.blockish-media-uploader-wrapper {
	position: relative;

	&:hover,
	&:focus,
	&:focus-within {
		.blockish-media-uploader-actions {
			opacity: 1;
		}
	}
}

.blockish-media-uploader-toggle,
.blockish-media-uploader-preview {
	width: 100%;
	padding: 0;
	transition: all 0.1s ease-out;
	box-shadow: 0 0 0 0 #ccc;
	overflow: hidden; // Ensure the focus style properly encapsulates the image.

	// Apply a max-height.
	display: flex;
	justify-content: center;
	max-height: 150px;
}

.blockish-media-uploader-preview {
	height: auto !important;

	.blockish-media-uploader-image-wrapper {
		aspect-ratio: 21/9;
		background-color: #1f2124;
		background-image: linear-gradient(45deg, #3f444b 25%, transparent 0, transparent 75%, #3f444b 0, #3f444b), linear-gradient(45deg, #3f444b 25%, transparent 0, transparent 75%, #3f444b 0, #3f444b);
		background-position: 0 0, calc(16px / 2) calc(16px / 2);
		background-size: 16px 16px;
		border: 1px solid #3f444b;
		width: 100%;
		height: 100%;
	}

	.blockish-media-uploader-image {
		height: 100%;
		background-position: 50%;
		background-size: cover;
		background-repeat: no-repeat;
		width: 100%;
	}
}

.blockish-media-uploader-toggle {
	border-radius: 4px;
	background-color: none;
	min-height: 40px;
	line-height: 20px;
	padding: 10 0;
	text-align: center;
	box-shadow: inset 0 0 0 1px #ccc;
}

.blockish-media-uploader-actions {
	bottom: 0;
	opacity: 0; // Use opacity instead of visibility so that the buttons remain in the tab order.
	padding: 10px;
	position: absolute;
	transition: opacity 0.3s ease-out;
}

.blockish-media-uploader-image-action {
	backdrop-filter: blur(16px) saturate(180%);
	background: rgba(255, 255, 255, 0.75);
	flex-grow: 1;
	justify-content: center;
}