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

	.clear {
		background: none;
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY( -50% );
	}

	.search-box {
		position: relative;
	}
}

@media all and ( min-width: @width-breakpoint-tablet ) {
	.overlay.search-overlay {
		.search {
			margin-left: -1px;
		}

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