.search-input {
	position: relative;

	.search-field {
		margin: 0 auto;

		> input {
			height: $inputHeightS;
			background-color: white;

			@include responsive('>', 769px, (
				height: $inputHeightL
			));
		}

		> button {
			@extend .btn-submit;

			margin-left: -8px;
			vertical-align: top;
		}
	}

	form {
		margin-bottom: 0;

		&:before {
			display: block;
			content: '';
			position: absolute;
			top: 50%;
			left: 10px;
			transform: translateY(-50%);
			width: 15px;
			height: 15px;
			background: url(./images/icon/icon-magglass.png) no-repeat center;
			background-size: contain;

			@include responsive('>',769px,(
				width: 32px,
				height: 32px,
				padding-left: 15px
			));
		}
	}

	.search-help {
		position: relative;
	}

	input[type=text],
	input[type=search] {
		width: calc(100% - 46px);
		padding-left: 35px;
		padding-right: 35px;
		font-size: 0.8em;

		@include responsive('>', 'phones', (
			font-size: 1.3em
		));

		@include responsive('>', 769px, (
			width: calc(100% - 61px),
			padding-left: 65px !important,
			padding-right: $globalMargin-1-5 !important,
			font-size: 1.6em
		));
	}

	.input-clear {
		@extend .btn-x;


		position: absolute;
		right: 55px;
		top: 50%;
		transform: translateY(-50%);
		width: 20px;
		height: 20px;
		background-size: 10px;
		cursor: pointer;

		@include responsive('>', 'tablets', (
			right: 75px,
			width: 30px,
			height: 30px,
			background-size: 16px
		));
	}

	button {
		&.btn-search {
			@include responsive('>', 769px, (
				width: $inputHeightL,
				height: $inputHeightL
			));
		}
	}

	.dropdown {
		display: none;
		z-index: 1;
		overflow: hidden;
		position: absolute;
		width: calc(100% - 65px);
		max-width: 899px;
		min-height: 44px;
		margin: 0;
		padding: 0;
		color: white;
		background: $colorGreyDarkX;
		transition: height .25s ease-in-out;

		@include responsive('>','phones',(
			min-height: $globalMargin-1-5
		));

		@include responsive('>',769px,(
			width: 100%
		));

		&.loading {
			display: block;

			&:before {
				display: block;
				content: '';
				position: absolute;
				top: 12px;
				left: 16px;
				width: 20px;
				height: 20px;
				background: url(./images/ajax-loader.gif) no-repeat center;
				background-size: contain;

				@include responsive('>','phones',(
						width: 32px,
						height: 32px
				));
			}
		}

		&.show {
			display: block;
		}

		li {
			padding: 10px $globalPadding;
			list-style: none;
			font-size: 0.8em;
			cursor: pointer;

			@include responsive('>',769px,(
				padding: 18px 5px 18px 65px,
				font-size: 1em
			));

			&.search-suggestion {
				&:hover {
					color: white;
					background: black;
					text-decoration: underline;
				}
			}

		}
	}

	li.dropdown-ask {
		padding: 8px $globalPadding;
		text-align: center;
		font-weight: bold;
		font-size: 1em;
		background-color: $colorYellow;

		@include responsive('>', 'tablets', (
			padding: 11px 5px 11px 5px,
			font-size: 1.6em
		));

		> a {
			text-decoration: underline;
		}
	}

	.search-widget {

		@include responsive('>', 'tablets', (
			float: none,
			width: 100%,
			margin: 0 auto
		));

		form {
			margin: 0 auto;

			&:before {
				content: '';
			}
		}

		.widget {
			margin-bottom: 0;
		}

		input[type=search] {
			width: calc(100% - 41px);
			height: $inputHeightS;
			background-color: white;

			@include responsive('>', 769px, (
				width: calc(100% - 65px),
				height: $inputHeightL
			));
		}

		input[type=submit] {
			@extend .btn-submit;

			margin-left: -4px;
			position: static !important;
			vertical-align: top;
			font-size: 0;

			@include responsive('>', 769px, (
				width: $inputHeightL,
				height: $inputHeightL
			));
		}
	}
}