/* ==========================================================================
 * Search — foot search field and lens
 * ========================================================================== */
.-foot-search::-webkit-input-placeholder {
	color: var(--app-muted);
}

.-foot-lens {
	z-index: 1;
	width: 100%;
	height: 100%;
	display: flex;
	position: relative;
	clip-path: var(--squircle);
	background: var(--surface);
	transition: width 0.3s, transform 0.2s, background 0.2s;
}

.-foot-lens:focus-within {
	background: var(--search-focus);
}

.-foot-phantom:empty {
	opacity: 0;
}

.-foot-phantom {
	top: 0;
	bottom: 0;
	z-index: 1;
	width: 100%;
	display: flex;
	font-size: 3.75vw;
	overflow: hidden;
	white-space: pre;
	position: absolute;
	color: #ffffff40;
	align-items: center;
	pointer-events: none;
	letter-spacing: 0.09375vw;
	text-transform: lowercase;
	font-family: var(--app-font);
	padding: 0 10.9375vw 0 3.75vw;
}

.-foot-search {
	z-index: 2;
	width: 100%;
	display: flex;
	font-size: 3.75vw;
	letter-spacing: 0.09375vw;
	color: var(--app-color);
	text-transform: lowercase;
	padding: 0 10.9375vw 0 3.75vw;
	transition: width 0.3s, opacity 0.3s, background 0.2s;
}

.-search-guesser {
	left: 50vw;
	top: 0;
	opacity: 0;
	z-index: 95000;
	display: flex;
	gap: 1.5625vw;
	position: fixed;
	min-height: 10vw;
	max-width: 87.5vw;
	align-items: center;
	white-space: pre;
	padding: 0 3.125vw;
	font-size: 3.75vw;
	color: #fff;
	font-weight: 500;
	background: #000;
	pointer-events: none;
	border-radius: 3.125vw;
	transform-origin: 50% 100%;
	font-family: var(--app-font);
	box-shadow: 0 1.5625vw 5vw rgb(0 0 0 / 55%);
	transform: translate(-50%, calc(-100% - 3.125vw)) scale(.92);
	transition: opacity .2s, transform .25s cubic-bezier(.2,.85,.2,1);
}

.-search-guesser::after {
	left: 50%;
	content: "";
	width: 3.75vw;
	height: 3.75vw;
	bottom: -1.5625vw;
	position: absolute;
	background: #000;
	pointer-events: none;
	transform: translateX(-50%) rotate(45deg);
}

.-search-guesser.---show-search-guesser {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, calc(-100% - 3.125vw)) scale(1);
}

.-search-guesser-term {
	display: flex;
	min-width: 0;
	overflow: hidden;
	white-space: pre;
	align-items: center;
}

.-search-guesser-unmatched {
	color: #82c1ff;
}

.-search-guesser-match {
	color: var(--app-accent);
}

.-search-guesser-query {
	color: #cbcbcb;
}

.-search-guesser-query.---search-guesser-strike {
	text-decoration-color: #fff;
	text-decoration-line: line-through;
	text-decoration-thickness: 0.3125vw;
}

.-search-guesser-arrow {
	color: #b0a890;
	font-size: 4.375vw;
}

.-widget.---search-glissando::after {
	inset: 0;
	content: "";
	z-index: 8;
	position: absolute;
	pointer-events: none;
	background: linear-gradient(90deg, transparent 0%, rgb(60 160 255 / 0%) 18%, rgb(60 160 255 / 18%) 46%, rgb(255 218 102 / 12%) 54%, rgb(60 160 255 / 0%) 82%, transparent 100%);
	transform: translateX(-110%);
	animation: widget-glissando 1.05s cubic-bezier(.2,.75,.2,1) 1;
}

.-editor-toolkit-search {
	border: 0;
	outline: 0;
	color: #fff;
	height: 12.5vw;
	font-size: 3.75vw;
	padding: 0 4.6875vw;
	font-family: "Nunito";
	min-height: 14.0625vw;
	background: var(--dimmer);
	clip-path: var(--squircle-small);
}

.-editor-toolkit-search.---toolkit-search-hidden {
	display: none;
}

.-search-results-title {
	width: 93.75vw;
	color: var(--app-muted);
	font-size: 3.125vw;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .3125vw;
}

.-foot-search:focus {
	color: var(--app-color);
	background: #0000;
}

.-foot-search::placeholder {
	color: var(--app-muted);
}