.vpe-search,
.vpe-mobile__search {
	position: relative;
}

.vpe-live-search {
	position: absolute;
	top: calc(100% + .5rem);
	left: 0;
	z-index: 100;
	width: 100%;
	max-height: min(24rem, 60vh);
	overflow-y: auto;
	padding: .375rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--card);
	box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 35%);
}

.vpe-live-search[hidden] {
	display: none;
}

.vpe-live-search__item {
	display: flex;
	min-height: 64px;
	align-items: center;
	gap: .75rem;
	padding: .25rem .5rem;
	border-radius: calc(var(--radius) - .25rem);
	color: var(--foreground);
	text-decoration: none;
}

/*
 * Подсветка строки — нейтральная поверхность, а не заливка акцентным
 * цветом. На акцентной заливке белый текст подсказки терял контраст,
 * а после смены акцента на янтарный стал бы нечитаемым вовсе.
 */
.vpe-live-search__item:hover,
.vpe-live-search__item:focus-visible,
.vpe-live-search__item.is-active {
	background: var(--surface-2);
	box-shadow: inset 2px 0 0 0 var(--primary);
	outline: none;
}

.vpe-live-search__thumb {
	width: 56px;
	height: 56px;
	flex: 0 0 56px;
	border-radius: calc(var(--radius) - .375rem);
	object-fit: cover;
}

.vpe-live-search__title {
	min-width: 0;
	font-weight: 700;
	line-height: 1.25;
}

.vpe-live-search__empty {
	margin: 0;
	padding: .875rem;
	color: var(--muted-foreground);
	text-align: center;
}

@media (max-width: 767px) {
	.vpe-mobile__search .vpe-live-search {
		top: calc(100% + .375rem);
	}
}