.block-editor-global-styles-background-panel__inspector-media-replace-container {
	border: $border-width solid $gray-300;
	border-radius: $radius-small;
	// Full width. ToolsPanel lays out children in a grid.
	grid-column: 1 / -1;

	&.is-open {
		background-color: $gray-100;
	}

	.block-editor-global-styles-background-panel__image-tools-panel-item {
		flex-grow: 1;
		border: 0;

		.components-dropdown {
			display: block;
		}
	}

	.block-editor-global-styles-background-panel__inspector-preview-inner {
		height: 100%;
	}

	.components-dropdown {
		display: block;

		.block-editor-global-styles-background-panel__dropdown-toggle {
			height: 40px;
		}
	}
}

.block-editor-global-styles-background-panel__image-tools-panel-item {
	border: $border-width solid $gray-300;

	// Full width. ToolsPanel lays out children in a grid.
	grid-column: 1 / -1;

	// 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;
	}

	.components-dropdown {
		display: block;
	}

	button.components-button {
		color: $gray-900;
		width: 100%;
		display: block;

		&: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-editor-global-styles-background-panel__loading {
		height: 100%;
		position: absolute;
		z-index: 1;
		width: 100%;
		padding: 10px 0 0 0;

		svg {
			margin: 0;
		}
	}
}

.block-editor-global-styles-background-panel__image-preview-content,
.block-editor-global-styles-background-panel__dropdown-toggle {
	height: 100%;
	width: 100%;
	padding-left: $grid-unit-15;
}

.block-editor-global-styles-background-panel__dropdown-toggle {
	cursor: pointer;
	background: transparent;
	border: none;
}

.block-editor-global-styles-background-panel__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;
	text-align-last: center;
}

.block-editor-global-styles-background-panel__inspector-preview-inner {
	.block-editor-global-styles-background-panel__inspector-image-indicator-wrapper {
		width: 20px;
		height: 20px;
		min-width: auto;
	}
}

.block-editor-global-styles-background-panel__inspector-image-indicator {
	background-size: cover;
	border-radius: $radius-round;
	width: 20px;
	height: 20px;
	display: block;
	position: relative;
}

.block-editor-global-styles-background-panel__inspector-image-indicator::after {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	bottom: -1px;
	right: -1px;
	border-radius: $radius-round;
	box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
	// Show a thin outline in Windows high contrast mode, otherwise the button is invisible.
	border: 1px solid transparent;
	box-sizing: inherit;
}

.block-editor-global-styles-background-panel__dropdown-content-wrapper {
	min-width: 260px;
	overflow-x: hidden;

	.components-focal-point-picker-wrapper {
		background-color: $gray-100;
		width: 100%;
		border-radius: $radius-small;
		border: $border-width solid $gray-300;
	}

	.components-focal-point-picker__media--image {
		max-height: 180px;
	}

	// Override focal picker to avoid a double border.
	.components-focal-point-picker::after {
		content: none;
	}
}

// Push control panel into the background when the media modal is open.
.modal-open .block-editor-global-styles-background-panel__popover {
	z-index: z-index(".block-editor-global-styles-background-panel__popover");
}

.block-editor-global-styles-background-panel__media-replace-popover {
	.components-popover__content {
		// width of block-editor-global-styles-background-panel__dropdown-content-wrapper minus padding.
		width: 226px;
	}

	.components-button {
		padding: 0 $grid-unit-10;
	}

	.components-button .components-menu-items__item-icon.has-icon-right {
		margin-left: $grid-unit-30 - $grid-unit-10;
	}
}