// ----------------------------------------
// VARIABLES
// ----------------------------------------





// ----------------------------------------
// COLORS

// Greys
$black:                         var( --fluidshops--color--black, #000 ) !default;
$darker-grey:                   var( --fluidshops--color--darker-grey, #1E212B ) !default;
$dark-grey:                     var( --fluidshops--color--dark-grey, #535156 ) !default;
$grey:                          var( --fluidshops--color--grey, #7b7575 ) !default;
$light-grey:                    var( --fluidshops--color--light-grey, #d8d8d8 ) !default;
$lighter-grey:                  var( --fluidshops--color--lighter-grey, #f3f3f3 ) !default;
$white:                         var( --fluidshops--color--white, #fff ) !default;

// Utility colors
$success-color:                 var( --fluidshops--color--success, #007a3d ) !default;
$error-color:                   var( --fluidshops--color--error, #cc1818 ) !default;
$alert-color:                   var( --fluidshops--color--alert, #c95000 ) !default;
$info-color:                    var( --fluidshops--color--info, #1f01b9 ) !default;

$border-color:                  var( --fluidshops--border-color, $light-grey ) !default;
$border-dark-color:             var( --fluidshops--border-color--dark, $grey ) !default;
$border-light-color:            var( --fluidshops--border-color--light, $lighter-grey ) !default;

// Shadows
$box-shadow-offset-x:           0 !default;
$box-shadow-offset-y:           remsize( .3rem ) !default;
$box-shadow-blur-radius:        remsize( .8rem ) !default;
$box-shadow-offset-x--small:    0 !default;
$box-shadow-offset-y--small:    remsize( .1rem ) !default;
$box-shadow-blur-radius--small: remsize( .5rem ) !default;
$box-shadow-darker:             $box-shadow-offset-x $box-shadow-offset-y $box-shadow-blur-radius var( --fluidshops--shadow-color--darker, $light-grey ) !default;
$box-shadow-dark:               $box-shadow-offset-x $box-shadow-offset-y $box-shadow-blur-radius var( --fluidshops--shadow-color--dark, $lighter-grey ) !default;

// Outline focus
$focus-outline-field:           solid remsize( .2rem ) $dark-grey !default;
$focus-outline-offset-field:    remsize( .2rem ) !default;
$focus-outline-link:            dotted remsize( .1rem ) $dark-grey !default;
$focus-outline-offset-link:     remsize( .1rem ) !default;
$focus-outline-button:          $focus-outline-field !default;
$focus-outline-offset-button:   $focus-outline-offset-field !default;

// END - COLORS
// ----------------------------------------





// ----------------------------------------
// ALIGNMENT

$alignment-right:                           right !default;
$alignment-left:                            left !default;

// END - ALIGNMENT
// ----------------------------------------





// ----------------------------------------
// SPACING & BOX SYSTEM

$global-spacing-tiny:                       remsize( .5rem ) !default;
$global-spacing-extra-small:                remsize( 1rem ) !default;
$global-spacing-small:                      remsize( 2rem ) !default;
$global-spacing:                            remsize( 3rem ) !default;
$global-spacing-medium:                     remsize( 5rem ) !default;
$global-spacing-large:                      remsize( 8rem ) !default;
$global-spacing-extra-large:                remsize( 13rem ) !default;

$global-radius-extra-small:                 remsize( .3rem ) !default;
$global-radius-small:                       remsize( .5rem ) !default;
$global-radius:                             remsize( .8rem ) !default;
$global-radius-medium:                      remsize( 1.3rem ) !default;
$global-radius-large:                       remsize( 2.1rem ) !default;
$global-radius-extra-large:                 remsize( 3.4rem ) !default;

// END - SPACING & BOX SYSTEM
// ----------------------------------------





// ----------------------------------------
// TYPOGRAPHY

// Font sizes
$font-size-tiny:                            remsize( 1rem ) !default;
$font-size-extra-small:                     remsize( 1.3rem ) !default;
$font-size-small:                           remsize( 1.5rem ) !default;
$font-size:                                 remsize( 1.6rem ) !default; // Should be at least 16px to prevent auto-zoom issues on Safari Mobile
$font-size-medium:                          remsize( 2rem ) !default;
$font-size-large:                           remsize( 2.8rem ) !default;
$font-size-extra-large:                     remsize( 4rem ) !default;

$font-size-tiny--large-screen:              remsize( 1rem ) !default;
$font-size-extra-small--large-screen:       remsize( 1.3rem ) !default;
$font-size-small--large-screen:             remsize( 1.5rem ) !default;
$font-size--large-screen:                   remsize( 1.8rem ) !default;
$font-size-medium--large-screen:            remsize( 2.4rem ) !default;
$font-size-large--large-screen:             remsize( 3.2rem ) !default;
$font-size-extra-large--large-screen:       remsize( 5rem ) !default;

// END - TYPOGRAPHY
// ----------------------------------------





// ----------------------------------------
// GRID SYSTEM

// Breakpoints
$bp-larger-than-mobile:                     'min-width: 400px' !default;
$bp-larger-than-phablet:                    'min-width: 550px' !default;
$bp-larger-than-tablet:                     'min-width: 750px' !default;
$bp-larger-than-desktop:                    'min-width: 1000px' !default;
$bp-larger-than-desktop-medium:             'min-width: 1280px' !default;
$bp-larger-than-desktop-large:              'min-width: 1500px' !default;
$bp-larger-than-desktop-extra-large:        'min-width: 2000px' !default;

$bp-smaller-than-mobile:                    'max-width: 399px' !default;
$bp-smaller-than-phablet:                   'max-width: 549px' !default;
$bp-smaller-than-tablet:                    'max-width: 749px' !default;
$bp-smaller-than-desktop:                   'max-width: 999px' !default;
$bp-smaller-than-desktop-medium:            'max-width: 1279px' !default;
$bp-smaller-than-desktop-large:             'max-width: 1499px' !default;
$bp-smaller-than-desktop-extra-large:       'max-width: 1999px' !default;

// Container spacing
$container-spacing-mobile:                  $global-spacing-small !default;
$container-spacing-tablet:                  $global-spacing !default;
$container-spacing-desktop:                 $global-spacing-medium !default;
$container-spacing-desktop-medium:          $global-spacing-medium !default;
$container-spacing-desktop-large:           $global-spacing-medium !default;
$container-spacing-desktop-extra-large:     $global-spacing-medium !default;

// Container total width
$container-width-mobile:                    100% !default;
$container-width-tablet:                    100% !default;
$container-width-desktop:                   100% !default;
$container-width-desktop-medium:            remsize( 120rem ) !default;
$container-width-desktop-large:             remsize( 140rem ) !default;
$container-width-desktop-extra-large:       remsize( 140rem ) !default;

// END - GRID SYSTEM
// ----------------------------------------





// ----------------------------------------
// ANIMATIONS

$global-animation-duration-slowest:         2.5s !default;
$global-animation-duration-slower:          1.5s !default;
$global-animation-duration-slow:            .75s !default;
$global-animation-duration:                 .3s !default;
$global-animation-duration-fast:            .15s !default;
$global-animation-duration-faster:          .1s !default;
$global-animation-duration-fastest:         .05s !default;

$global-animation-easing:                   ease !default;
$sliding-animation-easing:                  cubic-bezier(0.25, 0.46, 0.45, 0.94) !default; // ease-out-quadratic

// END - ANIMATIONS
// ----------------------------------------





// ----------------------------------------
// Z-INDEX LEVELS

$z-layers: (
	'above-all':            100000,
	'modal':                5000,
	'header-element':       2000,
	'offside-element':      1500,
	'sticky-element':       300,
	'float-element':        200,
	'above':                10,
	'default':              1,
	'below':                -1
) !default;

// END - Z-INDEX LEVELS
// ----------------------------------------





// ----------------------------------------
// ICONS

$icon-font-name:                 'fluid-checkout-icons' !default;

$icon-size-tiny:                 remsize( 1rem ) !default;
$icon-size-extra-small:          remsize( 1.3rem ) !default;
$icon-size-small:                remsize( 1.8rem ) !default;
$icon-size:                      remsize( 2.4rem ) !default;
$icon-size-medium:               remsize( 3rem ) !default;
$icon-size-large:                remsize( 5rem ) !default;
$icon-size-extra-large:          remsize( 8rem ) !default;

$icons: (
	'i-loader-circle': '\e816',
) !default;

// END - ICONS
// ----------------------------------------





// ----------------------------------------
// LOADERS

$loader-icon-name:                          'i-loader-circle' !default;
$loader-animation-name:                     loader-spin !default;
$loader-animation-name--button:             loader-spin-centered !default;
$loader-animation-speed:                    $global-animation-duration-slow !default;

// END - LOADERS
// ----------------------------------------