/*===================================================================================*/
/*  NAVBAR-SEARCH
/*===================================================================================*/
.navbar-search {
	float: $start;
	width: 52%;

	> .input-group {
		width: 100%;
	}

	.form-control {
		background: #fff;
		@extend .form-control;
		line-height: 1.34em;
 		padding: 1.01em 2.134em;

		@include if-ltr {
			border-radius: 2.467em;
		}
	}

	.search-field:not(:first-child):not(:last-child){
		@include if-ltr {
			border-top-left-radius: 2.467em;
			border-bottom-left-radius: 2.467em;
		}
	}

	.btn,button {
		line-height: 1.36em;
 		padding: 1.08em 1.93em;
		
		@include if-ltr {
			border-radius: 2.571em;
		}

		&:hover,&:focus {
			background-color: #000;
			border-color: #000;
			color: #fff;
		}
	}

	.search-categories {
		&.input-group-addon {
			border: none;
			background-color: #fff;
		}

		> select {
			color: #6b6b6b;
			font-size: 0.938em;
			line-height: 1.876em;
			display: inline-block;
			max-width: 100%;
			padding: 0 1.75rem 0 .75rem;
			padding-#{$end}: .75rem \9;
			vertical-align: middle;
			background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center;
			background-image: none \9;
			background-size: 8px 10px;
			border: none;
			// Use vendor prefixes as `appearance` isn't part of the CSS spec.
			-moz-appearance: none;
			-webkit-appearance: none;
			width: 142px;

			&:focus {
				border-color: #51a7e8;
				outline: none;
				@include box-shadow( inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5) );
			}

			// Hides the default caret in IE11
			&::-ms-expand {
				opacity: 0;
			}
		}
	}
}

@include if-rtl {
	.input-group .form-control:first-child,
	.input-group-addon:first-child,
	.input-group-btn:first-child > .btn,
	.input-group-btn:first-child > .btn-group > .btn,
	.input-group-btn:first-child > .dropdown-toggle,
	.input-group-btn:last-child > .btn-group:not(:last-child) > .btn,
	.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
		border-bottom-left-radius: 0;
		border-top-left-radius: 0;
		border-bottom-right-radius: 1.571em;
		border-top-right-radius: 1.571em;
	}

	.input-group .form-control:last-child,
	.input-group-addon:last-child,
	.input-group-btn:first-child > .btn-group:not(:first-child) > .btn,
	.input-group-btn:first-child > .btn:not(:first-child),
	.input-group-btn:last-child > .btn,
	.input-group-btn:last-child > .btn-group > .btn,
	.input-group-btn:last-child > .dropdown-toggle {
		border-bottom-right-radius: 0;
		border-top-right-radius: 0;
		border-bottom-left-radius: 1.571em;
		border-top-left-radius: 1.571em;
	}

	.search-field:not(:first-child):not(:last-child){
		border-top-right-radius: 2.467em !important;
		border-bottom-right-radius: 2.467em !important;

	}

	.navbar-nav {
		float: none;
	}

	.navbar-search  {
		.input-group .form-control:first-child,
		.input-group-addon:first-child,
		.input-group-btn:first-child > .btn,
		.input-group-btn:first-child > .btn-group > .btn,
		.input-group-btn:first-child > .dropdown-toggle,
		.input-group-btn:last-child > .btn-group:not(:last-child) > .btn,
		.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
			border-bottom-right-radius: 2.467em;
			border-top-right-radius: 2.467em;
			border-bottom-left-radius: 0;
			border-top-left-radius: 0;
		}

	}

	.navbar-search  {
		.input-group .form-control:last-child,
		.input-group-addon:last-child,
		.input-group-btn:first-child > .btn-group:not(:first-child) > .btn,
		.input-group-btn:first-child > .btn:not(:first-child),
		.input-group-btn:last-child > .btn,
		.input-group-btn:last-child > .btn-group > .btn,
		.input-group-btn:last-child > .dropdown-toggle {
			border-bottom-left-radius: 2.571em;
			border-top-left-radius: 2.571em;
			border-bottom-right-radius: 0;
			border-top-right-radius: 0;
		}
	}

	.nav-inline .nav-item + .nav-item,
	.nav-inline .nav-link + .nav-link {
		margin-right: 1rem;
		margin-left: 0;
	}
}
