/* wc.ui.fieldLayout.scss */
@import 'wc.ui.fieldLayout_vars.scss';

// field layouts may be an ordered list, in which case we want to expose the numbers so need the element qualifier
//scss-lint:disable QualifyingElement
ul.fieldLayout {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
//scss-lint:enable QualifyingElement

.field {
	+ .field {
		margin-top: $vgap-normal;
	}

	> :first-child,
	> .input {
		@include respond(phonelike) {
			// important to override inline CSS from XSLT
			//scss-lint:disable ImportantRule
			@include border-box;
			display: block;
			margin-left: 0 !important;
			max-width: 100% !important;
			width: 100% !important;
		}
	}

	// Flat is the most common use, but shouldn't be (due to a11y concerns which are not covered by WCAG 2.0)
	.flat > & {
		> * {
			display: inline-block;
			vertical-align: text-top;
		}

		> :first-child { //the first child is the label or standing or merely an empty placeholder/spacer
			width: $label-width;

			> .wc_req { // Position the required marker next to the input.
				@include border-box;
				padding-right: 1em; //Padding right is for the required marker.
				position: relative;

				// The excessive depth here could be re-written I suppose...
				// scss-lint:disable NestingDepth
				&:after { // this is the required marker
					position: absolute;
					right: 0;
					top: 0;
				}
				// scss-lint:enable NestingDepth
			}
		}
		> .input {
			max-width: $input-width;
			width: $input-width;
		}

		> .wc_off + .input { // if the label is off screen we need some margin.
			margin-left: $label-width;
		}
	}

	.stacked > & {
		// Stacked is pretty easy, just need to put in a vertical spacer between the label and the controls. This should
		// probably be smaller than the gap between fields.
		> label + .input,
		> .label + .input {
			margin-top: $vgap-small;
		}
	}
}

// InputWidth is placed inline but a class is added to the input part of the field to signify that an inputWidth is in
// use so we can size the components
.input.inputWidth {
	> [type='text'],
	> [type='date'],
	> .dateField,
	> [type='password'],
	> [type='email'],
	> [type='tel'],
	> [type='number'],
	> textarea,
	> select,
	> fieldset {
		@include border-box;
		width: 100%;
	}

	> .dateField[role='combobox'] {
		width: auto;
	}
}

@include respond(phonelike) {
	.wc_fld_pl { //this is the placeholder for a null or moved label (moved for checkbox or radio). Remove on narrow viewports.
		display: none;
	}
}
/* end wc.ui.fieldLayout.scss */
