@import '../default.less';
@import '../mixins.less';
//DON'T ADD IMPORTS, ABOVE ARE TO MAKE INTELLISENSE WORK

@search-query-font-family: Lucida Sans;
@search-query-font-size: 18pt;

div#search-query-correct
{
	margin-top: 2px;
	font-size: 0.9em;

	a
	{
		color: @accent-color;
	}
}

//search input field and autocomplete
#site-search
{
	position: relative;

	div#search-show-more-results,
	div#site-search-button
	{
		display: inline-block;
		width: 40px;
		height: 40px;
		background-image: url('/img/v3/search/site-search-button.png');

		html[dir='rtl'] &
		{
			float: left;
		}
	}

	input#search-query
	{
		vertical-align: top;
		background: url('/img/v3/search/site-search-input.png');
		background-position: -5px 0px;
		background-repeat: no-repeat;
		border: 0;
		width: 845px;
		height: 40px;
		line-height: 40px;
		font-family: @search-query-font-family;
		font-size: @search-query-font-size;
		color: #666666;
		padding: 0px 10px 0px 10px;

		.v7 &
		{
			font-family: @title-font;
		}

		&:focus
		{
			outline: none;
		}

		html[dir='rtl'] &
		{
			margin-right: 5px;
		}
	}

	.query-dropdown
	{
		display: none;
	}

	div#site-search-examples
	{
		margin-top: 5px;
		font: bold 12px @text-font;
		color: #000000;

		html[dir='rtl'] &
		{
			margin-right: 5px;
		}

		& > div
		{
			visibility: hidden;
		}

		&.visible
		{
			& > div
			{
				visibility: visible;
			}
		}
	}

	div#search-progress
	{
		display: none;
		position: absolute;
		top: 12px;
		right: 15px;

		html[dir='rtl'] &
		{
			left: 50px;
			right: auto;
		}
	}

	div#search-query-correct
	{
		margin-top: 15px;
	}

	.community-v2 &
	{
		form
		{
			position: relative;
		}

		div#search-show-more-results,
		div#site-search-button
		{
			cursor: pointer;
			width: 18px;
			height: 18px;
			position: absolute;
			top: 10px;
			right: 10px;
			float: right;
			background-repeat: no-repeat;
			background-color: transparent;
			.hires('/img/community/v2/icon_search');

			html[dir='rtl'] &
			{
				right: 880px;
			}
		}

		input#search-query
		{
			vertical-align: top;
			height: 39px;
			color: black;
			padding: 0 10px;
			width: 890px;
			.hires('/img/v4/search_input_form');
			background-position: 0 0;

			&.default
			{
				color: #a0a0a0;
			}

			html[dir='rtl'] &
			{
				margin-right: 0;
			}
		}

		div#search-progress
		{
			top: 12px;
			right: 45px;

			html[dir='rtl'] &
			{
				left: 45px;
			}
		}

		div#site-search-examples
		{
			font-weight: normal;

			label
			{
				color: #a0a0a0;
			}

			a
			{
				color: @accent-color;
				text-decoration: none;
				border-bottom: none;
			}

			html[dir='rtl'] &
			{
				margin-right: 0;
			}
		}
	}

	.community-v2 #site-main.search &
	{
		div#search-progress
		{
			top: 12px;
		}
	}
}

// Autocomplete styles
.search-autocomplete-results
{
	padding: 0px;
	border: 1px solid #CCCCCC;
	border-top-color: #D9D9D9;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	background-color: Window;
	overflow: hidden;
	z-index: 1000;

	ul
	{
		margin: 0px;
		padding: 0px;
		list-style-position: outside;
		list-style: none;

		html[dir='rtl'] &
		{
			padding: 0;
		}

		li
		{
			margin: 0px;
			padding: 2px 5px;
			cursor: pointer;
			display: block;
			font-family: @search-query-font-family;
			font-size: @search-query-font-size;
			overflow: hidden;

			.v7 &
			{
				font-family: @title-font;
			}

			a.keyword-search-autocomplete-result
			{
				text-decoration: none;

				.keyword-search-autocomplete-text
				{
					color: @accent-color;

					.search-autocomplete-select
					{
						color: @accent-color;
					}
				}

				.keyword-search-autocomplete-arrow-margin
				{
					margin: 0 10px 0 10px;
					font-size: 12pt;
				}

				.keyword-search-autocomplete-angle-margin
				{
					margin: 0 6px 0 6px;
					font-size: 12pt;
				}

				.keyword-search-autocomplete-item
				{
					color: #222;
				}
			}
		}
	}
}

.search-autocomplete-select
{
	background-color: Highlight;
	color: HighlightText;
}