.block-editor-url-popover__additional-controls {
	border-top: $border-width solid $gray-300;
}

.block-editor-url-popover__additional-controls > div[role="menu"] .components-button:not(:disabled):not([aria-disabled="true"]):not(.is-secondary) > svg {
	box-shadow: none;
}

.block-editor-url-popover__additional-controls div[role="menu"] > .components-button {
	padding-left: $grid-unit-15;
}

.block-editor-url-popover__row {
	display: flex;
}

// Any children of the popover-row that are not the settings-toggle
// should take up as much space as possible.
.block-editor-url-popover__row > :not(.block-editor-url-popover__settings-toggle) {
	flex-grow: 1;
}

// Mimic toolbar component styles for the icons in this popover.
.block-editor-url-popover .components-button.has-icon {
	padding: 3px;

	> svg {
		padding: 5px;
		border-radius: $radius-block-ui;
		height: 30px;
		width: 30px;
	}

	&:not(:disabled):focus {
		box-shadow: none;

		> svg {
			@include block-toolbar-button-style__focus();
		}
	}
}

.block-editor-url-popover__settings-toggle {
	flex-shrink: 0;

	// Add a left divider to the toggle button.
	border-radius: 0;
	border-left: $border-width solid $gray-300;
	margin-left: 1px;

	&[aria-expanded="true"] .dashicon {
		transform: rotate(180deg);
	}
}
.block-editor-url-popover__input-container {
	.components-base-control:last-child,
	.components-base-control:last-child .components-base-control__field {
		margin-bottom: 0;
	}
}

.block-editor-url-popover__settings {
	display: block;
	padding: $grid-unit-20;
	border-top: $border-width solid $gray-300;
}

.block-editor-url-popover__link-editor,
.block-editor-url-popover__link-viewer {
	display: flex;

	.block-editor-url-input .components-base-control__field {
		margin-bottom: 0;
	}
	.block-editor-url-input .components-spinner {
		bottom: $input-padding + 1;
	}
}

.block-editor-url-popover__link-viewer-url {
	margin: $grid-unit-10 - $border-width;
	flex-grow: 1;
	flex-shrink: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 150px;
	max-width: 500px;

	&.has-invalid-link {
		color: $alert-red;
	}
}