// Link input
$input-padding: 10px;
$input-size: 230px;

.editor-block-list__block .blocks-url-input {
	width: 100%;
	flex-grow: 1;
	position: relative;
	width: $input-size;

	input[type=text] {
		width: 100%;
		padding: $input-padding;
		border: none;
		margin: 0;

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

	.spinner {
		position: absolute;
		right: 0;
		top: 10px;
		margin: 0;
	}
}

// Suggestions
.blocks-url-input__suggestions {
	position: absolute;
	background: $white;
	box-shadow: $shadow-popover;
	border: 1px solid $light-gray-500;
	max-height: 200px;
	overflow-y: scroll;
	transition: all .15s ease-in-out;
	list-style: none;
	margin: 0 -1px;
	padding: 4px 0;
	width: $input-size + $icon-button-size * 2 + 2px; // add borders
}

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

.blocks-url-input__suggestion {
	padding: 4px #{ $icon-button-size + $input-padding } 4px $input-padding;
	color: $dark-gray-300; // lightest we can use for contrast
	display: block;
	font-size: $default-font-size;
	cursor: pointer;
	background: $white;
	width: 100%;
	border: none;
	text-align: left;
	@include menu-style__neutral();

	&:hover {
		background: $light-gray-500;
	}

	&:focus,
	&.is-selected {
		background: darken( $blue-medium-500, 15 ); // is overridden in _admin-schemes.scss to be theme dependant
		color: $white;
		outline: none;
	}
}

// Toolbar button
.components-toolbar > .blocks-url-input__button {
	position: inherit;	// let the dialog position according to parent
}

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

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

.blocks-url-input__button .blocks-url-input__suggestions {
	left: -40px;
	right: -32px;
}
