@import 'mobile.variables';

/*
SETTINGS PAGE
*/
.client-js {
	// toast will be shown in JS mode.
	.successbox {
		display: none;
	}
	#mw-mf-settings-save {
		display: none;
	}
	// Checkboxes in form will be upgraded to toggle switches with JS
	// Minimise FOUC
	#mobile-options .oo-ui-checkboxInputWidget {
		visibility: hidden;
	}
}

form.mw-mf-settings {
	margin: 0;
	padding: 0;
	padding-bottom: 40px;

	.oo-ui-fieldLayout-header strong {
		font-weight: bold;
	}

	.option-description {
		font-weight: normal;
		font-size: 0.8em;
		padding-right: 8px;
		line-height: 1.4em;
	}

	.oo-ui-fieldLayout {
		border-bottom: solid 1px @colorGray14;
		padding-top: 12.5px;
		padding-bottom: 12.5px;
		margin-top: 0;

		&:first-child {
			border-top: solid 1px @colorGray14;
		}
	}

	.mobile-options-feedback {
		margin-top: 10px !important;
	}

	#beta-field {
		border-top: 0;
		padding-top: 0;

		&:before {
			content: '';
			width: 100%;
			height: 10%;
			background: @colorGray14;
			padding-top: 20px;
			margin-bottom: 10px;
			display: block;
		}

		&:first-child {
			border-top: solid 1px @colorGray14;

			&:before {
				background: none;
			}
		}
	}

	.mobile-options-beta-feature {
		font-size: 0.9em;
		opacity: 0.5;

		&.is-enabled {
			opacity: 1;
		}
	}

	.oo-ui-fieldLayout-body {
		margin-bottom: 40px;
	}

	// Work around for T180652
	.oo-ui-fieldLayout-header {
		width: 65% !important;
	}
	.oo-ui-fieldLayout-field {
		width: 30% !important;
		text-align: right;
		.oo-ui-widget {
			text-align: left;
		}
	}
}