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

.block-editor-global-styles-background-panel__inspector-media-replace-container {
	position: relative;

	&.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__dropdown-toggle {
	cursor: var(--wpds-cursor-control);
	background: transparent;
	border: none;
	height: 100%;
	width: 100%;
	padding-left: $grid-unit-15;
	padding-right: $grid-unit-40;
}

.block-editor-global-styles-background-panel__reset {
	position: absolute;
	right: 0;
	top: $grid-unit;
	margin: auto $grid-unit auto;
	opacity: 0;
	@media not ( prefers-reduced-motion ) {
		transition: opacity 0.1s ease-in-out;
	}

	&.block-editor-global-styles-background-panel__reset {
		border-radius: $radius-small;
	}

	.block-editor-global-styles-background-panel__dropdown-toggle:hover + &,
	&:focus,
	&:hover {
		opacity: 1;
	}

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

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

.block-editor-global-styles-background-panel__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-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;
	}
}