/* # Overrides */

[vv-page="/search"]:not(body) {
	display: flex;
	flex-direction: column;
	gap: var(--padding);
}

/* # Sections */

/* ## Search */

section.search {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--padding);
	background-color: rgba(255, 255, 255, .05);
	padding: calc(var(--padding) * 1.5);
	margin-bottom: calc(var(--padding) * 2);
}

section.search form {
	display: contents;
}

section.search search {
	width: 100%;
}

section.search input {
	width: 100%;
}

section.search button[type="submit"] {
	width: 100%;
	max-width: 350px;
}

body:not([vv-page="/search"]) section.search {
	display: none;
}

/* # Search results */

main > svg,
dialog.search search search-results > svg {
	margin: auto;
	width: 150px;
	fill: rgba(255, 255, 255, .05);
}

dialog.search search search-results .empty {
	text-align: center;
}

/* ## Titles */

section.title h2 {
	color: var(--color-accent);
}

section.title a h2::before {
	content: "// ";
	color: white;
}

/* ## Work */

section.results.work {
	display: grid;
	grid-template-columns: 1fr;
	gap: calc(var(--padding) / 2);
}

section.results.work .result {
	padding: var(--padding);
	background-color: rgba(255, 255, 255, .1);
	border-radius: 6px;
}

/* # Feature queries */

@media (hover: hover) {
	section.results.work .result {
		transition: 300ms background-color;
	}

	section.results.work .result:hover {
		background-color: rgba(255, 255, 255, .2);
		box-shadow: 0 5px 70px 10px rgba(0, 0, 0, .3);
	}
}