// 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 have wider implications.
.modal-open .block-editor-media-replace-flow__options {
	display: none;
}

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

.block-editor-media-flow__url-input {
	border-top: $border-width solid $gray-900;
	margin-top: $grid-unit-10;
	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: 220px; // 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.
		}

		.components-base-control .components-base-control__field {
			margin-bottom: 0;
		}

		.block-editor-link-control__search-item-title {
			max-width: 180px;
			white-space: nowrap;
		}

		.block-editor-link-control__search-item-info {
			white-space: nowrap;
		}

		.block-editor-link-control__search-item.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 {
			top: 0; // cancel default top positioning
			right: 4px;
		}
	}
}

.block-editor-media-flow__error {
	padding: 0 20px 20px 20px;
	max-width: 255px;

	.components-with-notices-ui {
		max-width: 255px;

		.components-notice__content {
			overflow: hidden;
			word-wrap: break-word;
		}
		.components-notice__dismiss {
			position: absolute;
			right: 10px;
		}
	}
}