// --- Variables for Forms ---

// form themes
@formThemeStandardBackgroundColor: @white;

// --- Standards
@formInputLabelPaddingBottom: 2px;
@formInputControlMarginBetweenControlAndLabel: 10px;
@formInputControlPaddingHorizontal: 12px;
@formInputControlPaddingVertical: 10px;
// Make the height explicit so we can calculate placements with it
// and so the label aligns itself vertically with the form input control.
@formInputControlLabelHeight: 20px;

// The focus element is the highlight that appears when navigating to a form
// input via keyboard.
// Setting a very small size here because the box-shadow we use for the
// background leaves a hole in the middle the size of its corresponding element.
@formInputControlFocusElementSize: 2px;
@formInputControlFocusIndicatorSize: 18px;

@formInputCheckboxSize: 14px;
@forminputCheckboxVerticalOffset: 2px;
@formInputCheckboxCheckmarkBorderWidth: 2px;
@formInputCheckboxCheckmarkHeight: 9px;
@formInputCheckboxCheckmarkWidth: 3px;
@formInputCheckboxCheckmarkVerticalOffset: 13px;
@formInputCheckboxCheckmarkHorizontalOffset: 18px;

@formInputRadioSize: 14px;
@formInputRadioVerticalOffset: 2px;
@formInputRadioDotSize: 8px;
@formInputRadioDotPlacementMarginHorizontal: -@formInputControlMarginBetweenControlAndLabel - @formInputRadioSize / 2 - @formInputRadioDotSize / 2 + @borderWidthStandard;
@formInputRadioDotPlacementMarginVertical: -@formInputControlLabelHeight / 2 - @formInputRadioSize / 2 + @borderWidthStandard + @formInputRadioVerticalOffset;

@formInputToggleSwitchHeight: 24px;
@formInputToggleSwitchWidth: 40px;
@formInputToggleSwitchBorderRadius: 12px;
@formInputToggleSwitchThumbSize: 22px;
@formInputToggleSwitchThumbMargin: 1px;
@formInputToggleSwitchFocusElementHeight: @formInputControlFocusElementSize;
@formInputToggleSwitchFocusElementWidth: @formInputToggleSwitchWidth / 2 - 2 * @formInputToggleSwitchThumbMargin;
@formInputToggleSwitchPlacementMarginVertical: @formInputToggleSwitchHeight / 2;
@formInputToggleSwitchVerticalOffset: -2px;

@formElementBorderColor: @color-border-input;
@formElementBorderColorFocusAndHover: @color-border-input-hover-and-focused;

@formElementHeight:  40px;

@horizontalDistanceBetweenFormElements: 12px;
@formElementInnerHorizontalMargin: 12px;
@formElementInnerVerticalMargin: 12px;
@formElementMarginBetweenIconAndText: 4px;
@formElementIconSize: 24px;
@formElementBorderThickness: 1px;
@formElementTextWithIconMargin: @formElementInnerHorizontalMargin + @formElementIconSize + @formElementMarginBetweenIconAndText;

@formLabelBottomMargin: 2px;
