@import 'minerva.variables';

// These styles transform the SearchOverlay appearance in the Minerva skin.
// Since SearchOverlay can be used by other skins, these styles are kept separate from
// the others.

.search-overlay {
	.spinner-container {
		top: @headerHeight;
	}

	.clear {
		position: absolute;
		top: ( @headerHeight / 2 ) - ( @iconSize / 2 );
		right: 0;
		margin-top: @headerMarginTop;
	}
}

@media all and ( min-width: @deviceWidthTablet ) {
	.search-overlay {
		.search-box {
			display: table-cell;
		}
		.spinner-container,
		.search-content,
		.results {
			width: @searchBoxWidth;
			margin-left: (@iconSize + 2 * @iconGutterWidth) + @brandingBoxWidth;
		}

		.overlay-title {
			width: @searchBoxWidth;
			padding-left: (@iconSize + 2 * @iconGutterWidth) + @brandingBoxWidth;
		}

		.spinner-container {
			left: auto;
			right: auto;
		}

		ul {
			width: auto;
		}
	}
}

@media all and ( min-width: @wgMFDeviceWidthDesktop ) {
	.search-overlay {
		.overlay-content {
			// align with the search form
			max-width: @contentMaxWidthTablet + ( 2 * @iconGutterWidth );
		}
	}
}