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

/*
SETTINGS PAGE
*/
/* stylelint-disable selector-max-id */
.client-js {
	// toast will be shown in JS mode.
	.mw-mf-mobileoptions-message {
		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;
	}
}

#skin-client-prefs-mf-expand-sections {
	display: none;
}

@media all and ( max-width: @max-width-breakpoint-mobile ) {
	#skin-client-prefs-mf-expand-sections {
		display: block;
	}
}

.skin-client-pref-description {
	font-weight: normal;
	font-size: 0.8em;
}

.cdx-toggle-switch__label {
	flex-grow: 1;
	display: flex;
	flex-flow: column;
}

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

	.cdx-toggle-switch {
		display: flex;
	}

	#mf-client-preferences label,
	.oo-ui-fieldLayout-header strong {
		font-weight: bold;
	}

	.mw-portlet > label > .skin-client-pref-description,
	.option-description,
	.option-links {
		font-weight: normal;
		display: block;
		font-size: 0.8em;
		padding-right: 8px;
		line-height: 1.4em;
	}

	.mw-portlet > label > .skin-client-pref-description {
		margin-bottom: 8px;
	}

	#mf-client-preferences .mw-portlet,
	.oo-ui-fieldLayout {
		border-bottom: @border-width-base @border-style-base @border-color-muted;
		padding-top: 12.5px;
		padding-bottom: 12.5px;
		margin-top: 0;

		&:first-child {
			border-top: @border-width-base @border-style-base @border-color-muted;
		}
	}

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

	#mf-client-preferences,
	#amc-field,
	#mobile-user-pref {
		ul.hlist {
			padding-top: 0.4em;

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

	#amc-field,
	#mobile-user-pref {
		.option-links {
			// margin should be same as margin applied to .oo-ui-fieldLayout-body
			margin: 0 16px;
		}
	}

	#mf-client-preferences {
		// 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: @background-color-interactive;
			padding-top: 20px;
			margin-bottom: 10px;
			display: block;
		}

		&:first-child {
			border-top: @border-width-base @border-style-base @border-color-muted;

			&::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
	}
}
/* stylelint-enable selector-max-id */