@import 'mediawiki.skin.variables.less';

.mw-advancedSearch-container {
	textarea,
	input {
		/* This will flip with CSSJanus */
		direction: ltr;
	}
}

.mw-advancedSearch-searchPreview-tagList {
	display: inline-flex;
	flex-flow: row wrap;
	gap: 4px;
	margin: 0;
	vertical-align: middle;

	.oo-ui-tagItemWidget {
		margin: 0;
	}
}

.mw-advancedSearch-searchPreview-label {
	font-weight: bold;
	margin-right: 0.3125em;
	vertical-align: middle;
}

.mw-advancedSearch-namespacesPreview {
	.oo-ui-tagItemWidget {
		margin: 0;
	}
}

.mw-advancedsearch-namespacesPreview-label {
	font-weight: bold;
	margin-right: 0.3125em;
	vertical-align: middle;
}

.mw-advancedSearch-searchPreview-previewPill {
	> .oo-ui-labelElement-label {
		> span {
			vertical-align: top;
		}

		> .mw-advancedSearch-searchPreview-content {
			display: inline-block;
			text-overflow: ellipsis;
			overflow: hidden;
			max-width: 5em;
		}
	}

	&.mw-advancedSearch-searchPreview-preview-sort > .oo-ui-labelElement-label > .mw-advancedSearch-searchPreview-content {
		max-width: none;
	}
}

.mw-advancedSearch-fieldContainer {
	// FIXME: This is a non-standard styling, which should be unified with Codex.
	background: linear-gradient( rgba( 0, 0, 0, 0.1 ), @background-color-base 0.5em );
	border: @border-subtle;
	border-top: 0;
	box-sizing: border-box;
	margin: 0;
	margin-top: -1px;
	max-width: 50em;
	padding: 1em;

	fieldset {
		border-top: @border-subtle;
		margin-top: 1em;
	}

	/* FIXME: Why does this try to mimic a <fieldset><legend> element instead of being an actual one? */
	/* See https://phabricator.wikimedia.org/T151061 and https://gerrit.wikimedia.org/r/#/c/325243/  */
	.oo-ui-labelElement > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
		background: @background-color-base;
		color: @color-subtle;
		font-weight: normal;
		font-size: 1em;
		left: 1em;
		line-height: 1;
		padding: 0 0.2em;
		position: relative;
		top: -0.8em;
	}
}

.mw-advancedSearch-expandablePane-options,
.mw-advancedSearch-expandablePane-namespaces {
	clear: both;
	display: block;
	margin: 0;
	max-width: 50em;
	padding-top: 0.3em;
}

.mw-advancedSearch-expandablePane-button {
	width: 100%;

	> .oo-ui-buttonElement-button {
		text-align: left;
		font-weight: normal;
		white-space: normal;
		width: 100%;
	}

	&.oo-ui-widget-enabled.oo-ui-buttonWidget {
		&.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
			background-color: @background-color-interactive-subtle;
		}

		> .oo-ui-buttonElement-button:hover {
			background-color: @background-color-interactive-subtle;
			color: @color-base;
		}
	}
}

.mw-advancedSearch-expandablePane-pane {
	display: none;
}

.mw-advancedSearch-filetype-presets .oo-ui-multioptionWidget {
	display: inline-block;
	margin-right: 1em;
}

.mw-advancedSearch-filesize {
	.operator-container,
	.value-container {
		box-sizing: border-box;
		width: 50%;
		float: left;
	}

	.operator-container {
		padding-right: 1em;
	}
}

.mw-advancedSearch-namespacePresets {
	/* Required to clear the float started by the "remember" checkbox */
	clear: right;
	margin-right: 0;

	label {
		display: inline-block;
		margin-right: 0.7em;
		width: auto;

		&.oo-ui-checkboxMultioptionWidget {
			padding: 0;
		}
	}

	.oo-ui-multiselectWidget-group {
		margin-left: 0.5em;
		padding-top: 0.5em;
	}
}

.mw-advancedSearch-namespace-selection-header {
	display: block;
	padding-top: 0.5em;

	> .oo-ui-labelElement {
		float: right;
		margin: 0 0.5em 0.4em 0;
	}

	> .mw-advancedSearch-namespace-search-in-label {
		float: left;
		font-weight: bold;
	}
}

.mw-advancedSearch-namespace-selection {
	// FIXME: This is a non-standard styling, which should be unified with Codex.
	background: linear-gradient( rgba( 0, 0, 0, 0.1 ), @background-color-interactive-subtle 0.5em );
	border: @border-base;
	box-sizing: border-box;
	max-width: 50em;
	position: relative;
	border-bottom: 0;
	border-top: 0;
}

.mw-advancedSearch-namespace-border {
	border: @border-subtle;
	border-width: 4px 0 1px 0;

	&:first-child {
		border-top: 0;
	}
}

.mw-advancedSearch-namespaceFilter {
	.oo-ui-tagMultiselectWidget-handle {
		border-top: 0;
		border-left: 0;
		border-right: 0;
		border-radius: 0 0 @border-radius-base @border-radius-base;
	}

	.oo-ui-tagMultiselectWidget-input .oo-ui-inputWidget-input {
		border-left: 0;
		border-right: 0;
	}
}

// that's how nested the background-color property of a tagWidget is
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled {
	&.selected {
		background-color: @background-color-progressive-subtle;
		border-color: @border-color-progressive;
	}
}

.oo-ui-popupWidget-popup .mw-advancedSearch-tooltip-head {
	color: @color-subtle;
	// Override MW core's h1-h6 top padding.
	padding-top: 0;
	font-size: 110%;
}