.vfbp-form {
	&,
	* {
		@include normalize();
	}

	&,
	*,
	*:before,
	*:after {
		@include box-sizing(border-box);
	}

	// Normalize non-controls
	//
	// Restyle and baseline non-control form elements.

	fieldset {
		padding: 0;
		margin: 0;
		border: 0;
		// Chrome and Firefox set a `min-width: min-content;` on fieldsets,
		// so we reset that to ensure it behaves more like a standard block element.
		// See https://github.com/twbs/bootstrap/issues/12359.
		min-width: 0;
	}

	legend {
		display: block;
		width: 100%;
		padding: 0;
		margin-bottom: 20px;
		font-size: 14px;
		line-height: inherit;
		color: $legend-color;
		border: 0;
		border-bottom: 1px solid $legend-border-color;
	}

	label {
		display: inline-block;
		max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141)
		margin-bottom: 5px;
		font-weight: bold;
		font-size: 14px;
	}

	// Normalize form controls
	//
	// While most of our form styles require extra classes, some basic normalization
	// is required to ensure optimum display with or without those classes to better
	// address browser inconsistencies.

	// Position radios and checkboxes better
	input[type="radio"],
	input[type="checkbox"] {
		margin: 4px 0 0;
		margin-top: 1px \9; // IE8-9
		line-height: normal;
	}

	// Set the height of file controls to match text inputs
	input[type="file"] {
		display: block;
	}

	// Make range inputs behave like textual form controls
	input[type="range"] {
		display: block;
		width: 100%;
	}

	// Make multiple select elements height not fixed
	select[multiple],
	select[size] {
		height: auto;
	}

	// Focus for file, radio, and checkbox
	input[type="file"]:focus,
	input[type="radio"]:focus,
	input[type="checkbox"]:focus {
		@include tab-focus();
	}

	.vfb-form-control {
		display: block;
		width: 100%;
		height: 34px;
		padding: 6px 12px;
		font-size: 14px;
		line-height: 1.42857143;
		color: $input-color;
		background-color: $input-bg;
		background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
		border: 1px solid $input-border;
		border-radius: $input-border-radius;
		@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
		@include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);

		// Customize the `:focus` state to imitate native WebKit styles.
		@include form-control-focus();

		// Placeholder
		@include placeholder();

		// Disabled and read-only inputs
		//
		// HTML5 says that controls under a fieldset > legend:first-child won't be
		// disabled if the fieldset is disabled. Due to implementation difficulty, we
		// don't honor that edge case; we style them as disabled anyway.
		&[disabled],
		&[readonly],
		fieldset[disabled] & {
			cursor: not-allowed;
			background-color: $input-bg-disabled;
			opacity: 1; // iOS fix for unreadable disabled content
		}
	}

	// Reset height for `textarea`s
	textarea.vfb-form-control {
		height: auto;
		resize: vertical;
	}

	// Form groups
	//
	// Designed to help with the organization and spacing of vertical forms. For
	// horizontal forms, use the predefined grid classes.

	.vfb-form-group {
		margin-bottom: 15px;
	}

	// Checkboxes and radios
	//
	// Indent the labels to position radios/checkboxes as hanging controls.

	.vfb-radio,
	.vfb-checkbox {
		position: relative;
		display: block;
		margin-top: 10px;
		margin-bottom: 10px;

		label {
			min-height: 1.42857143; // Ensure the input doesn't jump when there is no text
			padding-left: 20px;
			margin-bottom: 0;
			font-weight: normal;
			cursor: pointer;
		}
	}

	.vfb-radio input[type="radio"],
	.vfb-radio-inline input[type="radio"],
	.vfb-checkbox input[type="checkbox"],
	.vfb-checkbox-inline input[type="checkbox"] {
		position: absolute;
		margin-left: -20px;
		margin-top: 4px \9;
	}

	.vfb-radio + .vfbp-form .vfb-radio,
	.vfb-checkbox + .vfbp-form .vfb-checkbox {
		margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
	}

	.vfb-inline-group {
		&:after {
			content: '';
			display: table;
			clear: both;
		}

		.vfb-radio,
		.vfb-checkbox {
			float: left;
			margin-right: 30px;
		}

		.vfb-radio:last-child,
		.vfb-checkbox:last-child {
			margin-bottom: 4px;
		}
	}

	// Radios and checkboxes on same line
	.vfb-radio-inline,
	.vfb-checkbox-inline {
		display: inline-block;
		padding-left: 20px;
		margin-bottom: 0;
		vertical-align: middle;
		font-weight: normal;
		cursor: pointer;
	}

	.vfb-radio-inline + .vfb-radio-inline,
	.vfb-checkbox-inline + .vfb-checkbox-inline {
		margin-top: 0;
		margin-left: 10px; // space out consecutive inline controls
	}

	// Feedback states
	.vfb-has-success {
		@include form-control-validation($state-success-text, $state-success-text, $state-success-bg);
	}

	.vfb-has-warning {
		@include form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg);
	}

	.vfb-has-error {
		@include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);
	}


	// Help text
	//
	// Apply to any element you wish to create light text for placement immediately
	// below a form control. Use for general help, formatting, or instructional text.

	.vfb-help-block {
		display: block; // account for any element using help-block
		margin-top: 5px;
		margin-bottom: 10px;
		color: $color-gray-light;
		font-size: 14px;
	}

	// Horizontal forms
	//
	// Horizontal forms are built on grid classes and allow you to create forms with
	// labels on the left and inputs on the right.

	&.vfbp-form-horizontal {

		// Consistent vertical alignment of radios and checkboxes
		//
		// Labels also get some reset styles, but that is scoped to a media query below.
		.vfb-radio,
		.vfb-checkbox,
		.vfb-radio-inline,
		.vfb-checkbox-inline {
			margin-top: 0;
			margin-bottom: 0;
			padding-top: 7px; // Default padding plus a border
		}

		// Account for padding we're adding to ensure the alignment and of help text
		// and other content below items
		.vfb-radio,
		.vfb-checkbox {
			min-height: 27px;
		}

		// Make form groups behave like rows
		.vfb-form-group {
			@include make-row();
		}

		// Reset spacing and right align labels, but scope to media queries so that
		// labels on narrow viewports stack the same as a default form example.
		@media (min-width: 768px) {
			.vfb-control-label {
				text-align: right;
				margin-bottom: 0;
				padding-top: 7px; // Default padding plus a border
			}
		}
	}

	.vfb-required-asterisk {
		color: $state-danger-text;
	}

	.wp-editor-container {
		border: 1px solid $legend-border-color;
	}

	label.vfb-address-label,
	label.vfb-name-label {
		font-weight: normal;
		font-size: 13px;
	}

	.vfb-name-block {
		.vfb-form-group {
			margin-bottom: 0;
		}

		&.vfb-col-10 {
			.vfb-form-group:first-child div[class*='vfb-col-'] {
				padding-left: 15px;
			}
		}

		.vfb-form-group:first-child div[class*='vfb-col-'] {
			padding-left: 0;
		}

		.vfb-form-group:last-child div[class*='vfb-col-'] {
			padding-right: 0;
		}
	}

	.vfb-rule-hide {
		display: none !important;

		input,
		textarea,
		select {
			display: none;
		}
	}
}