// =================================================================
// Forms Settings
// =================================================================

// Change the font family on forms
//
// Controls the font family used in forms.
// Note: this style may not apply to Gravity Forms
// due to overly specific plugin CSS.
//
// Styleguide Configuration.Forms.Form Font
//
// Access: Public
//
// Since: 1.0.0

// Change the font family on forms
//
// Controls the font family used in forms.
// Note: this style may not apply to Gravity Forms
// due to overly specific plugin CSS.
//
// Styleguide Forms.General Settings.$font-family-form
//
// Access: Public
//
// Since: 1.0.0

$font-family-form:                          $font-family-sans-serif !default;

// Legend Border
//
// Controls the border on the legend in forms.
// Note: this style may not apply to Gravity Forms
// due to overly specific plugin CSS.
//
// Styleguide Configuration.Forms.Legend Border
//
// Access: Public
//
// Since: 1.0.0

// Change the border on form legends
//
// Controls the border on the legend in forms.
// Note: this style may not apply to Gravity Forms
// due to overly specific plugin CSS.
//
// Styleguide Forms.Legends.$form-legend-border
//
// Access: Public
//
// Since: 1.0.0

$form-legend-border:                        $border !default;

// Legend Margin
//
// Controls the margin on the legend in forms.
// Note: this style may not apply to Gravity Forms
// due to overly specific plugin CSS.
//
// Styleguide Configuration.Forms.Legend Margin
//
// Access: Public
//
// Since: 1.0.0

// Change the margin on form legends
//
// Controls the margin on the legend in forms.
// Note: this style may not apply to Gravity Forms
// due to overly specific plugin CSS.
//
// Styleguide Forms.Legends.$form-legend-margin
//
// Access: Public
//
// Since: 1.0.0

$form-legend-margin:                       0 0 $margin !default;

// Legend Padding
//
// Controls the padding on the legend in forms.
// Note: this style may not apply to Gravity Forms
// due to overly specific plugin CSS.
//
// Styleguide Configuration.Forms.Legend Padding
//
// Access: Public
//
// Since: 1.0.0

// Change the padding on form legends
//
// Controls the padding on the legend in forms.
// Note: this style may not apply to Gravity Forms
// due to overly specific plugin CSS.
//
// Styleguide Forms.Legends.$form-legend-padding
//
// Access: Public
//
// Since: 1.0.0

$form-legend-padding:                      0 0 0.5em !default;

// Fieldset Border
//
// Controls the border on fieldsets in forms.
// Note: this style may not apply to Gravity Forms
// due to overly specific plugin CSS.
//
// Styleguide Configuration.Forms.Fieldset Border
//
// Access: Public
//
// Since: 1.0.0

// Change the border on form fieldsets
//
// Controls the border on fieldsets in forms.
// Note: this style may not apply to Gravity Forms
// due to overly specific plugin CSS.
//
// Styleguide Forms.Fieldsets.$form-fieldset-border
//
// Access: Public
//
// Since: 1.0.0

$form-fieldset-border:                     0 !default;

// Fieldset Margin
//
// Controls the margin on fieldsets in forms.
// Note: this style may not apply to Gravity Forms
// due to overly specific plugin CSS.
//
// Styleguide Configuration.Forms.Fieldset Margin
//
// Access: Public
//
// Since: 1.0.0

// Change the margin on form fieldsets
//
// Controls the margin on fieldsets in forms.
// Note: this style may not apply to Gravity Forms
// due to overly specific plugin CSS.
//
// Styleguide Forms.Fieldsets.$form-fieldset-margin
//
// Access: Public
//
// Since: 1.0.0

$form-fieldset-margin:                     $margin 0 !default;

// Fieldset Padding
//
// Controls the padding on fieldsets in forms.
// Note: this style may not apply to Gravity Forms
// due to overly specific plugin CSS.
//
// Styleguide Configuration.Forms.Fieldset Padding
//
// Access: Public
//
// Since: 1.0.0

// Change the padding on form fieldsets
//
// Controls the padding on fieldsets in forms.
// Note: this style may not apply to Gravity Forms
// due to overly specific plugin CSS.
//
// Styleguide Forms.Fieldsets.$form-fieldset-padding
//
// Access: Public
//
// Since: 1.0.0

$form-fieldset-padding:                    0 !default;

// Label Margin
//
// Controls the margin on labels in forms.
// Note: this style may not apply to Gravity Forms
// due to overly specific plugin CSS.
//
// Styleguide Configuration.Forms.Label Margin
//
// Access: Public
//
// Since: 1.0.0

// Change the margin on form labels
//
// Controls the margin on labels in forms.
// Note: this style may not apply to Gravity Forms
// due to overly specific plugin CSS.
//
// Styleguide Forms.General Settings.$form-label-margin
//
// Access: Public
//
// Since: 1.0.0

$form-label-margin:                        0.5em !default;

// Row Margin
//
// Controls the margin on rows in forms.
// Note: this style may not apply to Gravity Forms
// due to overly specific plugin CSS.
//
// Styleguide Configuration.Forms.Row Margin
//
// Access: Public
//
// Since: 1.0.0

// Change the margin on form rows
//
// Controls the margin on rows in forms.
// Note: this style may not apply to Gravity Forms
// due to overly specific plugin CSS.
//
// Styleguide Forms.General Settings.$form-row-margin
//
// Access: Public
//
// Since: 1.0.0

$form-row-margin:                          0 0 $margin-small !default;

// Input Margin
//
// Controls the margin on inputs in forms.
// Note: this style may not apply to Gravity Forms
// due to overly specific plugin CSS.
//
// Styleguide Configuration.Forms.Input Margin
//
// Access: Public
//
// Since: 1.0.0

// Change the margin on form inputs
//
// Controls the margin on inputs in forms.
// Note: this style may not apply to Gravity Forms
// due to overly specific plugin CSS.
//
// Styleguide Forms.Inputs.$form-input-margin
//
// Access: Public
//
// Since: 1.0.0

$form-input-margin:                        0 0 $margin-small !default;

// Input Padding
//
// Controls the padding on inputs in forms.
// Note: this style may not apply to Gravity Forms
// due to overly specific plugin CSS.
//
// Styleguide Configuration.Forms.Input Padding
//
// Access: Public
//
// Since: 1.0.0

// Change the padding on form inputs
//
// Controls the padding on inputs in forms.
// Note: this style may not apply to Gravity Forms
// due to overly specific plugin CSS.
//
// Styleguide Forms.Inputs.$form-input-padding
//
// Access: Public
//
// Since: 1.0.0

$form-input-padding:                       0.5em !default;

// Input Border
//
// Controls the border on inputs in forms.
// Note: this style may not apply to Gravity Forms
// due to overly specific plugin CSS.
//
// Styleguide Configuration.Forms.Input Border
//
// Access: Public
//
// Since: 1.0.0

// Change the border on form inputs
//
// Controls the border on inputs in forms.
// Note: this style may not apply to Gravity Forms
// due to overly specific plugin CSS.
//
// Styleguide Forms.Inputs.$form-input-border
//
// Access: Public
//
// Since: 1.0.0

$form-input-border:                        $border !default;

// Input Shadow
//
// Controls the inner shadow on inputs in forms.
// Note: this style may not apply to Gravity Forms
// due to overly specific plugin CSS.
//
// Styleguide Configuration.Forms.Input Shadow
//
// Access: Public
//
// Since: 1.0.0

// Change the shadow on form inputs
//
// Controls the inner shadow on inputs in forms.
// Note: this style may not apply to Gravity Forms
// due to overly specific plugin CSS.
//
// Styleguide Forms.Inputs.$form-input-shadow
//
// Access: Public
//
// Since: 1.0.0

$form-input-shadow:                        inset 0 1px 3px $color-grayscale-e !default;

// Input Border Radius
//
// Controls the border radius on inputs in forms.
// Note: this style may not apply to Gravity Forms
// due to overly specific plugin CSS.
//
// Styleguide Configuration.Forms.Input Border Radius
//
// Access: Public
//
// Since: 1.0.0

// Change the border radius on form inputs
//
// Controls the border radius on inputs in forms.
// Note: this style may not apply to Gravity Forms
// due to overly specific plugin CSS.
//
// Styleguide Forms.Inputs.$form-input-border-radius
//
// Access: Public
//
// Since: 1.0.0

$form-input-border-radius:                 0 !default;

// Input Focus Shadow
//
// Controls the shadow on focused inputs.
// This is important for accessibility. Always
// test with a keyboard if you change this style
// to ensure it is still clear which item is keyboard
// focused afterwards.
//
// Styleguide Configuration.Forms.Input Focus Shadow
//
// Access: Public
//
// Since: 1.0.0

// Change the focus shadow on form inputs
//
// Controls the shadow on focused inputs.
// This is important for accessibility. Always
// test with a keyboard if you change this style
// to ensure it is still clear which item is keyboard
// focused afterwards.
//
// Styleguide Forms.Inputs.$form-input-focus-shadow
//
// Access: Public
//
// Since: 1.0.0

$form-input-focus-shadow:                  0 0 4px 0 rgba( 18, 159, 234, 0.2 ) !default;

// Input Focus Border Color
//
// Controls the border color on focused inputs.
// This is important for accessibility. Always
// test with a keyboard if you change this style
// to ensure it is still clear which item is keyboard
// focused afterwards.
//
// Note: this style may not apply to Gravity Forms
// due to overly specific plugin CSS.
//
// Styleguide Configuration.Forms.Input Focus Border Color
//
// Access: Public
//
// Since: 1.0.0

// Change the focus border on form inputs
//
// Controls the border color on focused inputs.
// This is important for accessibility. Always
// test with a keyboard if you change this style
// to ensure it is still clear which item is keyboard
// focused afterwards.
//
// Note: this style may not apply to Gravity Forms
// due to overly specific plugin CSS.
//
// Styleguide Forms.Inputs.$color-input-focus-border
//
// Access: Public
//
// Since: 1.0.0

$color-input-focus-border:                 #129fea !default;

// Button Font Family
//
// Controls the font used on all buttons and
// things that looks like buttons across the site.
//
// Styleguide Configuration.Buttons.Button Font Family
//
// Access: Public
//
// Since: 1.0.0

// Change the font family of buttons
//
// Controls the font used on all buttons and
// things that looks like buttons across the site.
//
// Styleguide Forms.Buttons.$font-family-button
//
// Access: Public
//
// Since: 1.0.0

$font-family-button:                       $font-family-sans-serif !default;

// Button Font Size
//
// Controls the font size used on all buttons and
// things that looks like buttons across the site.
//
// Styleguide Configuration.Buttons.Button Font Size
//
// Access: Public
//
// Since: 1.0.0

// Change the font size of buttons
//
// Controls the font size used on all buttons and
// things that looks like buttons across the site.
//
// Styleguide Forms.Buttons.$font-size-button
//
// Access: Public
//
// Since: 1.0.0

$font-size-button:                         inherit !default;

// Button Background Color
//
// Controls the background color used on all buttons and
// things that looks like buttons across the site.
//
// Styleguide Configuration.Buttons.Button Background Color
//
// Accessibility: AA
//
// Access: Public
//
// Since: 1.0.0

// Change the background color of buttons
//
// Controls the background color used on all buttons and
// things that looks like buttons across the site.
//
// Styleguide Forms.Buttons.$color-button-bg
//
// Accessibility: AA
//
// Access: Public
//
// Since: 1.0.0

$color-button-bg:                          $color-grayscale-e !default;

// Button Text Color
//
// Controls the text color used on default buttons and
// things that looks like buttons across the site.
//
// Styleguide Configuration.Buttons.Button Text Color
//
// Accessibility: AA
//
// Access: Public
//
// Since: 1.0.0

// Change the text color of buttons
//
// Controls the text color used on default buttons and
// things that looks like buttons across the site.
//
// Styleguide Forms.Buttons.$color-button-text
//
// Accessibility: AA
//
// Access: Public
//
// Since: 1.0.0

$color-button-text:                        $color-grayscale-4 !default;

// Primary Button Background Color
//
// Controls the background color used on all primary buttons and
// things that looks like primary buttons across the site.
//
// Styleguide Configuration.Buttons.Primary Button Background Color
//
// Accessibility: AA
//
// Access: Public
//
// Since: 1.0.0

// Change the background color of primary buttons
//
// Controls the background color used on all primary buttons and
// things that looks like buttons across the site.
//
// Styleguide Forms.Buttons.$color-button-primary-bg
//
// Accessibility: AA
//
// Access: Public
//
// Since: 1.0.0

$color-button-primary-bg:                  #0074E0 !default;

// Primary Button Text Color
//
// Controls the text color used on primary buttons and
// things that looks like buttons across the site.
//
// Styleguide Configuration.Buttons.Primary Button Text Color
//
// Accessibility: AA
//
// Access: Public
//
// Since: 1.0.0

// Change the text color of buttons
//
// Controls the text color used on primary buttons and
// things that looks like buttons across the site.
//
// Styleguide Forms.Buttons.$color-button-primary-text
//
// Accessibility: AA
//
// Access: Public
//
// Since: 1.0.0

$color-button-primary-text:                $color-grayscale-f !default;

// Button Margin
//
// Controls the margin used on all buttons and
// things that looks like buttons across the site.
//
// Styleguide Configuration.Buttons.Button Margin
//
// Access: Public
//
// Since: 1.0.0

// Change the margin of buttons
//
// Controls the margin used on all buttons and
// things that looks like buttons across the site.
//
// Styleguide Forms.Buttons.$margin-button
//
// Access: Public
//
// Since: 1.0.0

$margin-button:                            0 $margin-small $margin-small 0 !default;

// Button Padding
//
// Controls the padding used on all buttons and
// things that looks like buttons across the site.
//
// Styleguide Configuration.Buttons.Button Padding
//
// Access: Public
//
// Since: 1.0.0

// Change the padding of buttons
//
// Controls the padding used on all buttons and
// things that looks like buttons across the site.
//
// Styleguide Forms.Buttons.$padding-button
//
// Access: Public
//
// Since: 1.0.0

$padding-button:                           0.5em 1em !default;

// Button Border
//
// Controls the border used on all buttons and
// things that looks like buttons across the site.
//
// Styleguide Configuration.Buttons.Button Border
//
// Access: Public
//
// Since: 1.0.0

// Change the border of buttons
//
// Controls the border used on all buttons and
// things that looks like buttons across the site.
//
// Styleguide Forms.Buttons.$border-button
//
// Access: Public
//
// Since: 1.0.0

$border-button:                            0;

// Button Border Radius
//
// Controls the border radius used on all buttons and
// things that looks like buttons across the site.
//
// Styleguide Configuration.Buttons.Button Border Radius
//
// Access: Public
//
// Since: 1.0.0

// Change the border radius of buttons
//
// Controls the border radius used on all buttons and
// things that looks like buttons across the site.
//
// Styleguide Forms.Buttons.$border-radius-button
//
// Access: Public
//
// Since: 1.0.0

$border-radius-button:                     2px !default;

// =================================================================
// Forms Styles
// =================================================================

// Placeholders for Forms
// -----------------------------------------------------------------

// Make an element look like a button
//
// This placeholder class controls button styles globally.
// Extend this class for custom buttons or for elements whose HTML
// and CSS you don't have control over.
//
// May be used on both form element tags and regular links to make
// them look like buttons.
//
// #### Examples
//
// ##### Make a custom toggle look like a button.
// 			.custom-toggle {
//				@extend %button-styles;
//			}
//
// Styleguide Forms.Buttons.%button-styles
//
// Author: Ashley Kolodziej
//
// Access: Public
//
// Since: 1.2.0

%button-styles {
	background: var(--bu-button-background-color, #{$color-button-bg});
	border: var(--bu-button-border, #{$border-button});
	border-radius: var(--bu-button-border-radius, #{$border-radius-button});
	color: var(--bu-button-text-color, #{$color-button-text});
	display: inline-block;
	font-family: var(--bu-button-font-family, #{$font-family-button});
	font-size: var(--bu-button-font-size, #{$font-size-button});
	font-weight: var(--bu-button-font-weight, 700);
	line-height: normal;
	margin: var(--bu-button-margin, #{$margin-button});
	padding: var(--bu-button-padding, #{$padding-button});
	text-align: center;
	text-decoration: none;
	vertical-align: baseline;

	&:hover,
	&:focus {
		background: var(--bu-button-background-color--hover, #{darken($color-button-bg, 10%)});
		color: var(--bu-button-text-color--hover);
	}

	&:visited {
		color: var(--bu-button-text-color, #{$color-button-text});
	}

	&:active {
		box-shadow:
			0 0 0 1px rgba( $color-grayscale-0, 0.15 ) inset,
			0 0 6px rgba( $color-grayscale-0, 0.20 ) inset;
	}
}

// Input styles
//
// Controls button styles for input tags globally.
// Only to be used with form element tags.
//
// Styleguide Forms.Buttons.%button-styles
//
// Author: Ashley Kolodziej
//
// Access: Public
//
// Since: 1.2.0

%button-styles-input {
	cursor: pointer;
	user-select: none;
	-ms-user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	white-space: nowrap;
	zoom: 1;

	&[disabled],
	&-disabled,
	&-disabled:hover,
	&-disabled:active {
		box-shadow: none;
		background: var(--button-disabled-background, #{$color-grayscale-d});
		color: var(--button-disabled-text-color, #{$color-grayscale-7});
		cursor: not-allowed;
	}

	&-hidden {
		display: none;
	}
}

// Make an element look like a primary button
//
// Styles buttons in a "primary" way so as to look more important
// when there are multiple buttons near each other.
//
// Extend this class for custom buttons or for elements whose HTML
// and CSS you don't have control over.
//
// May be used on both form element tags and regular links to make
// them look like buttons.
//
// #### Examples
//
// ##### Make a custom toggle look like a primary button.
// 			.custom-toggle {
//				@extend %button-styles;
//			}
//
// Styleguide Forms.Buttons.%button-styles-primary
//
// Author: Ashley Kolodziej
//
// Access: Public
//
// Since: 1.2.0

%button-styles-primary {
	background: var(--bu-button-primary-background-color, #{$color-button-primary-bg});
	color: var(--bu-button-primary-text-color, #{$color-button-primary-text});

	&:hover,
	&:focus {
		background: var(--bu-button-primary-background-color--hover, #{darken($color-button-primary-bg, 10%)});
		color: var(--bu-button-primary-text-color--hover, #{$color-button-primary-text});
	}

	&:visited {
		color: var(--bu-button-primary-text-color, #{$color-button-primary-text});
	}
}

// Forms
// -----------------------------------------------------------------

// The general styles for forms.
//
// Access: Public
// Since: 1.0.0

form {
	@extend %font-size-secondary;
	font-family: var(--form-font-family, var(--bu-text-font, #{$font-family-form}));
}

// The general styles for the fieldset element.
// Wraps around sets of controls within a form.
// See [MDN on fieldset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset).
//
// Access: Public
// Since: 1.0.0

fieldset {
	border: 0;
	margin: $form-fieldset-margin;
	padding: $form-fieldset-padding;
}

// The general styles for the legend element, which holds a caption for the
// fieldset element.
// See [MDN on legend](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend).
//
// Access: Public
// Since: 1.0.0

legend {
	border-bottom: $form-legend-border;
	display: block;
	font-size: 1.5em;
	font-weight: 700;
	margin: $form-legend-margin;
	padding: $form-legend-padding;
	width: 100%;
}

select,
textarea {
	font-family: inherit; // Address `font-family` inconsistency between `textarea` and other form elements.
}

// The general styles for labels on form fields.
// See [MDN on label](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label).
//
// Access: Public
// Since: 1.0.0

label {
	display: block;
	font-weight: bold;
	margin-block: var(--form-label-margin, #{$form-label-margin});
}

// The general styles for inputs which should look like buttons.
//
// Access: Public
// Since: 1.0.0

button,
[type="button"],
[type="reset"],
[type="submit"] {
	@extend %button-styles;
	@extend %button-styles-input;
}

/*!
Pure v0.5.0
Copyright 2013 Yahoo!
Licensed under the BSD License.
https://github.com/yahoo/pure/blob/master/LICENSE.md
*/

// Forms: Style (adapted from Pure CSS v0.5.0)
// -----------------------------------------------------------------

// A helper for form input focus shadows.
//
// Access: Private
//
// Since: 1.0.0

%_form-input-focus-shadow {
	box-shadow: $form-input-focus-shadow;
}

// Styles user inputs in forms.
// From Pure v0.5.0.
//
// Access: Private
//
// Since: 1.0.0

[type="text"],
[type="password"],
[type="email"],
[type="url"],
[type="date"],
[type="month"],
[type="time"],
[type="datetime"],
[type="datetime-local"],
[type="week"],
[type="number"],
[type="search"],
[type="tel"],
[type="color"],
select,
textarea {
	border-radius: $form-input-border-radius;
	border: var(--form-border, var(--bu-border, #{$form-input-border}));
	box-shadow: $form-input-shadow;
	display: inline-block;
	line-height: 1;
	margin-block-end: var(--form-input-margin, #{$margin-small});
	padding: var(--form-input-padding, #{$form-input-padding});

	&:focus {
		@extend %_form-input-focus-shadow;
		border-color: var(--bu-focus-color, #{$color-input-focus-border});
		outline: 0;
		outline: thin dotted \9; // IE6-9
		outline: 1px auto var(--bu-focus-color, #{$color-input-focus-border});
	}
}

// Styles checkbox and radio inputs in forms.
// From Pure v0.5.0.
//
// Access: Private
//
// Since: 1.0.0

[type="file"],
[type="radio"],
[type="checkbox"] {
	&:focus {
		@extend %_form-input-focus-shadow;
		outline: thin dotted $color-grayscale-3;
		outline: 1px auto var(--bu-focus-color, #{$color-input-focus-border});
	}
}

// Styles checkboxes and radio buttons in forms.
// From Pure v0.5.0.
//
// Access: Private
//
// Since: 1.0.0

.checkbox,
.radio {
	margin: 0.5em 0;
}

// Styles elements with the "disabled" attribute.
// From Pure v0.5.0.
//
// Access: Private
//
// Since: 1.0.0

[disabled] {
	background: $color-grayscale-e;
	color: $color-grayscale-c;
	cursor: not-allowed;
}

// Styles elements with the "readonly" attribute.
// From Pure v0.5.0.
//
// Access: Private
//
// Since: 1.0.0

[readonly] {
	background: $color-grayscale-e;
	border-color: $color-grayscale-c;
	color: $color-grayscale-7;
}

// The color to use on borders and outlines in the invalid state.
// From Pure v0.5.0.
//
// Access: Private
//
// Since: 1.0.0

$_invalid-border-color: #e9322d;

// The color to use on text in the invalid state.
// From Pure v0.5.0.
//
// Access: Private
//
// Since: 1.0.0

$_invalid-text-color: #b94a48;

// Styles elements which accept text with an invalid state
// until the user types something valid.
// From Pure v0.5.0.
//
// Access: Private
//
// Since: 1.0.0

input,
textarea,
select {
	&:focus:invalid {
		border-color: $_invalid-border-color;
		color: $_invalid-text-color;
	}
}

// Styles elements which do not accept text with an invalid state
// as long as the element is invalid. Focus state is targeted for
// the benefit of keyboard users.
// From Pure v0.5.0.
//
// Access: Private
//
// Since: 1.0.0

[type="file"],
[type="radio"],
[type="checkbox"] {
	&:focus:invalid {
		outline-color: $_invalid-border-color;
	}
}

// Styles select and multi-select elements.
// From Pure v0.5.0.
//
// Access: Private
//
// Since: 1.0.0

select {
	background-color: $color-grayscale-f;
	border: var(--form-border, 1px solid #{$color-grayscale-c});

	&[multiple] {
		height: auto;
	}
}

// Row styles
//
// Styles form rows, if you are not using Gravity Forms.
// From Pure v0.5.0.
//
// Styleguide Forms.Utilities.Row styles
//
// Access: Public
//
// Since: 1.0.0

.form-row {
	margin: $form-row-margin;
}

// Styles form controls, if you are not using Gravity Forms.
// From Pure v0.5.0.
//
// Access: Public
//
// Since: 1.0.0

.form-controls {
	margin-block-start: $margin;
}

// Required Styles
//
// This class styles required items, if you are not using Gravity Forms.
// From Pure v0.5.0.
//
// Styleguide Forms.Utilities.Required
//
// Access: Public
//
// Since: 1.0.0

.required {
	color: #c00;
}

// Styles inputs and labels in the stacked and aligned layouts,
// if you are not using Gravity Forms.
// From Pure v0.5.0.
//
// Access: Public
//
// Since: 1.0.0

[type="text"],
[type="password"],
[type="email"],
[type="url"],
[type="date"],
[type="month"],
[type="time"],
[type="datetime"],
[type="datetime-local"],
[type="week"],
[type="number"],
[type="search"],
[type="tel"],
[type="color"],
select,
label,
textarea {
	.form-stacked &,
	.form-aligned & {
		// Aligned forms should stack on small screens
		display: block;
		margin: var(--form-input-margin, #{$form-input-margin});
	}
}

// Styles inputs and labels in the aligned layout at desktop sizes,
// if you are not using Gravity Forms.
// From Pure v0.5.0.
//
// Access: Public
//
// Since: 1.0.0

@include breakpoint( $md ) {
	.form-aligned {
		input,
		textarea,
		select {
			display: inline-block;
			*display: inline;
			vertical-align: middle;
			*zoom: 1;
		}

		textarea {
			vertical-align: top;
		}

		label {
			display: inline-block;
			margin: 0 20px 0 0;
			text-align: right;
			vertical-align: middle;
			width: 200px;
		}

		.form-row-checkbox,
		.form-row-radio {
			margin: var(--form-row-margin, #{$form-row-margin});
			margin-left: 220px;
		}

		.form-controls {
			margin-left: 220px;
		}
	}
}

// Gravity Forms
// -----------------------------------------------------------------

// Styles Gravity Forms.
//
// Access: Public
// Since: 1.0.0

.gform_wrapper {
	li {
		list-style: none;

		&::before {
			content: "";
			font-size: 0;
		}
	}

	table {
		table-layout: initial;
	}

	[type="radio"] {
		margin-left: 1px;
	}
}

// Buttons
// -----------------------------------------------------------------

// Button Class
//
// The basic style for a button. Preferred over the extend if
// you have control over HTML and do not need any styles for your
// button in particular.
//
// Styleguide Forms.Utilities.Button Class
//
// Access: Public
//
// Since: 1.0.0

.button {
	@extend %button-styles;
}

// Button Primary Class
//
// The basic style for a primary and selected button. Preferred over the extend if
// you have control over HTML and do not need any styles for your
// button in particular.
//
// Styleguide Forms.Utilities.Button Primary Class
//
// Access: Public
//
// Since: 1.0.0

.button-primary,
.button-selected {
	@extend %button-styles;
	@extend %button-styles-primary;
}