// Form elements and layouts

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

/* stylelint-disable selector-class-pattern */

// --------------------------------------------------------------------------
// Layouts
// --------------------------------------------------------------------------

// The FancyCaptcha image CAPTCHA used on WMF wikis drives the width of the
// 'VForm' design, the form can't be narrower than this.
@captchaContainerWidth: 290px;
@defaultFormWidth: @captchaContainerWidth;

// Forms

// VForm
//
// Style a compact vertical stacked form ("VForm") and the elements in divs
// within it. See button and inputs section on guidance of how and when to use them.
//
// Markup:
// <form class="mw-ui-vform">
//   <div class="mw-ui-vform-field">This is a form example.</div>
//   <div class="mw-ui-vform-field">
//     <label>Username </label>
//     <input class="mw-ui-input" value="input">
//   </div>
//   <div class="mw-ui-vform-field">
//     <button class="mw-ui-button mw-ui-progressive">Button in vform</button>
//   </div>
// </form>
.mw-ui-vform {
	box-sizing: border-box;
	width: @defaultFormWidth;

	// MW currently doesn't use the type attribute everywhere on inputs.
	select,
	.mw-ui-button {
		display: block;
		width: 100%;
	}

	// Give dropdown lists the same spacing as input fields for consistency.
	// Values taken from .agora-field-styling() in mixins/form.less
	select {
		box-sizing: border-box;
		padding: 0.35em 0.5em;
		vertical-align: middle;
	}

	> label {
		display: block;
		color: @color-base;
		box-sizing: border-box;
		width: auto;
		margin: 0 0 0.2em;
		padding: 0;
		font-size: 0.9em;

		* {
			font-weight: normal;
		}
	}

	// Override input styling just for checkboxes and radio inputs.
	input[ type='radio' ] {
		display: inline;
		box-sizing: content-box;
		width: auto;
	}
}

// --------------------------------------------------------------------------
// Elements
// --------------------------------------------------------------------------

// A wrapper for a single form field: the <input> / <select> / <button> element,
// help text, labels, associated error/warning/success messages, and so on.
// Elements with this class are generated by HTMLFormField in core MediaWiki.
//
// (We use a broad definition of 'field' here: a purely textual information
// block is also a "field".)
.mw-ui-vform-field,
.mw-ui-vform .htmlform-tip {
	display: block;
	margin: 0 0 15px;
	padding: 0;
	width: 100%;
}

// Apply mw-ui-label to individual elements to style them.
// You generally don't need to use this class if <label> is within an Agora
// form container such as mw-ui-vform
.mw-ui-label {
	color: @color-base;
	font-size: 0.9em;

	* {
		font-weight: normal;
	}
}