#search-overlay
	position: fixed
	top: 0
	left: 0
	right: 0
	bottom: 0
	width: 100%
	height: 100%
	visibility: hidden
	opacity: 0
	overflow-y: scroll
	z-index: $zindex-sticky + 1
	transition: visibility $long-transition, opacity $long-transition

	&.show
		opacity: 1
		visibility: visible
		background-color: rgba($body-bg, .7)

	.qs-result
		max-width: 80vw

#qs-toggle
	opacity: 1
	visibility: visible

.quick-search
	opacity: 0
	transition: opacity $short-transition
	visibility: hidden

.quick-search.show
	opacity: 1
	visibility: visible

.qs-input
	input
		border-style: solid
		border-radius: $border-radius
		height: $input-height-inner
		padding: $input-padding-y 25px $input-padding-y $input-padding-x
		width: 30vw

		&:focus
			&+i+select
				border-color: $color-primary

		&.multi-scope // has a select next to it
			border-right: none
			border-bottom-right-radius: 0
			border-top-right-radius: 0

	select
		border-width: 2px
		border-left: none
		border-bottom-right-radius: $border-radius
		border-top-right-radius: $border-radius
		height: $input-height-inner
		margin-left: 5px
		padding: $input-padding-y $input-padding-x

		&:focus, option
			// background-color: $dark
			// color: $light

	.qs-busy-symbol
		margin-left: -2em