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

// Hack to hide when the media modal is open
// Otherwise in Firefox the popover remains visible on top of the modal
// Changing the z-index of Popovers permanently have wider implications so only temporarily lower it.
.modal-open .block-editor-media-replace-flow__options {
	z-index: z-index(".components-popover.block-editor-media-replace-flow__options");
}

.block-editor-media-replace-flow__indicator {
	margin-left: 4px;
}

.block-editor-media-replace-flow__media-upload-menu:not(:empty) + .block-editor-media-flow__url-input {
	border-top: $border-width solid $gray-300;
	margin-top: $grid-unit-10;
	padding-bottom: $grid-unit-10;
}

// Toolbar variant: Dark border (high contrast)
.block-editor-media-replace-flow__options.is-variant-toolbar {
	.block-editor-media-replace-flow__media-upload-menu:not(:empty) + .block-editor-media-flow__url-input {
		border-top-color: $gray-900;
	}
}

.block-editor-media-flow__url-input {
	margin-right: -$grid-unit-10;
	margin-left: -$grid-unit-10;
	padding: $grid-unit-20;

	.block-editor-media-replace-flow__image-url-label {
		display: block;
		top: $grid-unit-20;
		margin-bottom: $grid-unit-10;
	}

	.block-editor-link-control {
		width: 300px; // Hardcoded width avoids resizing of control when switching between preview/edit.

		.block-editor-url-input {
			padding: 0; // Cancel unnecessary default 1px padding in this case.
			margin: 0; // Reset default LinkControl margins.
		}

		.block-editor-link-control__tools {
			justify-content: flex-end;
			padding: $grid-unit-20 var(--wp-admin-border-width-focus) var(--wp-admin-border-width-focus);
		}

		.block-editor-link-control__preview.is-current {
			width: auto;
			padding: 0;
		}

		.block-editor-link-control__search-input.block-editor-link-control__search-input input[type="text"] {
			margin: 0;
			width: 100%;
		}

		.block-editor-link-control__search-actions {
			padding: $grid-unit-10 0 0;
		}
	}
}