@import 'mediawiki.mixins';

/* Reuses colors from mediawiki.legacy/shared.css */
.mw-email-not-authenticated .oo-ui-labelWidget,
.mw-email-none .oo-ui-labelWidget {
	background-color: #fdf1d1;
	color: #000;
	border: 1px solid #fde29b;
	padding: 0.5em;
}
/* Authenticated email field has its own class too. Unstyled by default */
/*
.mw-email-authenticated .oo-ui-labelWidget { }
*/

/* This is needed because add extra buttons in a weird way */
.mw-prefs-buttons .mw-htmlform-submit-buttons {
	display: inline;
	margin: 0;
}

.mw-prefs-buttons {
	margin-top: 1em;
}

#prefcontrol {
	margin-right: 0.5em;
}

/*
 * Hide, but keep accessible for screen-readers.
 */
.client-js .mw-navigation-hint:not( :focus ) {
	.mixin-screen-reader-text;
}

/* Override OOUI styles so that dropdowns near the bottom of the form don't get clipped,
 * e.g.'Appearance' / 'Threshold for stub link formatting'. This is hacky and bad, it would be
 * better solved by setting overlays for the widgets, but we can't do it from PHP... */
#preferences .oo-ui-panelLayout {
	position: static;
	overflow: visible;
	.transform( none );
}

#preferences .oo-ui-menuLayout .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed {
	border-width: 0;
	border-radius: 0;
	padding-left: 0;
	padding-right: 0;
	box-shadow: none;
}

.mw-prefs-faketabs > .oo-ui-menuLayout > .oo-ui-menuLayout-menu a {
	color: inherit;
	text-decoration: none;
}

/* Disabled JavaScript */
.client-nojs {
	/* Adjust the borders: frame each prefsection instead of the
	 * whole tabLayout wrapper */
	#preferences .oo-ui-menuLayout .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed:first-child {
		border-color: #c8ccd1;
		border-width: 1px 0 0;
	}

	#preferences .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed:last-child {
		padding-bottom: 0;
		margin-bottom: 0;
	}

	/* Fake Tabs to address reflow */
	.mw-prefs-faketabs {
		border-width: 0;
		border-radius: 0;
		.box-shadow( none );

		> .oo-ui-menuLayout > .oo-ui-menuLayout-content > .oo-ui-stackLayout {
			margin-bottom: 1em;
		}

		/* Hide the tab menu when JS is disabled as we can't use this feature */
		> .oo-ui-menuLayout > .oo-ui-menuLayout-menu {
			display: none;
		}
	}
}

/* Enabled JavaScript
 * Hide top level legends when JS is enabled, as they will not be visible
 * when the real tabLayout is built */
.client-js #preferences {
	.oo-ui-tabPanelLayout {
		padding-top: 0.5em;

		& > fieldset > legend {
			display: none;
		}
	}

	.oo-ui-panelLayout-framed .oo-ui-panelLayout-framed {
		margin-top: 2.286em; /* equals `32px` at `font-size: 14px;` */
		margin-bottom: 0;
		border-width: 0;
		border-radius: 0;
		padding: 0;
		box-shadow: none;

		&:first-child {
			margin-top: 0.85714286em;
		}
	}

	> .oo-ui-panelLayout > .oo-ui-fieldsetLayout > .oo-ui-fieldsetLayout-header {
		margin-bottom: 1em;
	}
}

/* Make the "Basic information" section more compact */
/* OOUI's `align: 'left'` for FieldLayouts sucks, so we do our own */
#mw-htmlform-info {
	> .oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
		display: inline-block;
		width: 20%;
		padding: 0;
		vertical-align: middle;
	}

	> .oo-ui-fieldLayout-align-top .oo-ui-fieldLayout-help {
		margin-right: 0;
	}

	> .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
		display: inline-block;
		width: 80%;
		vertical-align: middle;
	}
}

/* Expand the dropdown and textfield of "Time zone" field to the */
/* usual maximum width and display them on separate lines. */
#wpTimeCorrection .oo-ui-dropdownInputWidget,
#wpTimeCorrection .oo-ui-textInputWidget {
	display: block;
	max-width: 50em;
}

#wpTimeCorrection .oo-ui-textInputWidget {
	margin-top: 0.5em;
}

/* HACK: expand width of gadget descriptions.
 * This should be moved to the Gadgets extension */
#mw-htmlform-gadgets .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body {
	max-width: none;
}