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

$wc-fieldlayout-input-width: 100% - $wc-fieldlayout-default-label-width; // Do not change


.wc-fieldlayout + .wc-fieldlayout, // Vertical space between consecutive WFieldLayouts.
.wc-field  + .wc-field { // Vertical space between fields in a WFieldLayout.
	margin-top: $wc-gap-normal;
}

.wc_ordered {
	&,
	.wc-fieldlayout {
		counter-reset: wcfld;
	}

	> .wc-field {
		counter-increment: wcfld;

		> :first-child::before {
			content: counter(wcfld) '. ';
			margin-right: $wc-gap-small;

			.wc_ordered & {
				content: counters(wcfld, '.') ' ';
			}
		}
	}

	&.wc-layout-stacked > .wc-field {
		&::before {
			content: counter(wcfld) '. ';
			margin-right: $wc-gap-small;

			.wc_ordered & {
				content: counters(wcfld, '.') ' ';
			}
		}

		> :first-child::before {
			content: '';
			display: none;
			margin-right: 0;
		}
	}
}

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

// The input container div.
.wc-input {
	margin-top: $wc-gap-small; // push off of the label.

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

	> input,
	> select,
	> textarea {
		max-width: 100%;
	}
}

// If you _really_ want to support all possible labelWidths you can ignore this and just use
// @for $i from 1 through 100 as shown below.
$wc-fld-list: 16, 33, 34, 66, 67, 83 !default;

@include respond-not-small {
	// This block should be in fieldLayout.dt.css but is here to work around a Safari bug.
	// Flat is the most common use, but shouldn't be (due to a11y concerns which are not adequately covered by WCAG 2.0)
	.wc-layout-flat > .wc-field {
		> label,
		> span,
		> div {
			display: inline-block;
			vertical-align: text-top;

			&:first-child { //The first child is the label or stand-in or merely an empty placeholder/spacer.
				width: $wc-fieldlayout-default-label-width;
			}
		}

		> .wc-input {
			margin-top: 0; // Remove stacked margin.
			max-width: $wc-fieldlayout-input-width;
			width: $wc-fieldlayout-input-width;
		}
	}

	// @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);
	}

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