.form-search {
	position: relative;
	height: 24px;

	.search {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 24px;
		padding-right: 22px;
		color: $form-search-color;
		background: $form-search-bg-color;
		border: 1px solid $form-search-border-color;
		border-radius: 3px;

		&:focus {
			color: $form-search-focused-color;
			background: $form-search-focused-bg-color;
			border-color: $form-search-focused-border-color;

			& ~ .btn-icon:not([disabled]) {
				color: $form-search-icon-focus-color !important;
			}
		}
	}

	.btn-icon {
		position: absolute;
		top: 2px;
		right: 2px;
		min-width: 20px;
		height: 20px;
		color: $form-search-icon-color;

		&:hover {
			color: $form-search-icon-hover-color;
		}

		&:focus {
			color: $form-search-icon-focus-color;
			box-shadow: 0 0 0 1.5px $form-search-focused-border-color;
		}
	}
}

.search-suggest {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 1000;
	min-width: 16px;
	color: $font-alt-color;
	background-color: $form-bg-color;
	border: 1px solid $action-border-color;
	border-top: 0;
	box-shadow: 0 6px 10px 0 $action-shadow-color;

	li {
		display: block;
		height: inherit;
		padding: .4em 5px;
		margin: 0;
		overflow: hidden;
		color: $font-color;
		line-height: normal;
		word-break: break-word;
		cursor: pointer;

		@if $ui-transitions {
			transition: background-color $ui-controls-transition-duration ease-out;
		}
	}

	.suggest-hover {
		background-color: $action-hover-color;
	}
}
