/*
 * Citizen
 *
 * SkinStyles for Extension:AdvancedSearch
 * Module: ext.advancedSearch.styles
 * Version: REL1_35 fae6250
 *
 * Date: 2021-08-26
*/

.mw-advancedSearch-fieldContainer {
	border-color: var( --border-color-base );
	background: transparent;

	fieldset {
		border-color: var( --border-color-base );
	}

	.oo-ui-labelElement > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
		background: var( --color-surface-0 ); // the parent containers are transparent
		color: var( --color-base--subtle );
	}
}

.mw-advancedSearch-expandablePane-button {
	&.oo-ui-widget-enabled.oo-ui-buttonWidget {
		&.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
			background-color: var( --color-surface-2 );
		}

		> .oo-ui-buttonElement-button {
			&:hover {
				background-color: var( --color-surface-2--hover );
				color: var( --color-base );
			}
		}
	}
}

.mw-advancedSearch-namespace-selection {
	border-color: var( --border-color-base );
	background: var( --color-surface-2 );
}

.mw-advancedSearch-namespace-border {
	border-color: var( --border-color-base );
}

// 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 {
		border-color: var( --color-primary );
		background-color: var( --color-surface-3 );
	}
}

.oo-ui-popupWidget-popup .mw-advancedSearch-tooltip-head {
	color: var( --color-base--subtle );
}