// =============================================================================
// GLOBAL (Settings)
// =============================================================================

// 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--global:           $exportCSS !default; // 1


// Settings
// -----------------------------------------------------------------------------
//
// The SCSS below this comment block is copy/pasted from Foundation 5.4.3's
// files: _functions.scss and _global.scss.
//
// Use the below variables at will, with complete control.
// Anything commented out will fall back to the vendor's defaults.
//
// -----------------------------------------------------------------------------

// This is the default html and body font-size for the base rem value.
$rem-base:                    $fontSize-root !default;


// Data attribute namespace
$namespace:                   false !default;

// The default font-size is set to 100% of the browser style sheet (usually 16px)
// for compatibility with browser-based text zoom or user-set defaults.

// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
// If you want your base font-size to be different and not have it affect the grid breakpoints,
// set $rem-base to $base-font-size and make sure $base-font-size is a px value.
$base-font-size:              $fontSize-base !default;

// $base-line-height is 24px while $base-font-size is 16px
$base-line-height:            lineHeight(base) !default;


// We use these as default colors throughout
$primary-color:               color("primary") !default;
$secondary-color:             color("secondary") !default;
$alert-color:                 color("error") !default;
$success-color:               color("success") !default;
$warning-color:               color("warning") !default;
$info-color:                  color("info") !default;


// We use these to control text direction settings
$text-direction:              ltr !default;
$default-float:               left !default;
$opposite-direction:          right !default;
@if $text-direction == ltr {
    $default-float:           left !default;
    $opposite-direction:      right !default;
}
@else {
    $default-float:           right !default;
    $opposite-direction:      left !default;
}


// We use these to make sure border radius matches unless we want it different.
$global-radius:               2px !default;


// We use these to control inset shadow shiny edges and depressions.
$shiny-edge-size:             0 1px 0 !default;
$shiny-edge-color:            rgba(color("whites", "bright"), 0.5) !default;
$shiny-edge-active-color:     rgba(color("blacks"), 0.2) !default;


// We use this to control whether or not CSS classes come through in the gem files.
$include-html-classes:        false !default;
$include-print-styles:        false !default;
$include-html-global-classes: $include-html-classes !default;


// Media Query Ranges
$small-breakpoint:            screenSize("small")  !default;
$medium-breakpoint:           screenSize("medium") !default;
$large-breakpoint:            screenSize("large") !default;
$xlarge-breakpoint:           screenSize("xlarge") !default;

$small-range:                 (0, screenSize("small")) !default;
$medium-range:                (screenSize("small"), screenSize("medium")) !default;
$large-range:                 (screenSize("medium"), screenSize("large")) !default;
$xlarge-range:                (screenSize("large"), screenSize("xxlarge")) !default;
$xxlarge-range:               (screenSize("xxlarge"), 99999999em) !default;


// We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet
$cursor-auto-value:           auto !default;
$cursor-crosshair-value:      crosshair !default;
$cursor-default-value:        default !default;
$cursor-pointer-value:        pointer !default;
$cursor-help-value:           help !default;
$cursor-text-value:           text !default;


$figure-margin:               0 0 spacing("base") !default;