.search {
	@include coat-auto(search);

	&::before {
		content: "";
		@include coat-auto(search, before);
	}
	&:focus-within::before {
		@include coat-auto(search, before-focus);
	}

	label {
		@include coat-auto(search-label);
		& ~ .search__results {
			@include coat-auto(search-results);
		}
		&:focus-within {
			& ~ .search__results--has-values {
				@include coat-auto(search-results, filled);
			}
			& ~ .search__results {
				@include coat-auto(search-results, focus);
				.search__result {
					@include coat-auto(search-result, focus);
				}
			}
		}
	}
	input {
		@include coat-auto(search-input);
		&:focus {
			@include coat-auto(search-input, focus);
			outline: none;
		}
	}
	&__result {
		@include coat-auto(search-result);
		&:hover {
			@include coat-auto(search-result, hover);
		}
	}
	&__link {
		@include coat-auto(search-link);

		&:hover {
			@include coat-auto(search-link, hover);
		}
		@media #{$small} {
			@include coat-auto(search-link, mobile);
			&:hover {
				@include coat-auto(search-link, mobile-hover);
			}
		}
		@media #{$medium} {
			@include coat-auto(search-link, desktop);
			&:hover {
				@include coat-auto(search-link, desktop-hover);
			}
		}
	}
}

@media #{$small} {
	nav + #search {
		position: absolute;
		right: $base-space * 2;
	}
}