@import '../../../minerva.less/minerva.variables.less';

// 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.

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

	.header {
		height: @siteHeaderHeight;
	}

	.clear {
		position: absolute;
		// the icon should take into account overlay-title top padding
		// and then be centered
		top: ( @iconSize / 2 ) + @headerVerticalPadding;
		right: 0;
	}
}

@media all and ( min-width: @width-breakpoint-tablet ) {
	.overlay.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: @width-breakpoint-desktop ) {
	.overlay.search-overlay {
		.overlay-content {
			// align with the search form
			max-width: @contentMaxWidthTablet + ( 2 * @iconGutterWidth );
		}
	}
}