// =============================================================================
// FORMS (Settings)
// =============================================================================


// Foundation Variables
// -----------------------------------------------------------------------------
//
// These variables come directly from:
// /vendor/foundation/foundation/components/*
// Declaring the variables here, you can adjust them all to your design,
// leaving the vendor framework untouched.
//
// -----------------------------------------------------------------------------

$include-html-form-classes:         $include-html-classes;

// We use this to set the base for lots of form spacing and positioning styles
$form-spacing:                      spacing("single");

// We use these to style the labels in different ways
$form-label-pointer:                pointer;
$form-label-font-size:              fontSize("base");
$form-label-font-weight:            null;
$form-label-line-height:            lineHeight("base");
$form-label-font-color:             stencilColor("form-label-font-color");
$form-label-small-transform:        uppercase;
$form-label-bottom-margin:          spacing("third");

$input-font-family:                 inherit;
$input-font-color:                  stencilColor("input-font-color");
$input-font-size:                   fontSize("base");
$input-bg-color:                    stencilColor("input-bg-color");
$input-focus-bg-color:              null;
$input-border-color:                stencilColor("input-border-color");
$input-focus-border-color:          stencilColor("input-border-color-active");
$input-border-style:                solid;
$input-border-width:                1px;
$input-border-radius:               $global-radius;
$input-disabled-bg:                 stencilColor("input-disabled-bg");
$input-disabled-cursor:             not-allowed;
$input-box-shadow:                  null;
$input-include-glowing-effect:      null;

// We use these to style the fieldset border and spacing.
$fieldset-border-style:             null;
$fieldset-border-width:             0;
$fieldset-border-color:             null;
$fieldset-padding:                  0;
$fieldset-margin:                   0;

// We use these to style the legends when you use them
$legend-bg:                         transparent;
$legend-font-weight:                null;
$legend-padding:                    0;

// Select variables
$select-bg-color:                   stencilColor("select-bg-color");
$select-hover-bg-color:             null;


// BigCommerce Variables
// -----------------------------------------------------------------------------
//
// These scoped variables are created by BigCommerce.
// All variables that are not from Foundation should be placed here.
//
// 1. Choose whether to include the BigCommerce class names
//
// -----------------------------------------------------------------------------

$exportCSS--forms:                  true; // 1

$form-verticalSpacing:              spacing("single") + spacing("third");

$form-margin:                       0 0 spacing("single");

$legend-fontFamily:                 fontFamily("headingSans");
$legend-fontSize:                   fontSize("larger");
$legend-lineHeight:                 lineHeight("larger");
$legend-marginBottom:               spacing("half");

$formField-maxWidth:                none;
$formField-margin:                  0 0 $form-verticalSpacing;

$form-label-small-color:            stencilColor("color-textSecondary");
$form-label-small-fontSize:         remCalc(10px);
$form-label-small-fontWeight:       null;

$input-placeholder-color:           color("greys", "light");
$input-disabled-color:              color("greys", "light");
$input-boxShadow:                   null;
$input-focus-boxShadow:             null;
$input-fontSmoothing:               true;
$input-height:                      $form-spacing * 2;
$input-margin:                      0;
$input-horizontalPadding:           ($form-spacing / 1.5);
$input-verticalPadding:             ($form-spacing / 2);
$input-padding:                     $input-verticalPadding $input-horizontalPadding;
$input-transition:                  border-color 100ms ease-out;
$input-disabled-borderColor:        null;

$select-boxShadow:                  null;
$select-height:                     $input-height;
$select-margin:                     0;
$select-maxWidth:                   null;
$select-outline:                    0;
$select-paddingRight:               null;
$select-focus-borderColor:          $input-focus-border-color;
$select-focus-boxShadow:            null;


// Stencil Variables
// -----------------------------------------------------------------------------

$select-padding:                    $input-verticalPadding (spacing("double")) $input-verticalPadding $input-horizontalPadding;
$select-borderRadius:               $global-radius;
$select-hover-borderColor:          null;
$select-arrow-color:                rgba(stencilColor("select-arrow-color"), 0.999);
$select-backgroundImage:            url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z' fill='#{$select-arrow-color}' /%3E%3C/svg%3E");
$select-backgroundPosition:         right (spacing("quarter") + spacing("eighth")) top spacing("third") + spacing("eighth");

$form-label-small-marginTop:        spacing("quarter");

$input-small-padding:               (spacing("quarter") + spacing("eighth")) (spacing("third") + spacing("sixth"));
$input-small-height:                ((spacing("quarter") + spacing("eighth")) * 2) + 1rem + remCalc($input-border-width * 2);
$input-small-fontSize:              fontSize("smallest");

$select-small-paddingRight:         (spacing("base") * 2);
