/* 
	Header Search Box
    ========================================================================== 

	Styles for the admin header search box.  
	
*/

// Placeholder style.
@mixin placeholder-style {
	padding-top: 2px;
	padding-left: 4px;
	color: $header-text-color;
	font-size: $font-size-base;
	font-weight: normal;
	opacity: 1;
}

> .search {
	width: calc(100% - 650px); // 650 comes from .logo width and .actions width.

	&:before {
		@extend %fa-icon;
		@extend .fas;
		content: fa-content($fa-var-search);
		color: $header-text-color;
		font-size: 15px;
		line-height: 44px;
		margin-left: 24px;
		position: absolute;
	}

	// Input field.
	.input {
		padding: 0 0 0 (2 * $padding-large);
		outline: 0;
		color: $header-text-color;
		background: transparent;
		border: 0;
		border-radius: 0; // reset standard input field behaviour
		width: 100%;
		height: 46px;
		font-size: 14px;
		transition: background-color 250ms linear;

		// Placeholder styles.
		&::-webkit-input-placeholder {
			@include placeholder-style;
		}

		&:-moz-placeholder {
			@include placeholder-style;
		}

		&::-moz-placeholder {
			@include placeholder-style;
		}

		&:-ms-input-placeholder {
			@include placeholder-style;
		}
	}

	// Search list. 
	.list {
		display: none;

		// Visible state of search list.
		&.active {
			display: block;
			position: relative;
			top: -2px;
		}

		// Search list item.
		.list-item {
			font-size: $font-size-large;
			cursor: pointer;

			a {
				padding: ($padding-small / 2) $padding-large;

				.placeholder {
					color: $header-bg-color;
				}
			}
		}
	}
}