@import 'mediawiki.skin.variables.less';
@import '../../../mobile.less/mobile.variables.less';
@import 'SearchResultsView.less';

@thumbGap: 15px;
@thumbWidth: 70px;
@clearIconRightGutterWidth: 0.5em;

.language-overlay,
.search-overlay {
	.search-box {
		&::before {
			content: '';
			.cdx-mixin-css-icon( @cdx-icon-search, @param-fill-color: @color-subtle, @param-size-icon: @size-icon-medium );
			position: absolute;
			left: 6px;
			top: 8px;
		}

		input {
			color: @color-base;
		}
	}
}

.overlay.search-overlay {
	background: @background-color-base;

	.spinner-container {
		background-color: @background-color-base;
		bottom: 0;
		display: none;
		left: 0;
		opacity: 0.7;
		right: 0;
		z-index: @z-indexOverOverlay;

		.spinner {
			display: block;
			left: 50%;
			margin-left: -( @size-icon + @width-icon-gutter * 2 ) / 2;
			position: absolute;
			top: 10%;
		}
	}

	.search-box {
		display: block;
	}

	.results,
	.search-feedback {
		// don't use background to preserve .loading properties
		background-color: @background-color-base;
	}

	.overlay-header {
		background-color: @background-color-transparent;
	}

	// The search overlay header is a little special so make some tweaks to the CSS
	// while using the same HTML.
	.header-cancel {
		display: none;
	}

	.header-action {
		width: auto;
	}

	.overlay-title {
		// because the clear icon is absolutely positioned
		position: relative;
		padding-left: 15px;
	}

	.header input {
		// save space for the clear icon
		padding-right: ( @size-icon + @width-icon-gutter + @clearIconRightGutterWidth );

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

	.overlay-content {
		position: relative;
		// used to close the overlay in firefox
		height: 100%;
		width: 100%;
		box-sizing: border-box;
	}

	.search-content {
		background-color: var( --background-color-interactive-subtle );
		border-top: @border-width-base @border-style-base @border-color-subtle;
		border-bottom: @border-width-base @border-style-base @border-color-subtle;
		cursor: pointer;

		.caption {
			padding: 1em 0;
			padding-left: 12px;
		}
	}

	.results {
		box-shadow: 0 3px 3px 0 rgba( 117, 117, 117, 0.3 );

		li:last-child {
			border-bottom: 0;
		}

		h2 {
			font: inherit;
		}
	}

	li.page-summary {
		min-height: @thumbWidth;

		h3 {
			margin: 0;
			font-weight: normal;

			strong {
				text-decoration: none;
			}
		}

		.wikidata-description {
			font-size: 13px;
			margin-top: 9px;
		}
	}

	.search-feedback {
		box-shadow: 0 3px 3px 0 rgba( 117, 117, 117, 0.3 );
		border-top: @border-width-base @border-style-base @border-color-subtle;
		font-size: 0.8em;
		padding: 0.5em 1em;
	}

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

	&.visible {
		animation: fadeIn 0.5s;
	}

	// see T156509
	&.overlay-ios {
		animation: none;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}