.search-page {
	width: min(900px, 90vw);
	@media (max-width: 650px) {
		width: 100%;
	}
}

nav .search-form {
	flex-grow: 2;
	.search-wrapper {
		width: 100%;
		max-width: 400px;
		margin: 0px auto;
	}
}

.search-form {
	.search-wrapper {
		position: relative;
		width: 100%;
		height: 100%;
		margin: 0px 0px 0px 0px;

		svg.magnifying-glass {
			position: absolute;
			left: 16px;
			top: 12px;
			width: 20px;
			height: 20px;
			fill: #424242;
		}

		input[type=text] {
			width: 100%;
			padding: 9px;
			padding-left: 43px;
			margin: auto 0px;
			display: block;
			border-radius: 50px;
			font-size: 17px;
			font-weight: 300;
			background: white;
			color: black;
			border: 2px solid transparent;
			@media (prefers-color-scheme: dark) {
				color: white;
				border: 2px solid #424242;
				background: #1e1e1e;
			}
		}
		&:has(button[type=submit]) input[type=text] {
			padding-right: 109px;
		}

		button[type=submit] {
			position: absolute;
			right: 0px;
			top: 0px;
			margin: 0px;
			padding: 0px 5px 0px 0px;
			height: 100%;
			width: 100px;
			border-radius: 0px 50px 50px 0px;
			transition: all 0ms;
		}
	}

	.filters {
		display: flex;
		flex-direction: row;
		gap: var(--basic-gap);
		width: 100%;
		margin-top: 20px;
		margin-bottom: 40px;
		@media (max-width: 768px) {
			flex-direction: column;
			margin-bottom: 20px;
		}

		input,
		select,
		textarea {
			padding: 3px;
		}

		select {
			width: 100%;
		}

		.licenses {
			display: grid;
			grid-template-columns: auto auto auto auto;
			label {
				margin-right: 20px;
			}
			@media (max-width: 900px) {
				grid-template-columns: 1fr 1fr;
				label {
					margin-right: 0px;
				}
				div {
					min-width: 150px;
				}
			}
			@media (max-width: 400px) {
				grid-template-columns: 1fr;
			}

		}

		span.section {
			display: block;
			opacity: 0.6;
			margin-bottom: 3px;
		}

		.filter:last-child {
			flex-grow: 2;
		}

		.filter .wrapper {
			border-radius: 7px;
			padding: 10px 17px;
			height: 100%;
			background: #fefefe;
			border: 1px solid white;
			@media (prefers-color-scheme: dark) {
				background: #0b0b0b;
				border: 1px solid black;
			}
		}
	}

	.search-suggestions {
		position: absolute;
		display: none;
		top: calc(100% - 2px);
		left: 0px;
		right: 0px;
		padding: 0px 10px 8px 10px;
		z-index: 100;
		font-size: 17px;
		font-weight: 300;
		border-radius: 0px 0px 23px 23px;
		border: 2px solid var(--accent-color);
		border-top-width: 0px;
		background: white;
		color: black;
		@media (prefers-color-scheme: dark) {
			color: white;
			background: #1e1e1e;
		}
		div {
			padding: 2px 99px 2px 33px;
			cursor: pointer;
			&:hover {
				background-color: var(--background-color);
				border-radius: 5px;
			}
		}
		span {
			opacity: 0.7;
		}
	}

	&:has(input[type=text]:focus):has(.search-suggestions:not(:empty)) {
		.search-suggestions {
			display: block;
		}
		.search-wrapper input[type=text] {
			border-radius: 23px 23px 0px 0px;
			border-bottom-color: transparent;
		}
		.search-wrapper button[type=submit] {
			border-radius: 0px 23px 0px 0px;
		}
	}
	&:has(input[type=text]:focus),
	&:has(button[type=submit]:focus) {
		.search-wrapper input[type=text] {
			outline: none;
			border-color: var(--accent-color);
		}
	}
}

#search-results {
	.metadata {
		opacity: 0.75;
	}

	.item {
		display: block;
		position: relative;
		margin: 16px 0px;
		padding: 12px 232px 12px 12px;
		border-radius: 8px;
		font-weight: 300;
		color: var(--text-color);
		background-color: var(--panel-background);
		transition: all 125ms;
		box-shadow: none;
		@media (max-width: 768px) {
			padding: 12px;
		}

		.name,
		.details,
		.snippet {
			margin: 8px;
		}
		.tags {
			margin: 12px 3px 3px 8px;
			.tag {
				pointer-events: none;
			}
		}

		.name {
			position: relative;
			font-size: 1.2em;
			padding-right: 60px;

			a {
				text-decoration: none;
				font-weight: inherit;
				&:hover {
					text-decoration: underline;
				}
			}

			.rating {
				display: inline-block;
				position: absolute;
				right: 0px;
				top: 2px;
				height: 16px;
				opacity: 0.5;
				img {
					top: -2px;
					height: 100%;
					filter: invert(1);
					@media (prefers-color-scheme: dark) {
						filter: invert(0);
					}
				}
				.number {
					height: 100%;
					display: inline-block;
					vertical-align: top;
					color: var(--text-color);
				}
			}
		}

		.details {
			font-size: smaller;
			a {
				font-weight: 400;
				color: inherit;
				text-decoration: none;
				&:hover {
					text-decoration: underline;
				}
			}
		}

		.snippet .search-highlight {
			font-weight: bold;
		}

		.thumbnail {
			position: absolute;
			width: 200px;
			max-width: 25vw;
			top: 0px;
			right: 0px;
			margin: 20px;
			border-radius: 7px;
			@media (max-width: 768px) {
				position: relative;
				display: block;
				max-width: calc(100% - 16px);
				width: calc(100% - 16px);
				top: auto;
				right: auto;
				margin: 8px 8px 20px 8px;
			}
		}
	}
}

.search-end {
	text-align: center;
	opacity: 0.5;
	color: black;
	padding: 40px 20px;
	@media (prefers-color-scheme: dark) {
		color: white;
		img {
			filter: invert(1);
		}
	}

	* {
		display: block;
		margin: 16px auto;
	}
}