@import 'fieldLayout_vars';

@mixin wc-fld-layout-flat {
	.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: $label-width;
			}
		}

		> .wc-input {
			max-width: $input-width;
			width: $input-width;
		}

		.wc-input { // reset
			margin-top: 0;
		}
	}
}

$wc-label-width-slug: wc_fld_lblwth;
$wc-input-width-slug: wc_fld_inpw;

@mixin wc-fld-layout($lwdth) {
	$lw: $lwdth * 1%;
	$iw: 100% - $lw;

	.#{$wc-label-width-slug}_#{$lwdth} {
		&.flat > .wc-field > :first-child {
			width: $lw;
		}

		&.stacked > .wc-field > .wc-input {
			margin-left: $lw;
		}

		> .wc-field > .wc-input {
			max-width: $iw;
			width: $iw;
		}
	}

	.#{$wc-input-width-slug}_#{$lwdth} > .wc-input {
		width: $lw;
	}
}
