// input fields
// ------------------------------------------------------------
%input_fields {
	border: 1px solid $form_field_border;
	background: $form_field_background_color;
	@include medium();
	height: #{32 / $em}em;
	@include grid(12,12,$grid_uom:combo, $grid_padding_l:6, $grid_padding_r:6);
	@include placeholder ($delta_gray);

	@include field_focus;
	color: $form_field_text;
	+ .horizontal_selectors {
		margin-top: -0.5em;
	}
}

// disabled input fields
// ------------------------------------------------------------
%disabled_inputs {
	background-color: $input_disabled_bkg;
	border-color: $input_disabled_border;
	color: $input_disabled_text;
	&:hover {
		border-color: $input_disabled_border;
	}
}

// form labels 
// ------------------------------------------------------------
%form_labels {
	display: block;
	font-weight: bold;
	line-height: #{20 / $em}em;
	span {
		padding-left: .25em;
		font-weight: normal;
	}
	fieldset & {
		@include grid(12,12, $grid_uom:percent);
	}
}

// default error
// ------------------------------------------------------------
%fail {
	border-color: $form_field_border_fail !important;
	color: $form_field_text_fail !important;
	input & {
		background: $form_field_fail_bkg;
	}
	&:focus {
		background: $form_field_fail_bkg !important;
	}
	select, input[type="text"], input[type="date"] {
		background: $form_field_fail_bkg;
		border-color: $form_field_border_fail;
		color: $form_field_text_fail;
		@include placeholder($form_field_text_fail);
		&:focus {
			background: $form_field_fail_bkg;
		}
	}
	&:after {
		background: $form_field_fail_bkg;
		border-color: $form_field_border_fail;
	}
}

// notification alerts / panels 
// ------------------------------------------------------------
%default_alert_panel {
	@include alert_boxes ($alert_background_color, 10, 14, 10);
}

%notification_panel {
	@extend %default_alert_panel;
}

%alert_panel {
	@extend %default_alert_panel;
	background: $alpha_color;
	color: $white;
	font-weight: bold;
}

// form text 
// ------------------------------------------------------------
%instructional {
	color: $instructional_text;
}

%note {
	@extend %instructional;
	@include small;
	margin-top: #{5 / $em}em;
}

%informational {
	@extend %instructional;
	line-height: 1.3em;
	margin-bottom: 1em;
}