/* wc.ui.fieldLayout.scss */
@import 'fieldLayout-mixins';

// 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.wc-fieldlayout {
	@include tight-box;
	list-style-type: none;
}
//scss-lint:enable QualifyingElement

.wc-field {
	> label,
	> span {
		display: block;
	}

	.wc_fld_pl { //this is the placeholder for a null or moved label (moved for checkbox or radio). Remove on narrow viewports.
		display: none;
	}

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

.wc-input {
	margin-top: $vgap-small;

	// InputWidth class is added to the field to signify that an inputWidth is in use so we can size the components.
	.wc_inputwidth > & {
		> .wc_input_wrapper {
			width: 100%;

			> input {
				@include border-box;
				width: 100%;
			}

			//&.wc-datefield > input[type="date"] { // native date iput
				// max-width: calc(100% - 2rem);
				// width: initial;
			//}

			&[role='combobox'] > input[type] { // fake date input
				max-width: calc(100% - 2rem);
				// width: initial;
			}
		}

		> textarea,
		> select,
		> fieldset {
			@include border-box;
			width: 100%;
		}
	}
}

@include respond($size: 'not-small') {
	@include wc-fld-layout-flat;
}
