@import '../../mobile.less/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, .option-links {
		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;
	}

	#amc-field {
		.hlist {
			padding-top: 0.4em;

			> li {
				margin-right: 15px;
			}
		}

		.option-links {
			// margin should be same as margin applied to .oo-ui-fieldLayout-body
			margin: 0 16px;
		}
	}

	#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;
		display: flex; // Work around for T180652
		align-items: center;

		// make parent expand to include floats
		&:before,
		&:after {
			content: '';
			display: table;
		}

		&:after {
			clear: both;
		}
	}

	.oo-ui-fieldLayout-header {
		flex-grow: 1;
		width: auto !important; // Work around for T180652
		padding-right: 1.5em !important; // overriding OOUI style for T214195
	}

	.oo-ui-fieldLayout-field {
		width: auto !important; // Work around for T180652
	}
}