/*******************************
             Form
*******************************/

/*-------------------
       Elements
--------------------*/

/* Form */
@formGutterWidth: 1em;
@formRowDistance: 1em;

/* Text */
@formParagraphMargin: @formRowDistance 0em;

/* Field */
@formFieldMargin: 0em 0em @formRowDistance;

/* Fields */
@formFieldsMargin: 0em -(@formGutterWidth / 2) @formRowDistance;

/* Form Label */
@formLabelDistance: @4px;
@formLabelMargin: 0em 0em @formLabelDistance 0em;
@formLabelFontSize: @relativeSmall;
@formLabelFontWeight: @bold;
@formLabelTextTransform: none;
@formLabelColor: @textColor;

/* Input */
@formInputFont: @pageFont;
@formInputWidth: 100%;
@formInputFontSize: 1em;
@formInputPadding: (@inputVerticalPadding + ((1em - @inputLineHeight) / 2)) @inputHorizontalPadding;
@formInputBorder: 1px solid @borderColor;
@formInputBorderRadius: @absoluteBorderRadius;
@formInputColor: @textColor;
@inputTransition:
  color @defaultDuration @defaultEasing,
  border-color @defaultDuration @defaultEasing
;
@formInputBoxShadow: 0em 0em 0em 0em transparent inset;

/* Select */
@formSelectBackground: @white;
@formSelectBorderRadius: @formInputBorderRadius;
@formSelectBorder: @formInputBorder;
@formSelectPadding: 0.62em @inputHorizontalPadding;
@formSelectBoxShadow: @formInputBoxShadow;
@formSelectTransition: @inputTransition;
@formSelectColor: @formInputColor;

/* Text Area */
@formTextAreaPadding: @inputVerticalPadding @inputHorizontalPadding;
@formTextAreaHeight: 12em;
@formTextAreaResize: vertical;
@formTextAreaLineHeight: 1.2857;
@formTextAreaMinHeight: 8em;
@formTextAreaMaxHeight: 24em;
@formTextAreaBackground: @inputBackground;
@formTextAreaBorder: @formInputBorder;
@formTextAreaFontSize: @formInputFontSize;
@formTextAreaTransition: @inputTransition;

/* Checkbox */
@formCheckboxVerticalAlign: top;
@formCheckboxLabelFontSize: 1em;
@formCheckboxLabelTextTransform: @formLabelTextTransform;

/* Inline Validation Prompt */
@formPromptBackground: @white;
@formPromptBorderColor: @formFormErrorBorder;
@formPromptBorder: 1px solid @formPromptBorderColor;
@formPromptTextColor: @formFormErrorColor;
@formInlinePromptMargin: -0.25em 0em -0.5em 0.5em;
@formInlinePromptBorderWidth: 1px;

/*-------------------
        States
--------------------*/

/* Focus */
@formInputFocusPointerSize: 0px;

/* Input Focus */
@formInputFocusBackground: @inputBackground;
@formInputFocusBorderColor: @focusedFormBorderColor;
@formInputFocusColor: @selectedTextColor;
@formInputFocusBoxShadow: @formInputFocusPointerSize 0em 0em 0em @selectedBorderColor inset;
@formInputFocusBorderRadius: @formInputBorderRadius;

/* Text Area Focus */
@formTextAreaFocusBackground: @formInputFocusBackground;
@formTextAreaFocusBorderColor: @formInputFocusBorderColor;
@formTextAreaFocusColor: @formInputFocusColor;
@formTextAreaFocusBoxShadow: @formInputFocusBoxShadow;
@formTextAreaFocusBorderRadius: @formInputFocusBorderRadius;

/* Disabled */
@formDisabledLabelOpacity: @disabledOpacity;

/* Errored Input */
@formFormErrorColor: @negativeTextColor;
@formFormErrorBorder: @negativeBorderColor;
@formFormErrorBackground: @negativeBackgroundColor;

/* AutoFill */
@formInputAutoFillBackground: #FFFFF0;
@formInputAutoFillBorder: #E5DFA1;
@formInputAutoFillFocusBackground: @formInputAutoFillBackground;
@formInputAutoFillFocusBorder: #D5C315;
@formInputAutoFillErrorBackground: #FFFAF0;
@formInputAutoFillErrorBorder: #E0B4B4;


/* Input Error */
@formInputErrorBorderRadius: '';
@formInputErrorBoxShadow: none;

/* Dropdown Error */
@formDropdownErrorHoverBackground: #FBE7E7;
@formDropdownErrorSelectedBackground: @formDropdownErrorHoverBackground;
@formDropdownErrorActiveBackground: #FDCFCF;
@formDropdownErrorLabelBackground: #EACBCB;
@formDropdownErrorLabelColor: @errorTextColor;

/* Focused Error */
@formInputErrorFocusBackground: @negativeBackgroundColor;
@formInputErrorFocusColor: @negativeTextColor;
@formInputErrorFocusBorder: @negativeBorderColor;
@formInputErrorFocusBoxShadow: none;

/* Placeholder Error */
@formInputErrorPlaceholderColor: lighten(@formFormErrorColor, 40);
@formInputErrorPlaceholderFocusColor: lighten(@formFormErrorColor, 30);

/* Loading Dimmer */
@formLoaderDimmerColor: rgba(255, 255, 255, 0.8);
@formLoaderDimmerZIndex: 100;

/* Loading Spinner */
@formLoaderSize: 3em;
@formLoaderLineZIndex: 101;

/*-------------------
        Types
--------------------*/

/* Required */
@formRequiredContent: '*';
@formRequiredColor: @negativeColor;
@formRequiredVerticalOffset: -0.2em;
@formRequiredDistance: 0.2em;
@formRequiredMargin: @formRequiredVerticalOffset 0em 0em @formRequiredDistance;

/* Inverted */
@formInvertedInputBackground: @inputBackground;
@formInvertedInputBorderColor: @whiteBorderColor;
@formInvertedInputBoxShadow: @formInputBoxShadow;
@formInvertedInputColor: @formInputColor;
@formInvertedLabelColor: @invertedTextColor;
@formInvertedInputBoxShadow: none;

/*-------------------
      Variations
--------------------*/

/* Grouped Fields */
@formGroupedMargin: @formFieldMargin;
@formGroupedFieldMargin: 0.5em 0em;

@formGroupedLabelDistance: @formLabelDistance;
@formGroupedLabelColor: @formLabelColor;
@formGroupedLabelMargin: @formLabelMargin;
@formGroupedLabelFontSize: @formLabelFontSize;
@formGroupedLabelFontWeight: @formLabelFontWeight;
@formGroupedLabelTextTransform: @formLabelTextTransform;


/* Inline */
@formInlineInputSize: @relativeMedium;

@formInlineLabelDistance: @relativeTiny;
@formInlineLabelColor: @formLabelColor;
@formInlineLabelFontSize: @formLabelFontSize;
@formInlineLabelFontWeight: @formLabelFontWeight;
@formInlineLabelTextTransform: @formLabelTextTransform;

@formGroupedInlineLabelMargin: 0.035714em 1em 0em 0em;

/*-------------------
       Groups
--------------------*/

@formInlineFieldsMargin: 0em 1em 0em 0em;