@import "minerva.mixins";
@import "minerva.variables";

.search-overlay {
	background: @semiTransparent;

	.overlay-header,
	.results {
		// don't use background to preserve .loading properties
		background-color: #fff;
	}

	.overlay-header {
		border-collapse: separate;
		white-space: nowrap;
	}

	form,
	button {
		display: table-cell;
		vertical-align: middle;
	}

	form {
		width: 100%;
		padding: .15em @headerTitlePaddingH 0;
		height: 3.35em;
	}

	input {
		border: none;
		padding: 0;
	}

	.overlay-content {
		// used to close the overlay in firefox
		height: 100%;
		width: 100%;
	}

	.search-content {
		border-bottom: 1px solid @grayLight;
		cursor: pointer;

		button {
			.background-image('../images/searchContent.png');
		}

		.caption {
			padding: 1em @headerTitlePaddingH;
		}
	}

	.results {
		box-shadow: 0 3px 3px 0 rgba(117, 117, 117, .3);

		// Since search results only contain one line, shrink the space taken up by the thumbnails
		li {
			padding-left: @headerHeight + @headerTitlePaddingH;

			.list-thumb {
				width: @headerHeight;
			}
		}

		li:last-child {
			border-bottom: none;
		}

		h2 {
			font: inherit;
		}
	}
}

@-webkit-keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
@-webkit-keyframes fadeOut {
	from { opacity: 1; }
	to { opacity: 0; }
}
@keyframes fadeOut {
	from { opacity: 1; }
	to { opacity: 0; }
}
.animations {
	.search-overlay {
		&.visible {
			.animation(fadeIn .5s);
		}
		&.fade-out {
			.animation(fadeOut .5s);
		}
	}
}

.alpha {
	.search-overlay {
		background: white;
	}
}