header {
	anchor-name: --search-anchor;
}

.search-dialog {
	background: var(--page-colour);
	border: 2px solid var(--reverse-highlight);
	border-radius: 1em;
	box-sizing: border-box;
	left: anchor(left);
	margin: 0;
	max-height: calc(100vh - anchor-size(height) - 1em);
	overflow: auto;
	padding: 1em;
	position: fixed;
	position-anchor: --search-anchor;
	top: anchor(bottom);
	width: anchor-size(width);
	z-index: 1;
	
	&::backdrop {
		background: rgba(0, 0, 0, 0.75);
	}
}

.search-form {
	display: flex;
	gap: 0.5em;
	justify-content: space-between;
	
	input[type=search] {
		background: color-mix(in srgb, var(--page-colour), var(--text-colour) 10%);
		border: 0;
		border-radius: 1em;
		color: var(--text-colour);
		flex-grow: 1;
		font: inherit;
		min-width: 0;
		padding: 0.5em;
	}
	
	button {
		flex-shrink: 0;
		padding: 0 1em;
	}
}

.search-results {
	margin-top: 1em;
	
	ul {
		margin: 0;
		padding: 0;
	}
	
	li {
		display: flex;
		flex-direction: column;
		gap: 0.3em;
		
		&:not(:first-child):before {
			content: "";
			border-bottom: 1px solid color-mix(in srgb, var(--text-colour), transparent);
			display: block;
			margin: 0.5em 0;
			width: 100%;
		}
	}
	
	.title,
	.description {
		display: block;
	}
}

@keyframes search-loading {
	from { rotate: 0deg }
	to { rotate: 360deg }
}

.search-dialog.loading .search-results {
	align-items: center;
	display: flex;
	justify-content: center;
	overflow: visible;
	position: relative;
	
	&:after {
		animation: search-loading 1s infinite;
		background: var(--highlight);
		content: "";
		display: block;
		height: 100px;
		mask-image: url(/theme/images/background-logo.png);
		mask-size: cover;
		width: 100px;
	}
}