style.scss

$block-editor-link-control-number-of-actions: 1;
$preview-image-height: 140px;

@keyframes loadingpulse {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.block-editor-link-control {
	position: relative;
	min-width: $modal-min-width;

	.components-popover__content & {
		min-width: auto;
		width: 90vw;
		max-width: $modal-min-width;
	}
}

// Provides positioning context for reset button. Without this then when an
// error notice is displayed the input's reset button is incorrectly positioned.
.block-editor-link-control__search-input-wrapper {
	position: relative;
}

// Provides positioning context for search actions
.block-editor-link-control__search-input-container {
	position: relative;
}

// If the input doesn't have a visible label then
// we need to expand the input itself to occupy
// the full available horizontal space.
.block-editor-link-control__search-input.has-no-label .block-editor-url-input__input {
	flex: 1;
}

.block-editor-link-control__field {
	margin: $grid-unit-20; // allow margin collapse for vertical spacing.

	// Element wrapping the label and input.
	> .components-base-control__field {
		display: flex;
		align-items: center;
	}

	.components-base-control__label {
		margin-right: $grid-unit-20;
		margin-bottom: 0;
		min-width: 29px; // align with search results.
	}

	input[type="text"],
	// Specificity overide of URLInput defaults.
	&.block-editor-url-input input[type="text"].block-editor-url-input__input {
		@include input-control;
		width: calc(100% - #{$grid-unit-20 * 2});
		display: block;
		padding: 11px $grid-unit-20;
		margin: 0;
		position: relative;
		border: 1px solid $gray-300;
		border-radius: $radius-block-ui;
	}
}

.block-editor-link-control__search-error {
	margin: -$grid-unit-20*0.5 $grid-unit-20 $grid-unit-20; // negative margin to bring the error a bit closer to the button
}

.block-editor-link-control__search-actions {
	display: flex;
	flex-direction: row-reverse; // put "Cancel" on the left but retain DOM order.
	justify-content: flex-start;
	gap: $grid-unit-10;
	order: 20;
}

.components-button .block-editor-link-control__search-submit .has-icon {
	margin: -1px;
}

.block-editor-link-control__search-results-wrapper {
	position: relative;
	margin-top: -$grid-unit-20 + 1px;

	&::before,
	&::after {
		content: "";
		position: absolute;
		left: -1px;
		right: $grid-unit-20; // avoid overlaying scrollbars
		display: block;
		pointer-events: none;
		z-index: 100;
	}

	&::before {
		height: $grid-unit-20*0.5;
		top: 0;
		bottom: auto;
	}

	&::after {
		height: $grid-unit-20;
		bottom: 0;
		top: auto;
	}
}

.block-editor-link-control__search-results-label {
	padding: $grid-unit-20 $grid-unit-40 0;
	display: block;
	font-weight: 600;
}

.block-editor-link-control__search-results {
	margin: 0;
	padding: $grid-unit-20*0.5 $grid-unit-20 $grid-unit-20*0.5;
	max-height: 200px;
	overflow-y: auto; // allow results list to scroll

	&.is-loading {
		opacity: 0.2;
	}
}

.block-editor-link-control__search-item {
	position: relative;
	display: flex;
	align-items: flex-start; // when link text is very long it is important this indicator remains visible and thus should be aligned top.
	font-size: $default-font-size;
	cursor: pointer;
	background: $white;
	width: 100%;
	border: none;
	text-align: left;
	padding: $grid-unit-15 $grid-unit-20;
	border-radius: 2px;
	height: auto;

	&:hover,
	&:focus {
		background-color: $gray-100;

		.block-editor-link-control__search-item-type {
			background: $white;
		}
	}

	// The added specificity is needed to override.
	&:focus:not(:disabled) {
		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
	}

	&.is-selected {
		background: $gray-100;

		.block-editor-link-control__search-item-type {
			background: $white;
		}
	}

	&.is-current {
		flex-direction: column; // allow for stacking.
		background: transparent;
		border: 0;
		width: 100%;
		cursor: default;
		padding: $grid-unit-20;
	}

	.block-editor-link-control__search-item-header {
		display: block;
		flex-direction: row;
		align-items: flex-start;
		margin-right: $grid-unit-10;

		// Force text to wrap to improve UX when encountering long lines
		// of text, particular those with no spaces.
		// See: https://github.com/WordPress/gutenberg/issues/33586#issuecomment-888921188
		white-space: pre-wrap;
		overflow-wrap: break-word;

		.block-editor-link-control__search-item-info {
			word-break: break-all;
		}
	}

	&.is-preview .block-editor-link-control__search-item-header {
		display: flex;
		flex: 1; // Fill available space.
	}

	&.is-error .block-editor-link-control__search-item-header {
		align-items: center;
	}

	.block-editor-link-control__search-item-icon {
		position: relative;
		top: 0.2em;
		margin-right: $grid-unit-10;
		max-height: 24px;
		flex-shrink: 0;
		width: 24px;
		display: flex;
		justify-content: center;

		img {
			width: 16px; // favicons often have a source of 32px
		}
	}

	&.is-error .block-editor-link-control__search-item-icon {
		top: 0;
		width: 32px;
		max-height: 32px;
	}


	.block-editor-link-control__search-item-info,
	.block-editor-link-control__search-item-title {
		overflow: hidden;
		text-overflow: ellipsis;

		.components-external-link__icon {
			position: absolute;
			right: 0;
			margin-top: 0;
		}
	}

	.block-editor-link-control__search-item-title {
		display: block;
		margin-bottom: 0.2em;
		font-weight: 500;
		position: relative;

		mark {
			font-weight: 700;
			color: inherit;
			background-color: transparent;
		}

		span {
			font-weight: normal;
		}

		svg {
			display: none; // specifically requested to be removed visually as well.
		}
	}

	.block-editor-link-control__search-item-info {
		display: block;
		color: $gray-700;
		font-size: 0.9em;
		line-height: 1.3;
	}

	.block-editor-link-control__search-item-error-notice {
		font-style: italic;
		font-size: 1.1em;
	}

	.block-editor-link-control__search-item-type {
		display: block;
		padding: 3px 6px;
		margin-left: auto;
		font-size: 0.9em;
		background-color: $gray-100;
		border-radius: 2px;
		white-space: nowrap; // tags shouldn't go over two lines.
	}

	.block-editor-link-control__search-item-description {
		padding-top: 12px;
		margin: 0;

		&.is-placeholder {
			margin-top: 12px;
			padding-top: 0;
			height: 28px;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			&::before,
			&::after {
				display: block;
				content: "";
				height: 0.7em;
				width: 100%;
				background-color: $gray-100;
				border-radius: 3px;
			}
		}

		.components-text {
			font-size: 0.9em;
		}
	}

	.block-editor-link-control__search-item-image {
		display: flex;
		width: 100%;
		background-color: $gray-100;
		justify-content: center;
		height: $preview-image-height; // limit height
		max-height: $preview-image-height; // limit height
		overflow: hidden;
		border-radius: 2px;
		margin-top: 12px;

		&.is-placeholder {
			background-color: $gray-100;
			border-radius: 3px;
		}

		img {
			display: block; // remove unwanted space below image
			max-width: 100%;
			height: $preview-image-height; // limit height
			max-height: $preview-image-height; // limit height
		}
	}
}

.block-editor-link-control__search-item-top {
	display: flex;
	flex-direction: row;
	width: 100%; // clip.
}

.block-editor-link-control__search-item-bottom {
	transition: opacity 1.5s;
	width: 100%;
}


.block-editor-link-control__search-item.is-fetching {

	.block-editor-link-control__search-item-description {
		&::before,
		&::after {
			animation: loadingpulse 1s linear infinite;
			animation-delay: 0.5s; // avoid animating for fast network responses
		}

	}

	.block-editor-link-control__search-item-image {
		animation: loadingpulse 1s linear infinite;
		animation-delay: 0.5s; // avoid animating for fast network responses
	}

	.block-editor-link-control__search-item-icon {
		svg,
		img {
			opacity: 0;
		}

		&::before {
			content: "";
			display: block;
			background-color: $gray-100;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius: 100%;
			animation: loadingpulse 1s linear infinite;
			animation-delay: 0.5s; // avoid animating for fast network responses
		}
	}
}

.block-editor-link-control__loading {
	margin: $grid-unit-20; // when only loading control is shown it requires it's own spacing.
	display: flex;
	align-items: center;

	.components-spinner {
		margin-top: 0;
	}
}

// Separate Create button when following other suggestions.
.components-button + .block-editor-link-control__search-create {
	overflow: visible;
	padding: $grid-unit-15 $grid-unit-20;

	// Create fake border. We cannot use border because the button has a border
	// radius applied to it
	&::before {
		content: "";
		position: absolute;
		top: -#{$block-selected-child-margin*2};
		left: 0;
		display: block;
		width: 100%;
	}
}

.block-editor-link-control__search-create {
	align-items: center; // align text with icon.

	.block-editor-link-control__search-item-title {
		margin-bottom: 0;
	}

	.block-editor-link-control__search-item-icon {
		top: 0; // cancel compensatory spacing added to default suggestions.
	}
}

// Specificity override
.block-editor-link-control__search-results div[role="menu"] > .block-editor-link-control__search-item.block-editor-link-control__search-item {
	padding: 10px;
}

.block-editor-link-control__drawer {
	display: flex; // allow for ordering.
	order: 30;
	flex-direction: column;
	flex-basis: 100%; // occupy full width.
}

// Inner div required to avoid padding/margin
// causing janky animation.
.block-editor-link-control__drawer-inner {
	display: flex; // allow for ordering.
	flex-direction: column;
	flex-basis: 100%; // occupy full width.
	margin-top: $grid-unit-20;
	padding-top: $grid-unit-20;
	position: relative;

	&::after {
		content: "";
		display: block;
		height: 1px;
		background-color: $gray-300;
		position: absolute;
		left: -$grid-unit-20;
		right: -$grid-unit-20;
		top: 0;
	}
}

.block-editor-link-control__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: $grid-unit-20;
	padding-top: 0;
}

.block-editor-link-control__unlink {
	padding-left: $grid-unit-20;
	padding-right: $grid-unit-20;
}

.block-editor-link-control__settings {
	flex: 1;
	margin: 0;

	.is-alternate & {
		border-top: $border-width solid $gray-900;
	}
}

.block-editor-link-control__setting {
	margin-bottom: $grid-unit-20;

	&.block-editor-link-control__setting:last-child {
		margin-bottom: 0;
	}
}

.block-editor-link-control .block-editor-link-control__search-input .components-spinner {
	display: block;

	&.components-spinner { // Specificity override.
		position: absolute;
		left: auto;
		bottom: auto;
		top: calc(50% - #{$spinner-size} / 2);
		right: $grid-unit-20;
	}
}

.block-editor-link-control__search-item-action {
	margin-left: auto; // push to far right hand side
	flex-shrink: 0;
}