:root {
	--size-search-container: 28rem;
}

.search-container {
	position: relative;
}

.search-input {
	border: var( --border-subtle );
	width: 100%;
	margin: var( --spacing-header ) 0;
	/* Match Codex TextInput. */
	padding: var( --spacing-vertical-search-input ) var( --spacing-horizontal-search-input );
	line-height: var( --line-height-medium );
}

.search-results {
	display: none;
	background-color: var( --background-color-base );
	position: absolute;
	/* Ensure the menu is flush with the bottom of the input. */
	margin: calc( var( --spacing-header ) * -1 ) 0 0;
	padding: 0;
	border: var( --border-subtle );
	border-top: 0;
	line-height: var( --line-height-medium );
	width: var( --size-full );
	max-height: calc( 100vh - var( --size-header--mobile ) );
	overflow: auto;
	box-shadow: var( --box-shadow-drop-medium );
	z-index: var( --z-index-stacking-1 );
}

.search-results li {
	list-style: none none;
	margin: 0;
	border-bottom: var( --border-subtle );
}

.search-results li:last-child {
	border-bottom: 0;
}

.search-result {
	display: block;
	/* Match Codex MenuItem. */
	padding: 0.5rem 0.75rem;
}

.search-result dd {
	color: var( --color-base );
	/* Remove browser style. */
	margin-left: 0;
}

/* stylelint-disable-next-line selector-max-id */
#selected-search-result,
.search-result:hover {
	background: var( --background-color-interactive );
	text-decoration: none;
}

@media ( min-width: 768px ) {
	.search-container {
		width: var( --size-search-container );
	}
}