@primary-color: #f68872;

& when (@media-common = true) {
	header.page-header {
		.block-search {
			margin: 0 80px 0 0;
			padding: 0;
			width: auto;
			float: none;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-ms-flex-align: center;
			align-items: center;
			.block-title {
				margin: 0;
				display: none;
				&:before {
					font-family: 'Linearicons';
					content: "\e922";
					line-height: 30px;
					font-size: 20px;
				}
			}
			.control {
				padding: 0;
				margin: 0;
				border: none;
			}
			.block-content {
				position: relative;
				margin: 0;
				.field.search .label {
					border: 0;
					clip: rect(0, 0, 0, 0);
					height: 1px;
					margin: -1px;
					overflow: hidden;
					padding: 0;
					position: absolute;
					width: 1px;
				}
				input {
					background-color: #fff;
					height: 40px;
					border: none;
					box-shadow: none;
					color: #000;
					border-radius: 20px;
					padding: 0 50px 0 18px;
					border: 1px solid #ededeb;
					min-width: 270px;
					position: static;
					margin: 0;
					left: 0;
				}
				.action.advanced {
					display: none;
				}
			}
			.action.search {
				right: 19px;
				display: block;
				background-image: none;
				background: none;
				-moz-box-sizing: content-box;
				border: 0;
				box-shadow: none;
				line-height: inherit;
				margin: 0;
				padding: 0;
				text-decoration: none;
				text-shadow: none;
				font-weight: 400;
				padding: 5px 0;
				position: absolute;
				right: 10px;
				top: 0;
				z-index: 1;
				&:before {
					font-family: 'Linearicons';
					content: "\e922";
					font-size: 16px;
					line-height: 30px;
				}
				> span {
					border: 0;
					clip: rect(0, 0, 0, 0);
					height: 1px;
					margin: -1px;
					overflow: hidden;
					padding: 0;
					position: absolute;
					width: 1px;
				}
			}
		}
		.search-icon-left {
			.logo {
				z-index: 1;
			}
			.block-search {
				margin-right: 0;
				.block-title.theme-header-icon {
					display: block;
					cursor: pointer;
					&:before {
						font-family: 'Linearicons';
						content: "\e922";
						line-height: 30px;
						font-size: 1.2rem;
					}
					> strong {
						display: none;
					}
				}
				.block-content {
					position: absolute;
					right: 100%;
					visibility: hidden;
					z-index: 111;
					margin-right: 20px;
					transform: scaleX(0);
					-moz-transform: scaleX(0);
					-webkit-transform: scaleX(0);
					-ms-transform: scaleX(0);
					-o-transform: scaleX(0);
					transition: all 300ms;
					-moz-transition: all 300ms;
					-webkit-transition: all 300ms;
					-ms-transition: all 300ms;
					-o-transition: all 300ms;
					transform-origin: top right;
					-moz-transform-origin: top right;
					-ms-transform-origin: top right;
					-webkit-transform-origin: top right;
					-o-transform-origin: top right;
				}
				&.active {
					.block-title.theme-header-icon {
						z-index: 222;
						&:before {
							content: "\e935";
							font-size: 1rem;
							color: #999;
						}
						&:hover:before,
						&:focus:before {
							color: @primary-color;
						}
					}
					.block-content {
						transform: scaleX(1);
						-moz-transform: scaleX(1);
						-webkit-transform: scaleX(1);
						-ms-transform: scaleX(1);
						-o-transform: scaleX(1);
						visibility: visible;
					}
				}
			}
		}
		.search-icon-bottom {
			.right-content {
				position: static;
			}
			.block-search {
				position: static;
				margin-right: 0;
				.block-title.theme-header-icon {
					display: block;
					cursor: pointer;
					> strong {
						display: none;
					}
				}
				.block-content {
					position: absolute;
					right: 0 !important;
					left: 0 !important;
					top: 100%;
					padding: 20px 80px;
					background-color: #fff;
					border-top: 0.5px solid #eaeaea;
					border-bottom: 1px solid #eaeaea;
					box-shadow: 0 3px 5px #e1e1e1;
					opacity: 0;
					visibility: hidden;
					transform-origin: top right;
					-moz-transform-origin: top right;
					-webkit-transform-origin: top right;
					-ms-transform-origin: top right;
					-o-transform-origin: top right;
					transform: scaleY(0);
					-moz-transform: scaleY(0);
					-webkit-transform: scaleY(0);
					-ms-transform: scaleY(0);
					-o-transform: scaleY(0);
					transition: all 300ms;
					-moz-transition: all 300ms;
					-webkit-transition: all 300ms;
					-ms-transition: all 300ms;
					-o-transition: all 300ms;
					.form.minisearch input {
						border: none;
						border-radius: 0;
						padding-left: 0;
					}
					.action.search {
						right: 80px;
						top: 20px;
						&:before {
							font-size: 1.1rem;
						}
					}
				}
				&.active {
					.block-content {
						opacity: 1;
						visibility: visible;
						transform: scaleY(1);
						-moz-transform: scaleY(1);
						-ms-transform: scaleY(1);
						-o-transform: scaleY(1);
						-webkit-transform: scaleY(1);
					}
					.block-title.theme-header-icon {
						z-index: 222;
						&:before {
							content: "\e935";
							font-size: 1rem;
							color: #999;
						}
					}
				}
			}
			#search_mini_form.loading {
				.control:after {
					height: 50px;
					right: 20px;
				}
				> .actions {
					display: none;
				}
			}
		}
		.search-icon-popup {
			.logo {
				z-index: 1;
			}
			.block-search {
				margin-right: 0;
				.block-title.theme-header-icon {
					display: block;
					cursor: pointer;
					> strong {
						display: none;
					}
				}
				.block-content {
					position: fixed;
					left: 0 !important;
					right: 0 !important;
					top: 0;
					bottom: 0;
					background-color: #fff;
					z-index: 99;
					opacity: 0;
					visibility: hidden;
					max-height: 100%;
					overflow-y: auto;
					transition: all 400ms;
					-moz-transition: all 400ms;
					-webkit-transition: all 400ms;
					-ms-transition: all 400ms;
					-o-transition: all 400ms;
					input {
						width: 100%;
						min-width: auto;
						height: 50px;
						border-radius: 30px;
					}
					.form.minisearch {
						max-width: 70%;
						margin: 150px auto 0;
						position: relative;
						.field.search .label {
							clip: inherit;
							height: auto;
							margin: 0 0 25px;
							overflow: visible;
							position: absolute;
							width: auto;
							bottom: 100%;
							display: block;
							text-align: center;
							left: 0;
							right: 0;
							font-size: 1.75rem;
							font-weight: 600;
							color: #222;
							&:before {
								display: none;
							}
							> span {
								clip: inherit;
								height: auto;
								margin: 0;
								overflow: visible;
								position: static;
								width: auto;
							}
						}
					}
					.action.search::before {
						font-size: 1.1rem;
						font-weight: 600;
						line-height: 40px;
						margin-right: 10px;
					}
				}
				&.active {
					.block-content {
						opacity: 1;
						visibility: visible;
					}
					.block-title.theme-header-icon {
						z-index: 2229;
						height: 40px;
						width: 40px;
						cursor: pointer;
						text-align: center;
						position: fixed;
						right: 10px;
						top: 10px;
						transition: all 500ms;
						-moz-transition: all 500ms;
						-webkit-transition: all 500ms;
						-ms-transition: all 500ms;
						-o-transition: all 500ms;
						&:before {
							content: "\e935";
							font-size: 1.25rem;
							font-weight: 600;
							color: #000;
							&:hover:before {
								color: @primary-color;
							}
						}
					}
				}
			}
			#search_mini_form.loading {
				.control:after {
					height: 50px;
					right: 20px;
				}
				> .actions {
					display: none;
				}
			}
		}
		.header-area.search {
			&-visible {
				.block-search {
					@media (max-width: 1365px) {
						margin-right: 0;
					}
					@media (max-width: 1199px) {
						.block-title {
							display: block;
							strong {
								border: 0;
								clip: rect(0, 0, 0, 0);
								height: 1px;
								margin: -1px;
								overflow: hidden;
								padding: 0;
								position: absolute;
								width: 1px;
							}
						}
						.block-content {
							position: absolute;
							right: 100%;
							visibility: hidden;
							z-index: 111;
							margin-right: 20px;
							transform: scaleX(0);
							-moz-transform: scaleX(0);
							-ms-transform: scaleX(0);
							-o-transform: scaleX(0);
							-webkit-transform: scaleX(0);
							transition: all 500ms;
							-moz-transition: all 500ms;
							-webkit-transition: all 500ms;
							-ms-transition: all 500ms;
							-o-transition: all 500ms;
							transform-origin: top right;
							-moz-transform-origin: top right;
							-webkit-transform-origin: top right;
							-ms-transform-origin: top right;
							-o-transform-origin: top right;
						}
						&.active {
							.block-content {
								transform: scaleX(1);
								-moz-transform: scaleX(1);
								-ms-transform: scaleX(1);
								-o-transform: scaleX(1);
								-webkit-transform: scaleX(1);
								visibility: visible;
							}
							.block-title.theme-header-icon {
								z-index: 222;
								&:before {
									content: "\e935";
									font-size: 1rem;
									color: #999;
									cursor: pointer;
								}
								&:before,
								&:before {
									color: @primary-color;
								}
							}
						}
					}
				}
			}
			&-icon {
				&-bottom .block-search {
					@media (max-width: 767px) {
						.action.search {
							top: 8px;
						}
					}
					.block-content {
						@media (max-width: 1365px) {
							padding: 0 15px;
						}
						@media (max-width: 1500px) {
							padding-left: 40px;
							padding-right: 40px;
						}
						@media (max-width: 1365px) {
							padding-left: 15px;
							padding-right: 15px;
						}
					}
				}
				@media (max-width: 767px) {
					&-left .right-content {
						position: static;
						.block-search {
							position: static;
							.block-content {
								left: 10px;
								right: 45px;
								margin-right: 0;
								input {
									width: 100%;
									min-width: auto;
								}
							}
						}
					}
					&-popup .block-search .block-content .form.minisearch {
						max-width: 100%;
						margin: 100px 15px 0;
					}
				}
			}
		}
	}
}
& when (@media-common = false) {
	header.page-header .header-area.search-icon-bottom .block-search .block-content {
		@media (max-width: 1500px) and (min-width: 1366px) {
			padding: 0 40px;
		}
	}
}