mediawiki-skins-MinervaNeue/skinStyles/mobile.startup/search/SearchOverlay.less

@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: @height-site-header;
	}

	.with-results,
	.without-results {
		margin: 0;
	}

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

	.search-box {
		position: relative;
	}
}

// Calculate padding based off icon and branding box widths,
// accounting for `box-sizing: border-box` on the icon
@spacing-search-horizontal-ems: unit( @spacing-horizontal-button / @font-size-browser, ems );

@media all and ( min-width: @min-width-breakpoint-tablet ) {
	.overlay.search-overlay {
		@searchPadding: @min-size-interactive-touch-ems + @min-width-branding-box-ems - @spacing-search-horizontal-ems;

		.search-box,
		.search-content,
		.spinner-container,
		.results {
			width: @width-search-box;
			margin-left: @searchPadding;
		}

		// Ensure search overlay content is aligned with .heading-container
		.overlay-header-container,
		.overlay-content {
			padding-left: @padding-content;
			padding-right: @padding-content;
			box-sizing: border-box;
		}

		.overlay-title {
			width: auto;
		}

		.overlay-content {
			// Override default width styles
			width: 90%;
			max-width: none;
		}

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

/* Keeps search input aligned */
@media all and ( min-width: @min-width-breakpoint-tablet ) and ( max-width: @min-width-breakpoint-desktop ) {
	.overlay-title {
		padding-left: 0 !important;
	}
}

/* FIXME: Remove when T366859 has been addressed */
@media screen and ( min-width: 720px ) {
	.overlay.search-overlay {
		@T366859-searchPadding: @min-size-interactive-touch-ems + @T366859-min-width-branding-box-ems - @spacing-search-horizontal-ems;

		.search-box,
		.search-content,
		.spinner-container,
		.results {
			margin-left: @T366859-searchPadding;
		}
	}
}

@media screen and ( min-width: @min-width-breakpoint-desktop ) {
	.overlay.search-overlay {
		// Normally .overlay-content would have these styles by default
		// But since we need to account for .heading-container padding in .overlay-content,
		// we apply these styles directly to the search results instead.
		.search-results-view {
			margin-left: auto;
			margin-right: auto;
			width: 90%;
			max-width: @max-width-content-tablet;
		}
	}
}