.thim-active-search {
	.thim-search-box {
		.form-search-wrapper {
			@include opacity(1);
			visibility: visible;
			@include scale(1, 1);
		}
	}
}

body.thim-active-search {
	.background-toggle {
		width: 100%;
		height: 100%;
		position: absolute;
		cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVBAMAAABbObilAAAAMFBMVEVMaXH////////////////////////////////////////////////////////////6w4mEAAAAD3RSTlMAlAX+BKLcA5+b6hJ7foD4ZP1OAAAAkUlEQVR4XkWPoQ3CUBQAL4SktoKAbCUjgAKLJZ2ABYosngTJCHSD6joUI6BZgqSoB/+Shqde7sS9x3OGk81fdO+texMtRVTia+TsQtHEUJLdohJfgNNPJHyEJPZTsWLoxShqsWITazEwqePAn69Sw2TUxk1+euPis3EwaXy8RMHSZBIlRcKKnC5hRctjMf57/wJbBlAIs9k1BAAAAABJRU5ErkJggg==), progress;
	}
}

.thim-search-box {
	.toggle-form {
		text-align: center;
		cursor: pointer;
		position: relative;
	}

	.form-search-wrapper {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		z-index: 9999999;
		@include opacity(0);
		visibility: hidden;
		overflow: hidden;
		background: rgba(0, 0, 0, .8);
		margin: 0;
		width: 100%;
		height: 100vh;
		@include scale(0.2, 0.2);
		@include transition(all .3s cubic-bezier(.4, 0, 1, 1));
	}

	.search-form {
		top: 50%;
		max-width: 500px;
		margin: auto;
		@include translate(0, -50%);
		position: relative;
		&:after {
			content: '';
		}

		button {
			position: absolute;
			top: 0;
			right: 0;
			width: 50px;
			height: 100%;
			border: 0;
			color: #fff;
			outline: 0;
			box-shadow: none;
			&:focus {
				outline: 0;
			}
		}
		.search-field {
			width: 100%;
			padding: 12px 20px;
			margin-bottom: 0;
			font-weight: 400;
			@include rounded(0);
		}
	}
}

.not-found {
	.thim-search-box {
		.form-search-wrapper {
			position: static;
			opacity: 1;
			visibility: visible;
			background: none;
			height: auto;
			@include scale(0, 0);
			display: inline;
		}
		.search-form {
			@include translate(0, 0);
			top: 0;
			margin: 0;
		}
	}
}