/*
 * Citizen
 *
 * SkinStyles for Special:Search
 * Module: mediawiki.special.search.styles
 * Version: 1.39.0
 *
 * Date: 2022-10-20
*/

@import '../../../resources/mixins.less';
@import '../../../resources/variables.less';

// Disable default sticky header
#citizen-body-header-sticky-sentinel {
	display: none;
}

#mw-search-top-table {
	display: flex;
	justify-content: space-between;
	gap: var( --space-xl );

	// Fix weird space between input field and button
	.oo-ui-actionFieldLayout .oo-ui-textInputWidget {
		max-width: none;
	}

	.oo-ui-widget {
		font-size: 1rem; // HACK: Override the 14px hack we use for OOUI
	}
}

.mw-search-profile-tabs {
	border: 0;
	border-bottom: 1px solid var( --border-color-base );
	margin-top: var( --space-xxs );
	background-color: transparent;
}

.search-types {
	padding-left: 0;
	float: none;

	ul {
		display: flex;
		overflow-x: auto;
		white-space: nowrap;
	}

	a {
		padding: var( --space-xs ) var( --space-sm );
		border-bottom: 2px solid transparent;
		color: var( --color-base--emphasized );
		font-weight: var( --font-weight-medium );

		&:hover {
			border-color: var( --color-primary--hover );
			color: var( -color-primary--hover );
		}
	}

	.current a {
		border-color: var( --color-primary );
		color: var( --color-primary );
	}
}

.results-info {
	color: var( --color-base--subtle );
	font-size: 0.875rem;
	white-space: nowrap;
}

#mw-searchoptions {
	border-color: transparent;
	border-radius: 0;
	background-color: var( --color-surface-1 );

	h4 {
		color: var( --color-base--subtle );
		font-size: 0.875rem;
		font-weight: var( --font-weight-normal );
		letter-spacing: 0.05em;
	}

	.divider {
		border-color: var( --border-color-base );
	}
}

#mw-search-interwiki {
	border-color: var( --border-color-base );
}

.searchdidyoumean {
	font-size: 1rem;
}

.mw-search-createlink,
.mw-search-exists {
	// These can generate a empty card when there are no text content
	// FIXME: re-enable when this is addressed in core
	// padding: var( --space-sm ) var( --space-md );
	// background: var( --color-surface-2 );
	// border-radius: var( --border-radius--small );
	margin-top: 0 !important;
	color: var( --color-base--emphasized );
}

.mw-search-results {
	max-width: 50em;

	li {
		padding: var( --space-md ) 0;

		a {
			font-size: var( --font-size-h3 );
		}
	}
}

.mw-search-result {
	// padding: var( --space-md ) 0;
	font-size: 0.875rem;

	&-heading {
		a {
			// font-size: var( --font-size-h3 );
			font-weight: var( --font-weight-semibold );
		}
	}

	&-data {
		color: var( --color-base--subtle );
		font-size: 0.875rem;
	}
}

.searchmatch {
	color: var( --color-base--emphasized );
	font-weight: var( --font-weight-semibold );

	a & {
		// If searchmatch is part of the link (usually title), use link color
		color: inherit;
	}
}

.searchresults {
	h2 {
		padding-bottom: var( --space-xs );
		border-bottom: 1px solid var( --border-color-base );
		margin-bottom: 0;
		color: var( --color-base--subtle );
		font-size: 0.875rem;
		font-weight: var( --font-weight-normal );
		letter-spacing: 0.05em;
	}
}

// Somehow got overridden
.citizen-body {
	.search-types {
		ul {
			margin: 0;
		}
	}

	.mw-search-results {
		margin: 0;
	}
}

@media ( max-width: @width-breakpoint-tablet ) {
	.results-info {
		display: none;
	}

	// Not great but works for now
	#mw-searchoptions {
		overflow: auto;
		max-height: 20vh;
	}

	.mw-search-createlink,
	.mw-search-exists {
		max-width: none;
		float: none;
	}
}