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

.block-library-utils__media-control {
	// Ensure the dropzone is positioned to the size of the item.
	position: relative;

	// Since there is no option to skip rendering the drag'n'drop icon in drop
	// zone, we hide it for now.
	.components-drop-zone__content-icon {
		display: none;
	}

	.block-library-utils__media-control__replace-flow {
		display: block;

		button.components-button {
			color: $gray-900;
			box-shadow: inset 0 0 0 1px $gray-400;
			width: 100%;
			display: block;
			height: $grid-unit-50;
			padding-right: $grid-unit-40;

			&:hover {
				color: var(--wp-admin-theme-color);
			}

			&:focus {
				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
			}
		}
	}
}

.block-library-utils__media-control__inspector-media-replace-title {
	word-break: break-all;
	// The Button component is white-space: nowrap, and that won't work with line-clamp.
	white-space: normal;

	// Without this, the ellipsis can sometimes be partially hidden by the Button padding.
	text-align: start;
}

.block-library-utils__media-control__inspector-image-indicator {
	width: 20px;
	height: 20px;
	border-radius: $radius-small;
	box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
	background: $white linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
	background-size: cover;
	// Show a thin outline in Windows high contrast mode, otherwise the button is invisible.
	outline: 1px solid transparent;
}

.block-library-utils__media-control__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-library-utils__media-control:hover &,
	&:focus,
	&:hover {
		opacity: 1;
	}

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