// --------------------------------------------------------------------------------------------
// SEARCH
// --------------------------------------------------------------------------------------------

// ------------------------------------------
// SEARCH EXTENDED DEFAULT
// ------------------------------------------

.search-extended {
	position:relative;
	text-align: right;

	form {

		&.search-loading {

			&:after {
				position: absolute;
				top: 50%;
				margin-top:-9px;
				right: 12px;
				@include loader(18px, 2px);
				@include act-loader;
				border-color:#bbbbbb;
			}

			#searchsubmit {
				display:none;
			}
		}
	}

	input[type="text"] {
		padding-right: 45px;
	}

	#searchsubmit {
		position: absolute;
		right: 0;
		top: 0;
		width: 40px;
		border:none;
		padding: 0;
		font-size: 0;
		background-color: transparent;
		text-align: center;
		color: #777777;
		margin:0;

		&:after {
			content: "\e090";
			font-size: 18px;
			font-weight:bold;
			font-family: 'simple-line-icons';
			display: inline-block;
			line-height: 40px; 
		}

		&:hover {
			color: #3A3A3A;
			background-color: transparent;
		}
	}

	.color-scheme-light & {

		.search-loading {
	
			&:after {
				border-color: rgba(255, 255, 255, 0.8);
			}
		}
	}
}

// ------------------------------------------
// PRODUCT SEARCH HAS CATEGORIES DROPDOWN
// ------------------------------------------

form.has-categories-dropdown {

	.search-by-category {
		position: absolute;
		top: 2px;
		right: 40px;

		.dropdown-list {
			text-align: left;
			position: absolute;
			right: -40px;
			top: 100%;
			margin-top:2px;
			z-index: 300;
			background-color: #ffffff;
			min-width: 182px;
			max-width: 230px;
			padding:10px 0px;
			border-bottom: 1px solid rgba(124, 124, 124, 0.2);
			border-right: 1px solid rgba(124, 124, 124, 0.2);
			border-left: 1px solid rgba(124, 124, 124, 0.2);

			.children {

				li {

					a {

						&:before {
							@include font-icon($icon-angle-right);
							color: #bbb;
							opacity: 0.7;
							display: inline-block;
							padding-left: 5px;
							padding-right: 8px;
						}
					}
				}
			}
		}

		li {
			line-height: 1;
			margin-bottom: 0;

			a {
				text-transform: uppercase;
				font-size: 12px;
				display: block;
				color: #8b8b8b!important;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow-x: hidden;
				padding: 10px 15px;
				-webkit-transition:all 0.1s ease;
				transition:all 0.1s ease;

				&:hover {
					background-color:#F7F7F7;
					text-decoration: none;
					color: #545252!important;
				}
			}

			&.current-item {

				a {
					background-color:#F1F1F1;
					color: #545252!important;
				}
			}
		}
	}

	.input-dropdown-inner {

		&:after,
		&:before {
			content:" ";
			position: absolute;
			top: 50%;
			margin-top: -12px;
			border-right: 1px solid rgba(168, 168, 168, 0.20);
			height: 25px;
		}

		&:after {
			right: 0;
		}

		&:before {
			left: 0;
		}

		> a {
			display: inline-block;
			font-size: 0;
			text-transform: uppercase;
			letter-spacing: 0.4px;
			text-align: center;
			color: #c5c5c5;

			&:hover {
				text-decoration:none;
			}

			&:after {
				@include font-icon($icon-caret-down);
				font-size: 18px;
				width: 30px;
				display: inline-block;
				line-height: 36px;
			}
		}
	}

	input[type="text"] {
		padding-right: 72px;
	}
}

// ------------------------------------------
// SEARCH HAS CATEGORIES DROPDOWN IN HEADER
// ------------------------------------------

.main-header {

	form.has-categories-dropdown {
		position: relative;

		&.search-loading {

			&:after {
				right: 17px;
			}
		}

		.search-by-category {
			top: 2px;
			right: 50px;
			line-height: 44px;
			padding: 0;
			background-color: rgba(255, 255, 255, 0);

			.dropdown-list {
				right: 0;
				margin-top: 2px;
				border-width: 2px;
				border-color: rgba(168, 168, 168, 0.2);
			}
		}

		.input-dropdown-inner {
			position: relative;
			padding: 0 15px;

			> a {
				font-size: 15px;
				color: inherit;
						
				&:after {
					font-size: 14px;
					width: auto;
					margin-left: 10px;
				}
			}
		}

		input[type="text"] {
			padding-right: 230px;
			height: 48px;
			border-color:rgba(168, 168, 168, 0.4);
			border-width: 2px;
			font-size: 15px;
		}

		#searchsubmit {
			top:2px;
			width: 50px;
			color: inherit;

			&:after {
				line-height: 44px;
				font-size: 22px;
			}

			&:hover {
				color: inherit;
				opacity: 0.7;
			}
		}
	}
   
	&.color-scheme-light {
			
		.search-extended {
			color:rgba(255, 255, 255, 0.9);

			.input-dropdown-inner {

				&:after,
				&:before {
					border-color: rgba(255, 255, 255, 0.3);
				}
			}

			input[type="text"] {
				border-color:rgba(255, 255, 255, 0.5);
				color:rgba(255, 255, 255, 0.9);
			}
		}
	}
}

// ------------------------------------------
// AJAX SEARCH RESULTS
// ------------------------------------------

.autocomplete-suggestions {
	position: relative!important;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;

	background-color:white;
	padding:10px;
	width:auto!important;
	max-width:none!important;
	max-height: none!important;
	overflow:hidden;
	z-index: 300 !important;

	.autocomplete-suggestion {
		-webkit-box-flex:1;
		-ms-flex:1 1 285px;
		flex:1 1 285px;
		margin: 10px;

		overflow: hidden;
		padding-bottom:20px;
		border-bottom:1px solid rgba(129, 129, 129, 0.15);
		cursor:pointer;
		line-height:1.4;

		&:last-child {
			border-bottom:none;
			padding-bottom:0;
			margin-bottom:10px;
		}

		&.suggestion-divider {
			flex-basis: 100% !important; // OVERWRIGHT FULLSCREEN SEARCH
			width: 100%;
			font-weight: 600;
			cursor: default;
			margin-top: -10px;
			padding-top: 20px;
	
			h5 {
				font-size: 14px;
				margin-bottom: 0;
			}
		}
	}

	.suggestion-title {
		font-size: 14px;
		margin-bottom: 0;
	}

	.suggestion-thumb {
		float:left;
		max-width:62px;
		margin-right:15px;
	}

	.suggestion-sku,
	.suggestion-price {
		margin-top:10px;
	}

	.suggestion-price {

		ins {
			padding:0;
			text-decoration:none;
		}
	}

	.view-all-result {
		text-align: center;
		cursor: pointer;
		line-height: 35px;
		-ms-flex-preferred-size: 100%;
		flex-basis: 100%;

		span {
			border-bottom: 1px solid #B5B5B5;
			color: #6D6D6D;
			transition: all .2s ease;
			-webkit-transition: all .2s ease;
		}

		&:hover,
		&:focus {

			span {
				border-color:#3E3E3E;
				color: #3E3E3E;
			}
		}
	}

	.color-scheme-light .search-extended &,
	.color-scheme-light .basel-search-dropdown & {

		.suggestion-title {
			color: rgba(0, 0, 0, 0.7);
		}  
	}

	.color-scheme-dark .search-extended &,
	.color-scheme-dark .basel-search-dropdown &,
	.color-scheme-light .search-extended &,
	.color-scheme-light .basel-search-dropdown & {

		.suggestion-price {
			
			> del,
			> del .amount,
			> .amount {
				color: #949494;
			}
		}

		.suggestion-sku,
		.suggestion-price {
			color: #949494;
		}
	}
}

// ------------------------------------------
// SEARCH STYLE IN HEADER
// ------------------------------------------

.basel-search-dropdown {

	.basel-search-wrapper {
		padding-top: 15px;
		position: absolute;
		top: 50%!important;
		right: -24px;
		visibility: hidden;
		opacity: 0;
		z-index: 600;
		-webkit-transition:all 0.25s ease-in-out;
		transition:all 0.25s ease-in-out;

		.basel-search-inner {
			background-color: #F7F7F7;
			z-index: 1;
			padding: 20px 20px;
			width: 315px;
			@include shadow-drop-element;

			form {
				position:relative;
				text-align: center;

				&.search-loading {

					input[type="text"] {
						padding-left:45px;
					}

					&:after {
						position: absolute;
						top: 50%;
						margin-top:-8px;
						left: 20px;
						@include loader(16px, 1px);
						@include act-loader;
						border-color:#bbbbbb;
					}
				}

				> div {
					display: flex;
					justify-content: center;
					-webkit-display: flex;
					-ms-display: flex;
					-webkit-justify-content: center;
					-ms-justify-content: center;
				}

				label {
					display: none;
				}

				input[type="text"] {
					border: 1px solid rgba(131, 131, 131, 0.20);
					background-color: white;
					box-shadow: none;
					border-right: 0;
					max-width: 185px;
					color: #7C7C7C;

					-webkit-transition:all 0.15s ease;
					transition:all 0.15s ease;
				}

				button {
					margin-left: -3px;
					@include btn-color-primary;
				}

				::-webkit-input-placeholder {color:rgba(0,0,0,0.4)}
				::-moz-placeholder          {color:rgba(0,0,0,0.4)}//* Firefox 19+ *//
				:-moz-placeholder           {color:rgba(0,0,0,0.4)}//* Firefox 18- *//
				:-ms-input-placeholder      {color:rgba(0,0,0,0.4)}


			}

			.basel-close-search {
				display:none;
			}
		}
	}

	&:hover > .basel-search-wrapper {
		visibility: visible;
		opacity: 1;
		top: 100%!important;
	}
}

// ------------------------------------------
// IF AJAX SEARCH ON IN DROPDOWN STYLE
// ------------------------------------------

.basel-ajax-search-on {

	.basel-search-dropdown {

		.basel-search-wrapper {
			top: 50%!important;
			visibility: hidden;
			opacity: 0;

			&.search-overlap {
				visibility: visible;
				opacity: 1;
				top: 100%!important;
			}
		} 
	}
}

// ------------------------------------------
// FULL SCREEN SEARCH
// ------------------------------------------

.basel-search-full-screen {

	.basel-search-wrapper {
		position:fixed;
		left:0;
		right:0;
		bottom:0;
		z-index:370;
		background-color:rgba(0,0,0,0.9);
		opacity: 0;
		visibility: hidden;

		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: stretch;
		-ms-flex-align: stretch;
		align-items: stretch;

		transform:translateY(100%);
		-webkit-transform:translateY(100%);
		-ms-transform:translateY(100%);

		-webkit-transition:opacity 0.25s ease-in-out, visibility .25s, transform .25s ease-in-out;
		transition:opacity 0.25s ease-in-out, visibility .25s, transform .25s ease-in-out;

		&.search-overlap {
			opacity: 1;
			visibility: visible;
			transform:translateY(0);
			-webkit-transform:translateY(0);
			-ms-transform:translateY(0);

			form {
				opacity: 1;
				visibility: visible;
				-webkit-transform:translateY(0px);
				-ms-transform:translateY(0px);
				transform:translateY(0px);
			}
		}

		.basel-search-inner {

			input[type="text"] {
				color: white;
			}
		}

		.basel-search-inner,
		.search-results-wrapper {
			-webkit-box-flex: 1;
			-ms-flex: 1 1 auto;
			flex: 1 1 auto;
		}

		.searchform {
			-webkit-box-flex: 0;
			-ms-flex: 0 0 auto;
			flex: 0 0 auto;
		}
	}

	.basel-search-inner {
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: stretch;
		-ms-flex-align: stretch;
		align-items: stretch;
		padding: 0 80px;
		
		::-webkit-input-placeholder {color:rgba(255,255,255,0.5)}
		::-moz-placeholder          {color:rgba(255,255,255,0.5)}//* Firefox 19+ *//
		:-moz-placeholder           {color:rgba(255,255,255,0.5)}//* Firefox 18- *//
		:-ms-input-placeholder      {color:rgba(255,255,255,0.5)}

		input[type="text"] {
			border: none;
			border-bottom: 2px solid rgba(255,255,255, 0.3);
			padding-left: 0;
			padding-right:40px;
			padding-bottom: 0;
			padding-top: 0;
			font-family: $secondary-title;
			font-style: italic;
			font-size: 68px;
			color: white;
			letter-spacing: 1px;
			line-height: 120px;
			height:122px;
			background-color: transparent;
			box-shadow: none;
		}

		button {
			display: none; //hidden search icon

			position: absolute;
			top: 0;
			right: 0;
			background-color: transparent;
			border:none;
			padding: 0;
			font-size: 0;
			font-weight: normal;
			vertical-align: top;
			width: 80px;
			text-align: center;

			&:before {
				content:"\e090";
				font-size: 60px;
				line-height: 120px;
				color: rgba(255,255,255, 0.5);
				display: inline-block;
				font-family: 'simple-line-icons';
				-webkit-transition:color 0.25s ease-in-out;
				transition:color 0.25s ease-in-out;
			}

			&:hover:before {
				color: rgba(255,255,255, 1);
			}
		}

		form {
			position: relative;
			opacity: 0;
			visibility: hidden;
			-webkit-transform: translateY(40px);
			-ms-transform: translateY(40px);
			transform: translateY(40px);
			-webkit-transition: all .42s ease-in-out;
			transition: all .42s ease-in-out;

			&.search-loading {

				&:after {
					position: absolute;
					top: 50%;
					margin-top:-18px;
					right: 80px;
					@include loader(36px, 2px);
					@include act-loader;
					border-color:#FFF;
				}
			}
		}

		.basel-close-search {
			position: absolute;
			cursor:pointer;
			top: 0;
			right: 80px;
			width: 40px;
			height: 122px;
			color:white;
			text-transform:uppercase;
			font-size: 32px;
			font-weight:bold;
			letter-spacing: 1.5px;
			line-height:33px;
			z-index: 301;
			-webkit-transition:color 0.2s ease-in-out;
			transition:color 0.2s ease-in-out;
			font-size: 0;

			&:after,
			&:before {
				content: " ";
				position:absolute;
				width: 40px;
				height: 3px;
				right:0;
				top: 50%;
				margin-top: -1px;
				
				display: inline-block;
				background-color: #FFF;
				-webkit-transition:background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
				transition:background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
			}

			&:after {
				transform:rotate(-45deg);
				-webkit-transform:rotate(-45deg);
				-ms-transform:rotate(-45deg);
			}

			&:before {
				-webkit-transform:rotate(45deg);
				-ms-transform:rotate(45deg);
				transform:rotate(45deg);
			}

			&:hover {

				&:before,
				&:after {
					transform:rotate(0);
					-webkit-transform:rotate(0);
					-ms-transform:rotate(0);
				}
			}
		}
	}

	.search-results-wrapper {

		.basel-scroll {
			top: 0;
			bottom: 0;
			box-shadow: none;
			background-color: transparent;

			.basel-search-results {
				position: absolute;
				max-height: 100vh;
			}
		}
	}

	.basel-scroll-pane {
		background: rgba(255, 255, 255, 0.02);

		> .basel-scroll-slider {
			background: rgba(255, 255, 255, 0.1);
		}
	}
}

// ------------------------------------------
// IF FULL SCREEN SEARCH IS OPEN
// ------------------------------------------

.global-search-full-screen {

	&.basel-search-opened {
		overflow:hidden;

		.scrollToTop {
			display:none;
		}

		.topbar-wrapp,
		.main-header,
		.main-page-wrapper,
		.header-split .site-logo {
			padding-right:17px;
		}

		.autocomplete-suggestions {
			color: rgba(255,255,255, 1);
			background-color: transparent;
			padding-left: 0;
			padding-right: 0;
			padding-top: 30px;
			padding-bottom: 30px;
			max-width: none;
			border:none;
			font-size:15px;

			.suggestion-thumb {
				max-width:110px;
			}

			.suggestion-title {
				font-size: 15px;
				color: rgba(255,255,255, 1);
			}

			.suggestion-price {
				color: #949494;
				
				.amount {
					color:rgba(255,255,255,0.8);
				}
			}

			.suggestion-sku {
				color:rgba(255,255,255,0.8);
			}

			.autocomplete-suggestion {
				-webkit-box-flex: 1;
				-ms-flex: 1 1 350px;
				flex: 1 1 350px;
				max-width: 350px;
				margin: 0;
				margin-right: 15px;
				margin-bottom: 10px;
				vertical-align: top;
				border-bottom: none;

				&.suggestion-divider {
					max-width: 100%;
					border-top: 1px solid rgba(255, 255, 255, 0.3);
					margin-right: 0;

					h5 {
						color: #FFF;
					}
				}
			}

			.view-all-result {
				width: 100%;
				padding-top: 10px;
				padding-bottom: 10px;
				text-align: left;

				span {
					color: #FFF;
					border-color: rgba(255, 255, 255, 0.6);
				}

				&:hover,
				&:focus {

					span {
						border-color: #FFF;
					}
				}
			}
		}
	}
}

// ------------------------------------------
// ADD ICON CLOSE WHEN SEARCH OPEN
// ------------------------------------------

.basel-search-full-screen,
.basel-ajax-search-on .basel-search-dropdown {

	> a {

		i:before {
			-webkit-transition:opacity 0.1s ease-in-out 0s;
			transition:opacity 0.1s ease-in-out 0s;
		}

		&:after,
		&:before {
			content: " ";
			width: 20px;
			height: 1px;
			position: absolute;
			left: 7px;
			top: 15px;
			opacity: 0;
			visibility: hidden;
			display: inline-block;
			perspective: 800px;
			-webkit-perspective:800px;
			backface-visibility: hidden;
			-webkit-backface-visibility: hidden;
			background-color: rgba(0, 0, 0, 0.8);
			-webkit-transition: all 0s ease-in-out;
			transition: all 0s ease-in-out;
		}
	}
}

// ------------------------------------------
// ICON OPEN IS ACTIVE
// ------------------------------------------

.global-search-full-screen,
.global-search-dropdown.basel-ajax-search-on {
	
	&.basel-search-opened {

		.right-column {

			.search-button {

				> a {

					i:before {
						opacity:0;
						-webkit-transition:opacity 0s ease-in-out 0s;
						transition:opacity 0s ease-in-out 0s;
					}

					&:after,
					&:before {
						opacity:1;
						visibility:visible;
						-webkit-transition:opacity 0.05s ease-in-out, transform 0.2s ease-in-out;
						transition:opacity 0.05s ease-in-out, transform 0.2s ease-in-out;
					}

					&:after {
						-webkit-transform:rotate(-45deg);
						-ms-transform:rotate(-45deg);
						transform:rotate(-45deg);
					}

					&:before {
						-webkit-transform:rotate(45deg);
						-ms-transform:rotate(45deg);
						transform:rotate(45deg);
					}
				}
			}
		}
	}
}

// ------------------------------------------
// NEW SEARCH DROP POSITION
// ------------------------------------------

.search-results-wrapper {
	text-align: left;
	position: relative;

	.basel-scroll {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		z-index: 1000;
		width: auto;
		height: auto;
		background-color: #FFF;
		-webkit-box-shadow: 0 0px 2px rgba(0, 0, 0, 0.1);
		box-shadow: 0 0px 2px rgba(0, 0, 0, 0.1);

		.basel-search-results {
			position: relative;
			max-height: 50vh;
		}
		
		.basel-scroll-pane {
			z-index: 1002;
		}
	}
}

// ------------------------------------------
// POST SEARCH
// ------------------------------------------

.basel-blog-search-results {
	margin-top: 30px;
}

.basel-search-show-all {
	margin-top: 20px;
	text-align: center;
}