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

// Flat is the most common use, but shouldn't be (due to a11y concerns which are not covered by WCAG 2.0)
@include wc-fld-layout-flat;

// @for $i from 1 through 100 {
// 	$wc-fld-lblw: $i * 1%;
@for $i from 1 through 20 {
	$j: $i * 5;
	@include wc-fld-layout($j);
}

$wc-fld-list: 33, 67;
@each $w in $wc-fld-list {
	@include wc-fld-layout($w);
}

// special case for 66: it _should_ be 67
.#{$wc-label-width-slug}_66 {
	&.flat > .wc-field > :first-child {
		width: 67%;
	}

	&.stacked > .wc-field > .wc-input {
		margin-left: 67%;
	}

	> .wc-field > .wc-input {
		max-width: 33%;
		width: 33%;
	}
}

.#{$wc-input-width-slug}_66 .wc-input {
	width: 67%;
}

@include respond(small) {
	.wc-field {
		// Important to override all the above gubbins without another thousand rules.
		// scss-lint:disable ImportantRule
		> :first-child,
		> .wc-input {
			display: block;
			margin-left: 0 !important;
			max-width: 100% !important;
			width: 100% !important;
		}

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

		> .wc-label + .wc-input {
			margin-top: $vgap-small;
		}
	}
}
