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

.search-overlay {
	background: @semiTransparent;

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

	input {
		border: none;
		padding: 0;

		// See https://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx (T102325)
		&::-ms-clear {
			display: none;
		}
	}

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

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

		.caption {
			padding: 1em @headerTitlePaddingH;
		}

		// FIXME: This is not a overlay-header so please find a more meaningful class name
		&.overlay-header {
			// Reset any tablet specific padding rules
			padding: 0;
		}
	}

	.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;
		}
	}

	.search-feedback {
		box-shadow: 0 3px 3px 0 rgba(117, 117, 117, .3);
		border-top: 1px solid @colorGray12;
		font-size: .8em;
		padding: .5em 1em;
	}

	&.no-results .search-feedback {
		border-top: none;
	}

}

@-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);
		}
	}
}