/**
 * The image field's upload/preview UI (Image.php, aop-media.js). ".hidden" itself comes from WordPress core
 * (wp-admin/css/common.css), loaded on every admin screen; only the layout here is this plugin's own.
 *
 * This file did not exist until now (Image::enqueue() enqueued it, but nothing ever shipped it): the preview
 * box had no size to show its background-image in, and the delete link had no color of its own.
 */
.aop-media-wrapper {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

/* :not(.hidden), not a plain class, so this never has to out-rank .hidden's "display: none": with .hidden
present the selector simply does not match, instead of the two rules racing on equal specificity (see
aop-file.css, found the same way while building the file field). */
.aop-image-preview-wrapper:not(.hidden) {
	display: flex;
}

.aop-image-preview-box {
	width: 60px;
	height: 60px;
	background-color: #f0f0f1;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border: 1px solid #dcdcde;
	border-radius: 4px;
}

/* The exact red this app already uses for its other destructive buttons (measured against WordPress' own
"Move to Trash" button on a real post), not a generic link red. */
.aop-delete-image__link {
	color: #cc1818;
}

.aop-delete-image__link:hover {
	color: #710d0d;
}