// Link input
$input-padding: $grid-unit $grid-unit $grid-unit $grid-unit-15;
$input-size: 300px;

.block-editor-block-list__block .block-editor-url-input,
.components-popover .block-editor-url-input,
.block-editor-url-input {
	flex-grow: 1;
	position: relative;
	padding: 1px;

	input[type="text"] {
		width: 100%;
		@include break-small() {
			width: $input-size;
		}
		padding: $input-padding;
		border: none;
		border-radius: 0;
		margin-left: 0;
		margin-right: 0;

		/* Fonts smaller than 16px causes mobile safari to zoom. */
		font-size: $mobile-text-min-font-size;
		@include break-small {
			font-size: $default-font-size;
		}

		&::-ms-clear {
			display: none;
		}
	}

	&.is-full-width {
		width: 100%;

		.block-editor-url-input__input[type="text"] {
			width: 100%;
		}

		&__suggestions {
			width: 100%;
		}
	}

	.components-spinner {
		position: absolute;
		right: $input-padding;
		bottom: $input-padding + $grid-unit-10 + 1;
		margin: 0;
	}
}

.block-editor-url-input__input[type="text"] {
	@include input-control;
}

// Suggestions
.block-editor-url-input__suggestions {
	max-height: 200px;
	transition: all 0.15s ease-in-out;
	@include reduce-motion("transition");
	padding: 4px 0;
	// To match the url-input width: input width + padding + 2 buttons.
	width: $input-size + 2;
	overflow-y: auto;
}

// Hide suggestions on mobile until we @todo find a better way to show them
.block-editor-url-input__suggestions,
.block-editor-url-input .components-spinner {
	display: none;
	@include break-small() {
		display: inherit;
	}
}

.block-editor-url-input__suggestion {
	padding: 4px $input-padding;
	color: $gray-700;
	display: block;
	font-size: $default-font-size;
	cursor: pointer;
	background: $white;
	width: 100%;
	border: none;
	text-align: left;
	box-shadow: none;

	&:hover {
		background: $gray-300;
	}

	&:focus,
	&.is-selected {
		background: var(--gc-admin-theme-color-darker-20);
		color: $white;
		outline: none;
	}
}

// Toolbar button
.components-toolbar-group > .block-editor-url-input__button,
.components-toolbar > .block-editor-url-input__button {
	position: inherit; // Let the dialog position according to parent.
}

.block-editor-url-input__button .block-editor-url-input__back {
	margin-right: 4px;
	overflow: visible;

	&::after {
		content: "";
		position: absolute;
		display: block;
		width: 1px;
		height: 24px;
		right: -1px;
		background: $gray-300;
	}
}

.block-editor-url-input__button-modal {
	box-shadow: $shadow-popover;
	border: 1px solid $gray-300;
	background: $white;
}

.block-editor-url-input__button-modal-line {
	display: flex;
	flex-direction: row;
	flex-grow: 1;
	flex-shrink: 1;
	min-width: 0;
	align-items: flex-start;

	.components-button {
		flex-shrink: 0;
		width: $button-size;
		height: $button-size;
	}
}