.search-widget {
	position: relative;
	flex: 1;
	min-width: 0;
	width: 100%;
	max-width: 600px;
	font-family: var(--app-font-family);
	color: var(--app-font-color);
	font-size: 0.9em;
}

/* ---------- Search Bar (input + source toggle) ---------- */

.search-bar {
	display: flex;
	align-items: stretch;
	height: 32px;
	background-color: var(--background-color);
	border: 1px solid var(--border-color);
	border-radius: 4px;
	overflow: hidden;

	&:has(:focus) {
		outline: 2px solid var(--app-font-color);
		outline-offset: -1px;
	}
}

.search-icon {
	flex-shrink: 0;
	padding: 0 8px;
	color: var(--gray-primary);
	font-size: 1rem;
}

.search-source-select {
	flex-shrink: 0;
	border-right: 1px solid var(--border-color);
	& select {
		border: none;
		width: 100%;
		max-width: min(140px, 14vw);
		padding-left: 0.5rem;

		&:focus {
			outline: none;
		}
	}
}

.search-autocomplete {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	font-family: var(--app-font-family);
	color: var(--app-font-color);
	padding: 0 1px;
	position: relative;
	z-index: 2;

	& .async-dropdown-container {
		flex: 1;
		min-width: 0;
		height: 100%;
	}

	& .async-dropdown-input-wrapper {
		height: 100%;
	}

	& .async-dropdown-input {
		border: none;
		height: 100%;
		border-radius: 0;
		background: transparent;
		width: 100%;
		padding-right: 8px;
		font-family: var(--app-font-family);
		color: var(--app-font-color);

		&:focus {
			outline: none;
		}
	}
}

/* Grouped dropdown */

.suggest-group {
	list-style: none;

	& ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
}

.suggest-group-header {
	padding: 8px 12px;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--app-font-color);
	background-color: var(--background-highlight-color);
}

.async-dropdown-loading {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	color: var(--gray-primary);
	font-style: italic;
}

.no-suggestions {
	color: var(--gray-primary);
	font-style: italic;
}

/* ---------- Suggestion Item Icon ---------- */

.search-suggestion-icon {
	color: var(--gray-primary);
	flex-shrink: 0;
}

/* ---------- Responsive ---------- */

@media (max-width: 600px) {
	.search-widget {
		max-width: 100%;
	}

	.search-bar {
		align-items: center;
	}

	.search-source-select {
		width: 32px;
		overflow: clip;
		& select {
			padding-left: 3px;
		}
	}

	.search-icon {
		padding: 0 6px;
	}
}