/**
 *	Style for the search Functionality
 */
 
#search-screen {
	display: none;
	position: fixed;
	top: 0;
	width: 100vw;
	height: 100vh;
	background: alpha($primary, -0.15);
	z-index: 9;
	form {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	label {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 30%;
		min-width: 300px;
		text-align: center;
		border-radius: 2em;
	}
	input {
		width: 100%;
		padding: 14px;
		margin-bottom: 1em;
		border: solid 3px white;
		border-radius: 2em;
		background: transparent;
		font-size: 1.2em;
		color: white;
		outline: none;
		@include transform(scale(1));
		@include transition(transform 300ms $standard);
		&:focus {
			@include transform(scale(1.1));
		}
		&::placeholder {
			color: white;
		}
	}
	button {
		&.cancel_search {
			@include transition(box-shadow 300ms $standard);
			&:hover, &:focus {
				box-shadow: $shadow2;
			}
		}
		&#go-to-field, &#go-to-close {
			clip: rect(1px, 1px, 1px, 1px);
			margin: -1px;
			height: 1px;
			width: 1px;
			overflow: hidden;
			border: 0;
			position: absolute;
		}
	}
}

.search-btn {
	position: relative;
}