// _typeahead-searchbar.scss

// For vertical positioning in header element
.search-input-wrap {
	margin: 24px 0 36px;
	position: relative;

	.search-input {
		@include transform(translateY(-100%));

		position: absolute;
		right: 0;
		top: 100%;
		z-index: 9999;

		> .input-group {
			width: 100%;

			.form-control:first-child {
				border-radius: 4px;
			}

		}

	}

}

.input-group-addon {
	border: none;
	padding: 0;
	vertical-align: top;

	.btn-lg {
		border-radius: 0;
		font-size: $font-size-base;
		padding-bottom: 13.5px;
		padding-top: 13.5px;
	}

	&:last-of-type {
		.btn-lg {
			border-radius: 0 4px 4px 0;
		}
	}

}

// Input placeholder styles
.form-control::-webkit-input-placeholder,
.tt-input::-webkit-input-placeholder {
	color: lighten(#989da1, 20%);
	font-style:italic;
}

.form-control:-moz-placeholder,
.tt-input:-moz-placeholder { /* Firefox 18- */
	color: lighten(#989da1, 20%);
	font-style:italic;
}

.form-control::-moz-placeholder,
.tt-input::-moz-placeholder {  /* Firefox 19+ */
	color: lighten(#989da1, 20%);
	font-style:italic;
}

.form-control:-ms-input-placeholder,
.tt-input:-ms-input-placeholder {  
	color: lighten(#989da1, 20%);
	font-style:italic;
}

// Hide the placeholder on focus
.form-control:focus::-webkit-input-placeholder,
.tt-input:focus::-webkit-input-placeholder {
	color: #fff;
}

.form-control:focus:-moz-placeholder,
.tt-input:focus:-moz-placeholder { /* Firefox 18- */
	color: #fff;
}

.form-control:focus::-moz-placeholder,
.tt-input:focus::-moz-placeholder {  /* Firefox 19+ */
	color: #fff;
}

.form-control:focus:-ms-input-placeholder,
.tt-input:focus:-ms-input-placeholder {  
	color: #fff;
}

.tt-hint {
	background: #fff !important;
}

.tt-dropdown-menu {
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: $border-radius-large;
	box-shadow: 0 5px 10px rgba(0,0,0,0.2);
	margin-top: 8px;
	padding: 8px 0;
	width: 100%;
}

.tt-suggestion {
	@include transition(background-color 0.15s);

	background-color: transparent;
	cursor: pointer;
	font-size: 18px;
	line-height: 24px;
	padding: 8px 16px;

	&.tt-cursor {
		color: #fff;
		background-color: $brand-primary;
	}

	p {
		margin: 0;
	}

}

.tt-input {
	border: none !important;
	box-shadow: none !important;
}

.twitter-typeahead {
	border:1px solid #ccc;
	border-radius:$border-radius-base;
	width:100%;

	&::after {
		@include transform(translateY(-50%));

		content: url("../images/arrow.jpg");
		height: 18px;
		position: absolute;
		right: 15px;
		top: 50%;
		width: 19px;
		z-index: 100;
	}

}