@wordpress/block-library 9.41.1-next.v.202603102151.0 → 9.42.0

package/src/utils/media-control.scss

@@ -11,31 +11,67 @@
 		display: none;
 	}
 
-	button.components-button {
-		color: $gray-900;
-		box-shadow: inset 0 0 0 1px $gray-400;
-		width: 100%;
+	.block-library-utils__media-control__replace-flow {
 		display: block;
-		height: $grid-unit-50;
 
-		&:hover {
-			color: var(--wp-admin-theme-color);
-		}
+		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);
+			&:focus {
+				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			}
 		}
 	}
+}
 
-	.components-dropdown {
-		display: block;
+.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;
 	}
 
-	img {
-		width: 20px;
-		min-width: 20px;
-		aspect-ratio: 1;
-		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
-		border-radius: 2px;
+	@media (hover: none) {
+		// Show reset button on devices that do not support hover.
+		opacity: 1;
 	}
 }