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

.block-editor-content-only-controls__media {
	width: 100%;
	box-shadow: inset 0 0 0 $border-width $gray-400;
	padding-right: $grid-unit-40;

	&: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);
	}
}

.block-editor-content-only-controls__media-replace-flow {
	// Required, otherwise the width collapses.
	display: block;
}

.block-editor-content-only-controls__media-row {
	align-items: center;
}

.block-editor-content-only-controls__media-placeholder {
	width: 24px;
	height: 24px;
	border-radius: $radius-small;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
	display: inline-block;
	padding: 0;
	background:
		$white
		linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
}

.block-editor-content-only-controls__media-title {
	width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.block-editor-content-only-controls__media-thumbnail {
	width: 20px;
	height: 20px;
	border-radius: $radius-small;
	align-self: center;
	overflow: hidden;

	img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover;
	}
}

.block-editor-content-only-controls {
	position: relative;
}

.block-editor-content-only-controls__media-reset {
	position: absolute;
	right: 0;
	top: $grid-unit;
	margin: auto $grid-unit auto;
	opacity: 0;
	border-radius: $radius-small;
	@media not ( prefers-reduced-motion ) {
		transition: opacity 0.1s ease-in-out;
	}

	.block-editor-content-only-controls:hover &,
	&:focus,
	&:hover {
		opacity: 1;
	}

	@media (hover: none) {
		// Show reset button on devices that do not support hover.
		opacity: 1;
	}
}