.search {
	background: $search-bar-bg;
	position: fixed;
	left: 0;
	right: 0;
	margin: auto;
	height: 3.5rem;
	top: calc(100% - 3.5em - 2em);

	@include single-transition(all, 300ms);

	& > div {
		height: 100%;

		position: absolute;
		top: 0;
		left: 0;

		&.icon {
			padding: 1rem;
			width: 3.5rem;
			z-index: 3;
		}
	}

	svg {
		max-width: 100%;
		max-height: 100%;
	}

	.st0 {
		fill: darken($search-text-color, 10%);
	}

	.input, input {
		width: 100%;
		height: 100%;
	}

	input {
		padding-left: 3.5rem;
		font-size: 1.2em;
		color: $search-text-color;

		@include border-radius(0);
		border: 0;

		background: none;

		&:focus {
			color: darken($search-text-color, 20%);
		}
	}
}

@import 'states/home';
@import 'states/search';