.searchLabel {
	margin-right: 5px;
}

.search {
	display: flex;
	flex-direction: column;

	--radius: 5px;
}

.searchBox {
	border: none;
	outline: none;
	background-color: var(--element-bg);
	color: white;
	padding: 8px;
	border-radius: var(--radius);
	height: 25px;
}

.searchBox[data-suggestions]:focus {
	border-radius: var(--radius) var(--radius) 0 0;
}

.searchSuggestions {
	background-color: var(--element-bg);
	margin: 0;
	list-style: none;
	padding: 0;
	border-radius: 0 0 var(--radius) var(--radius);
}

.searchSuggestions>li {
	display: flex;
	align-items: center;
	height: 25px;
	padding: 8px;
}

.searchSuggestions>li:hover {
	background-color: rgba(255, 255, 255, 0.2);
}

.searchSuggestions:empty::after {
	content: "No suggestions";
	color: gray;
	font-style: italic;
}