#search-overlay
	position: absolute
	top: 0
	left: 0
	right: 0
	bottom: 0
	width: 100%
	height: 100%
	pointer-events: none
	visibility: hidden
	opacity: 0
	z-index: $z-index-base + 4
	transition: opacity 150ms ease-in-out

	&.active
		opacity: 1
		visibility: visible
		background-color: rgba($color-background-nav, .7)

.search-input
	+media-lg
		max-width: 350px
	+media-md
		max-width: 350px
	+media-sm
		max-width: 120px
	+media-xs
		display: block
		margin: 0 10px
		position: absolute
		z-index: $z-index-base
		right: 5px
	position: relative
	float: left
	padding: 0
	margin: 0


	.search-icon
		position: absolute
		color: white
		top: 4px
		left: 10px
		cursor: pointer

		&:after
			opacity: 0
			content: 'Use advanced search...'
			font-style: normal
			background: darken($color-background-nav, 5%)
			color: $color-text-light-primary
			box-shadow: 1px 1px 3px rgba(black, .4)
			padding: 3px 10px
			font-size: .85em
			border-radius: 3px
			top: 30px
			left: -10px
			width: 150px
			position: absolute
			transition: top 150ms ease-in-out, opacity 150ms ease-in-out
			pointer-events: none

		&:hover
			&:after
				opacity: 1
				top: 35px


	#cloud-search, .tt-hint
		+text-overflow-ellipsis
		border: thin solid $color-background
		border-radius: 3px
		font:
			size: 1em
			weight: 400
		margin: 0
		min-height: 32px
		outline: none
		padding: 0 20px 0 40px
		transition: border 100ms ease-in-out

		&:focus
			box-shadow: none
			border: none

		&::placeholder
			color: rgba($color-text, .5)
			transition: color 150ms ease-in-out

		&:hover
			&::placeholder
				color: rgba($color-text, .6)