@use "sass:math" as math;

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





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

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

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

$border-color:                  var( --fluidcheckout--border-color, $light-grey ) !default;
$border-dark-color:             var( --fluidcheckout--border-color--dark, $grey ) !default;
$border-light-color:            var( --fluidcheckout--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( --fluidcheckout--shadow-color--darker, $light-grey ) !default;
$box-shadow-dark:               $box-shadow-offset-x $box-shadow-offset-y $box-shadow-blur-radius var( --fluidcheckout--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-alert-octagon': '\e800',
	'i-alert-triangle': '\e801',
	'i-arrow-left': '\e802',
	'i-arrow-right': '\e803',
	'i-cart': '\e828',
	'i-check-small': '\e805',
	'i-check': '\e806',
	'i-check-circle': '\e82b',
	'i-chevron-down': '\e808',
	'i-chevron-left': '\e80a',
	'i-chevron-right': '\e80c',
	'i-chevron-up': '\e80e',
	'i-loader-circle': '\e816',
	'i-truck': '\e817',
	'i-minus': '\e818',
	'i-plus': '\e81b',
	'i-plus-circle': '\e82a',
	'i-store': '\e804',
	'i-trash': '\e822',
	'i-x': '\e827',
	'i-x-circle': '\e815',
) !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
// ----------------------------------------





// ----------------------------------------
// BUTTONS

$button-height:                             var( --fluidcheckout--button--height, remsize( 4.4rem ) ) !default;
$button-font-weight:                        var( --fluidcheckout--button--font-weight, normal ) !default;
$button-font-size:                          var( --fluidcheckout--button--font-size, inherit ) !default;
$button-border-width:                       var( --fluidcheckout--button--border-width, remsize( .1rem ) ) !default;
$button-border-style:                       var( --fluidcheckout--button--border-style, solid ) !default;
$button-border:                             $button-border-style $button-border-width transparent !default;
$button-border-radius:                      var( --fluidcheckout--button--border-radius, 0 ) !default;
$button-box-shadow:                         $box-shadow-offset-x $box-shadow-offset-y var( --fluidcheckout--button--box-shadow-blur-radius, $box-shadow-blur-radius ) var( --fluidcheckout--button--box-shadow-color, transparent ) !default;

$button-primary-border-color:               var( --fluidcheckout--button--primary--border-color, $black ) !default;
$button-primary-background-color:           var( --fluidcheckout--button--primary--background-color, $black ) !default;
$button-primary-text-color:                 var( --fluidcheckout--button--primary--text-color, $white ) !default;
$button-primary-border-color--hover:        var( --fluidcheckout--button--primary--border-color--hover, $darker-grey ) !default;
$button-primary-background-color--hover:    var( --fluidcheckout--button--primary--background-color--hover, $darker-grey ) !default;
$button-primary-text-color--hover:          var( --fluidcheckout--button--primary--text-color--hover, $white ) !default;

$button-secondary-border-color:             var( --fluidcheckout--button--secondary--border-color, $lighter-grey ) !default;
$button-secondary-background-color:         var( --fluidcheckout--button--secondary--background-color, $lighter-grey ) !default;
$button-secondary-text-color:               var( --fluidcheckout--button--secondary--text-color, $black ) !default;
$button-secondary-border-color--hover:      var( --fluidcheckout--button--secondary--border-color--hover, $light-grey ) !default;
$button-secondary-background-color--hover:  var( --fluidcheckout--button--secondary--background-color--hover, $light-grey ) !default;
$button-secondary-text-color--hover:        var( --fluidcheckout--button--secondary--text-color--hover, $black ) !default;

// END - BUTTONS
// ----------------------------------------





// ----------------------------------------
// OPTION BOX

$option-box-padding-vertical:               var( --fluidcheckout--option-box--spacing--vertical, $global-spacing-extra-small ) !default;
$option-box-padding-horizontal:             var( --fluidcheckout--option-box--spacing--horizontal, $global-spacing-extra-small ) !default;
$option-box-space-between-options:          var( --fluidcheckout--option-box--spacing--between-options, 0 ) !default;

$option-box-border-radius:                  var( --fluidcheckout--option-box--border-radius, $global-radius-medium ) !default;
$option-box-border-color:                   var( --fluidcheckout--option-box--border-color, $border-color ) !default;
$option-box-border-color--hover:            var( --fluidcheckout--option-box--border-color--hover, $border-dark-color ) !default;
$option-box-border-style:                   var( --fluidcheckout--option-box--border-style, solid ) !default;
$option-box-border-width:                   var( --fluidcheckout--option-box--border-width, remsize( .1rem ) ) !default;
$option-box-border:                         $option-box-border-style $option-box-border-width $option-box-border-color !default;

$option-box-label-color--checked:           var( --fluidcheckout--option-box--label-color--checked, $darker-grey ) !default;
$option-box-label-border-color:             var( --fluidcheckout--option-box--label-border-color, $border-color ) !default;
$option-box-label-border-color--hover:      var( --fluidcheckout--option-box--label-border-color--hover, $option-box-label-border-color ) !default;
$option-box-label-border-color--checked:    var( --fluidcheckout--option-box--label-border-color--checked, $border-color ) !default;
$option-box-label-border-style:             var( --fluidcheckout--option-box--label-border-style, solid ) !default;
$option-box-label-border-width:             var( --fluidcheckout--option-box--label-border-width, remsize( .1rem ) ) !default;
$option-box-label-border:                   $option-box-label-border-style $option-box-label-border-width $option-box-label-border-color !default;

$option-box-background-color:               var( --fluidcheckout--option-box--background-color, $white ) !default;
$option-box-background-color--hover:        var( --fluidcheckout--option-box--background-color--hover, $lighter-grey ) !default;
$option-box-background-color--checked:      var( --fluidcheckout--option-box--background-color--checked, $lighter-grey ) !default;

$option-box-radio-size:                     $icon-size !default;
$option-box-radio-color:                    var( --fluidcheckout--option-box--radio-color, $border-color ) !default;
$option-box-radio-color--hover:             var( --fluidcheckout--option-box--radio-color--hover, $grey ) !default;
$option-box-radio-color--checked:           var( --fluidcheckout--option-box--radio-color--checked, $success-color ) !default;
$option-box-radio-icon-color--checked:      var( --fluidcheckout--option-box--radio-icon-color--checked, $white ) !default;
$option-box-radio-border:                   solid remsize( .2rem ) $option-box-radio-color !default;

// END - OPTION BOX
// ----------------------------------------





// ----------------------------------------
// CHECKOUT HEADER

$checkout-header-background-color:          var( --fluidcheckout--header--background-color, $white ) !default;
$checkout-header-box-shadow:                $box-shadow-offset-x $box-shadow-offset-y $box-shadow-blur-radius var( --fluidcheckout--header--shadow-color, rgba( 0, 0, 0, .15 ) ) !default;
$checkout-header-box-shadow--large-screen:  $box-shadow-offset-x $box-shadow-offset-y $box-shadow-blur-radius var( --fluidcheckout--header--shadow-color--large-screen, transparent ) !default;
$checkout-header-border:                    var( --fluidcheckout--header--border-style--large-screen, solid ) var( --fluidcheckout--header--border-width, 0 ) $border-color !default;
$checkout-header-border--large-screen:      var( --fluidcheckout--header--border-style--large-screen, solid ) var( --fluidcheckout--header--border-width--large-screen, remsize( .1rem ) ) $border-color !default;

$checkout-header-height:                    remsize( 6rem ) !default;
$checkout-header-height--large-screen:      remsize( 8rem ) !default;

$checkout-logo-height:                      remsize( 2.5rem ) !default;
$checkout-logo-height--large-screen:        remsize( 4rem ) !default;

// END - CHECKOUT HEADER
// ----------------------------------------





// ----------------------------------------
// CHECKOUT FOOTER

$checkout-footer-background-color:          var( --fluidcheckout--footer--background-color, $white ) !default;
$checkout-footer-border:                    var( --fluidcheckout--footer--border-style--large-screen, solid ) var( --fluidcheckout--footer--border-width, 0 ) $border-color !default;
$checkout-footer-border--large-screen:      var( --fluidcheckout--footer--border-style--large-screen, solid ) var( --fluidcheckout--footer--border-width--large-screen, remsize( .1rem ) ) $border-color !default;

// END - CHECKOUT FOOTER
// ----------------------------------------





// ----------------------------------------
// CHECKOUT LAYOUT

$checkout-column-gap--large-screen:         var( --fluidcheckout--columns--gap, $global-spacing-medium ) !default;
$checkout-steps-width--large-screen:        62.5% !default;
$checkout-overview-width--large-screen:     #{ 100% - $checkout-steps-width--large-screen } !default;

// END - CHECKOUT LAYOUT
// ----------------------------------------





// ----------------------------------------
// CHECKOUT PROGRESS BAR

$checkout-progress-margin:                            0 #{ - $container-spacing-mobile } !default;
$checkout-progress-margin--large-screen:              0 !default;

$checkout-progress-padding:                           $global-spacing-extra-small $container-spacing-mobile !default;
$checkout-progress-padding--large-screen:             $global-spacing-extra-small $container-spacing-mobile !default;

$checkout-progress-background-color:                  var( --fluidcheckout--checkout-progress--background-color, $white ) !default;

$checkout-progress-bar-height:                        remsize( .5rem ) !default;
$checkout-progress-bar-border:                        none !default;
$checkout-progress-bar-border-radius:                 math.div( $checkout-progress-bar-height, 2 ) !default;
$checkout-progress-bar-color:                         var( --fluidcheckout--checkout-progress--bar-color, $light-grey ) !default;
$checkout-progress-bar-complete-color:                var( --fluidcheckout--checkout-progress--bar-color--complete, $success-color ) !default;
$checkout-progress-bar-current-color:                 var( --fluidcheckout--checkout-progress--bar-color--current, $success-color ) !default;

$checkout-step-count-margin:                          0 0 $global-spacing-tiny !default;
$checkout-step-count-margin--large-screen:            0 0 $global-spacing-tiny !default;
$checkout-step-count-color:                           var( --fluidcheckout--checkout-progress--step-count--text-color, $dark-grey ) !default;
$checkout-step-count-font-size:                       $font-size-small !default;
$checkout-step-count-font-size--large-screen:         $font-size-small--large-screen !default;
$checkout-step-count-font-weight:                     bold !default;
$checkout-step-count-text-transform:                  uppercase !default;
$checkout-step-count-text-align:                      center !default;

// END - CHECKOUT PROGRESS BAR
// ----------------------------------------





// ----------------------------------------
// CHECKOUT STEPS

$checkout-steps-container-margin:                0 #{ - $container-spacing-mobile } 0 !default;
$checkout-steps-container-margin--large-screen:  0 !default;

$checkout-step-padding:                          0 !default;
$checkout-step-padding--large-screen:            0 !default;

$checkout-step-border-width:                     var( --fluidcheckout--section--border-width, remsize( .1rem ) ) !default;
$checkout-step-border-color:                     var( --fluidcheckout--section--border-color, $border-color ) !default;
$checkout-step-border:                           solid $checkout-step-border-width $checkout-step-border-color !default;
$checkout-step-background-color:                 var( --fluidcheckout--section--background-color, $white ) !default;
$checkout-step-box-shadow:                       $box-shadow-offset-x $box-shadow-offset-y $box-shadow-blur-radius var( --fluidcheckout--section--shadow-color, transparent ) !default;
$checkout-step-box-shadow--large-screen:         $box-shadow-offset-x $box-shadow-offset-y $box-shadow-blur-radius var( --fluidcheckout--section--shadow-color--large-screen, transparent ) !default;

$checkout-substep-title-check-icon-size:         $icon-size-small !default;
$checkout-substep-title-check-icon-spacing:      0 !default;

$checkout-substep-title-margin:                  0 0 $global-spacing-extra-small 0 !default;
$checkout-substep-title-margin--large-screen:    $checkout-substep-title-margin !default;
$checkout-substep-title-padding:                 0 !default;
$checkout-substep-title-padding--large-screen:   0 $global-spacing-tiny 0 0 !default;
$checkout-substep-complete-title-padding:                       0 $global-spacing-large 0 !default;
$checkout-substep-complete-title-padding-left:                  #{ $global-spacing-extra-small + $checkout-substep-title-check-icon-spacing + $checkout-substep-title-check-icon-size } !default;
$checkout-substep-complete-title-padding--large-screen:         0 $global-spacing-tiny 0 !default;
$checkout-substep-complete-title-padding-left--large-screen:    #{ $global-spacing-extra-small + $checkout-substep-title-check-icon-spacing + $checkout-substep-title-check-icon-size } !default;

$checkout-substep-title-color:                   $dark-grey !default;
$checkout-substep-title-color--completed:        $grey !default;
$checkout-substep-title-font-size:               $font-size-small !default;
$checkout-substep-title-font-size--large-screen: $font-size-small--large-screen !default;
$checkout-substep-title-font-weight:             bold !default;
$checkout-substep-title-text-transform:          uppercase !default;
$checkout-substep-title-text-align:              $alignment-left !default;

$checkout-substep-margin-expand:                 $global-spacing-small #{ - $container-spacing-mobile } !default;
$checkout-substep-margin-expand--large-screen:   $global-spacing-small #{ - $container-spacing-mobile } !default;
$checkout-substep-padding:                       $global-spacing-small $container-spacing-mobile !default;
$checkout-substep-padding--large-screen:         $global-spacing-small $container-spacing-mobile !default;

$checkout-substep-border-radius:                 var( --fluidcheckout--section--border-radius, $global-radius ) !default;

$checkout-substep-text-margin:                   0 !default;
$checkout-substep-text-margin--large-screen:     0 !default;
$checkout-substep-text-padding:                  0 0 0 #{ $global-spacing-extra-small + $checkout-substep-title-check-icon-spacing + $checkout-substep-title-check-icon-size } !default;
$checkout-substep-text-color:                    $dark-grey !default;
$checkout-substep-text-font-size:                $font-size-extra-small !default;
$checkout-substep-text-font-size--large-screen:  $font-size-extra-small--large-screen !default;
$checkout-substep-text-font-weight:              normal !default;

$checkout-substep-action-button-top:             remsize( 1.2rem ) !default;
$checkout-substep-action-button-right:           $global-spacing-extra-small !default;
$checkout-substep-action-button-margin:          0 !default;
$checkout-substep-action-button-padding:         $global-spacing-tiny $global-spacing-extra-small !default;
$checkout-substep-action-button-font-size:       $font-size-small !default;
$checkout-substep-action-button-font-size--large-screen:  $font-size-small--large-screen !default;
$checkout-substep-action-button-font-weight:     normal !default;
$checkout-substep-action-button-text-decoration: underline !default;
$checkout-substep-action-button-color:           inherit !default;
$checkout-substep-action-button-background-color: transparent !default;

$checkout-expansible-section-icon:               'i-plus-circle' !default;
$checkout-expansible-section-icon-size:          $icon-size !default;
$checkout-expansible-section-icon-spacing-left:  remsize( -.3rem ) !default;
$checkout-expansible-section-icon-spacing-right: $global-spacing-tiny !default;
$checkout-expansible-section-text-decoration:    none !default;

$checkout-highlighted-section-background-color:                 var( --fluidcheckout--section--highlighted-background-color, $lighter-grey ) !default;
$checkout-highlighted-section-fields-background-color:          var( --fluidcheckout--section--highlighted-field-background-color, $white ) !default;

// END - CHECKOUT STEPS
// ----------------------------------------





// ----------------------------------------
// ORDER SUMMARY

$order-summary-border-width:                     var( --fluidcheckout--order-summary--border-width, remsize( .1rem ) ) !default;
$order-summary-border-color:                     var( --fluidcheckout--order-summary--border-color, $border-color ) !default;
$order-summary-border:                           solid $order-summary-border-width $order-summary-border-color !default;
$order-summary-border-radius:                    $checkout-substep-border-radius !default;
$order-summary-box-shadow:                       $box-shadow-offset-x $box-shadow-offset-y $box-shadow-blur-radius var( --fluidcheckout--order-summary--shadow-color, transparent ) !default;
$order-summary-box-shadow--large-screen:         $box-shadow-offset-x $box-shadow-offset-y $box-shadow-blur-radius var( --fluidcheckout--order-summary--shadow-color--large-screen, transparent ) !default;
$order-summary-background-color:                 var( --fluidcheckout--order-summary--background-color, $white ) !default;
$order-summary-background-color--popup:          var( --fluidcheckout--order-summary--background-color--popup, $white ) !default;

$order-summary-container-margin:                 0 !default;
$order-summary-container-padding:                0 !default;
$order-summary-container-margin--large-screen:   0 !default;
$order-summary-container-padding--large-screen:  0 !default;

$order-summary-table-margin:                     0 #{ - $global-spacing-small } !default;
$order-summary-table-margin--large-screen:       0 #{ - $global-spacing-small } remsize( -.1rem ) !default;
$order-summary-table-width:                      calc( 100% + #{ $global-spacing-small * 2 } ) !default;
$order-summary-table-width--large-screen:        calc( 100% + #{ $global-spacing-small * 2 } ) !default;

$order-summary-cell-padding-horizontal:          $global-spacing-small !default;
$order-summary-cell-padding-vertical:            $global-spacing-extra-small !default;
$order-summary-cell-padding-vertical--total:     $order-summary-cell-padding-vertical + $global-spacing-tiny !default;

$order-summary-cell-border-width:                var( --fluidcheckout--order-summary--cell-border-width, remsize( .1rem ) ) !default;
$order-summary-cell-border-color:                var( --fluidcheckout--order-summary--cell-border-color, $border-color ) !default;
$order-summary-cell-border:                      solid $order-summary-cell-border-width $order-summary-cell-border-color !default;
$order-summary-cell-border-width--products-list: var( --fluidcheckout--order-summary--cell-border-width--products-list, remsize( .1rem ) ) !default;
$order-summary-cell-border-color--products-list: var( --fluidcheckout--order-summary--cell-border-color--products-list, $border-color ) !default;
$order-summary-cell-border--products-list:       solid $order-summary-cell-border-width--products-list $order-summary-cell-border-color--products-list !default;
$order-summary-cell-border-width--products:      var( --fluidcheckout--order-summary--cell-border-width--products, remsize( .1rem ) ) !default;
$order-summary-cell-border-color--products:      var( --fluidcheckout--order-summary--cell-border-color--products, $border-color ) !default;
$order-summary-cell-border--products:            dashed $order-summary-cell-border-width--products $order-summary-cell-border-color--products !default;
$order-summary-cell-border-width--summary:       var( --fluidcheckout--order-summary--cell-border-width--summary, remsize( .1rem ) ) !default;
$order-summary-cell-border-color--summary:       var( --fluidcheckout--order-summary--cell-border-color--summary, $border-color ) !default;
$order-summary-cell-border--summary:             solid $order-summary-cell-border-width--summary $order-summary-cell-border-color--summary !default;
$order-summary-cell-border-width--totals-top:    var( --fluidcheckout--order-summary--cell-border-width--totals-top, remsize( .1rem ) ) !default;
$order-summary-cell-border-color--totals-top:    var( --fluidcheckout--order-summary--cell-border-color--totals-top, $border-color ) !default;
$order-summary-cell-border--totals-top:          solid $order-summary-cell-border-width--totals-top $order-summary-cell-border-color--totals-top !default;
$order-summary-cell-border-width--totals-bottom: var( --fluidcheckout--order-summary--cell-border-width--totals-bottom, remsize( .1rem ) ) !default;
$order-summary-cell-border-color--totals-bottom: var( --fluidcheckout--order-summary--cell-border-color--totals-bottom, $border-color ) !default;
$order-summary-cell-border--totals-bottom:       solid $order-summary-cell-border-width--totals-bottom $order-summary-cell-border-color--totals-bottom !default;

$order-summary-image-width:                      var( --fluidcheckout--order-summary--image-width, remsize( 5rem ) ) !default;
$order-summary-image-width--large-screen:        var( --fluidcheckout--order-summary--image-width--large-screen, remsize( 6rem ) ) !default;
$order-summary-image-padding:                    var( --fluidcheckout--order-summary--image-padding, remsize( .3rem ) ) !default;
$order-summary-image-background-color:           var( --fluidcheckout--order-summary--image-background-color, $white ) !default;
$order-summary-image-border-width:               var( --fluidcheckout--order-summary--image-border-width, remsize( .1rem ) ) !default;
$order-summary-image-border-color:               var( --fluidcheckout--order-summary--image-border-color, $border-color ) !default;
$order-summary-image-border:                     solid $order-summary-image-border-width $order-summary-image-border-color !default;
$order-summary-image-border-radius:              var( --fluidcheckout--order-summary--image-border-radius, $global-radius-extra-small ) !default;
$order-summary-image-box-shadow:                 $box-shadow-offset-x--small $box-shadow-offset-y--small $box-shadow-blur-radius--small var( --fluidcheckout--order-summary--image-shadow-color, transparent ) !default;

$order-summary-quantity-transform:               translateX( -100% ) translateY( -25% ) !default;
$order-summary-quantity-background-color:        var( --fluidcheckout--order-summary--quantity-background-color, $dark-grey ) !default;
$order-summary-quantity-text-color:              var( --fluidcheckout--order-summary--quantity-text-color, $white ) !default;
$order-summary-quantity-font-size:               $font-size-extra-small !default;

$order-summary-font-size:                        $font-size-small !default;
$order-summary-font-size--large-screen:          $font-size-small--large-screen !default;

$order-summary-edit-cart-button-margin:          0 !default;
$order-summary-edit-cart-button-right:           #{ - $global-spacing-extra-small } !default;
$order-summary-edit-cart-button-padding:         0 $global-spacing-extra-small !default;
$order-summary-edit-cart-button-font-size--large-screen:  $checkout-substep-action-button-font-size--large-screen !default;
$order-summary-edit-cart-button-font-weight:     $checkout-substep-action-button-font-weight !default;
$order-summary-edit-cart-button-text-decoration: $checkout-substep-action-button-text-decoration !default;
$order-summary-edit-cart-button-color:           $checkout-substep-action-button-color !default;
$order-summary-edit-cart-button-background-color:  $checkout-substep-action-button-background-color !default;

$order-summary-highlighted-total-background-color: var( --fluidcheckout--order-summary--highlighted-total-background-color, $lighter-grey ) !default;

// END - ORDER SUMMARY
// ----------------------------------------





// ----------------------------------------
// PLACE ORDER

$place-order-padding:                       $global-spacing-small $container-spacing-mobile !default;
$place-order-padding--large-screen:         $global-spacing-small $global-spacing-small !default;
$place-order-padding-sidebar:               0 !default;
$place-order-padding-sidebar--large-screen: 0 !default;

// END - PLACE ORDER
// ----------------------------------------





// ----------------------------------------
// SHIPPING METHODS

$shipping-method-font-weight:               normal !default;
$shipping-method-price-font-weight:         bold !default;
$shipping-method-price-width:               $global-spacing-large !default;

// END - SHIPPING METHODS
// ----------------------------------------





// ----------------------------------------
// PAYMENT METHODS

$payment-method-margin:                     0 !default;
$payment-method-font-weight:                normal !default;

// END - PAYMENT METHODS
// ----------------------------------------





// ----------------------------------------
// COUPON CODES

$coupon-code-coupon-margin:                 0 #{ - $global-spacing-extra-small } $global-spacing-tiny !default;
$coupon-code-coupon-padding:                $global-spacing-tiny $global-spacing-extra-small !default;
$coupon-code-coupon-border-style:           var( --fluidcheckout--coupon-code--border-style, dashed ) !default;
$coupon-code-coupon-border:                 $coupon-code-coupon-border-style remsize( .1rem ) var( --fluidcheckout--coupon-code--border-color, $border-color ) !default;
$coupon-code-coupon-border-radius:          var( --fluidcheckout--coupon-code--border-radius, $global-radius-small ) !default;
$coupon-code-coupon-background-color:       var( --fluidcheckout--coupon-code--background-color, transparent ) !default;
$coupon-code-coupon-highlight-background-color: var( --fluidcheckout--coupon-code--highlight-background-color, #e0f5eb ) !default;

$coupon-code-remove-spacing:                $global-spacing-extra-small !default;
$coupon-code-remove-font-size:              $font-size-small !default;
$coupon-code-remove-font-weight:            normal !default;
$coupon-code-remove-text-decoration:        underline !default;
$coupon-code-remove-color:                  inherit !default;
$coupon-code-remove-background-color:       transparent !default;

// END - COUPON CODES
// ----------------------------------------





// ----------------------------------------
// DISCOUNT SECTIONS

$discount-section-border:                   var( --fluidcheckout--discount-section--border-style, $coupon-code-coupon-border-style ) remsize( .1rem ) var( --fluidcheckout--discount-section--border-color, $success-color ) !default;
$discount-section-border-radius:            $checkout-substep-border-radius !default;

// END - DISCOUNT SECTIONS
// ----------------------------------------





// ----------------------------------------
// FORM FIELDS

$checkout-field-description-padding:                  $global-spacing-tiny $global-spacing-extra-small !default;
$checkout-field-description-color:                    $grey !default;
$checkout-field-description-background-color:         transparent !default;
$checkout-field-description-font-size:                $font-size-extra-small !default;
$checkout-field-description-font-size--large-screen:  $font-size-extra-small !default;

$form-field-height:                                   var( --fluidcheckout--field--height, remsize( 4.5625rem ) ) !default;
$form-field-border-radius:                            var( --fluidcheckout--field--border-radius, 0 ) !default;
$form-field-border-width:                             var( --fluidcheckout--field--border-width, remsize( .1rem ) ) !default;
$form-field-padding-horizontal:                       var( --fluidcheckout--field--padding-horizontal, $global-spacing-extra-small ) !default;
$form-field-padding-left:                             var( --fluidcheckout--field--padding-left, remsize( 0.8rem ) ) !default;
$form-field-font-size:                                var( --fluidcheckout--field--font-size, remsize( 1.6rem ) ) !default;
$form-field-text-color:                               var( --fluidcheckout--field--text-color, inherit ) !default;
$form-field-text-color--accent:                       var( --fluidcheckout--field--text-color--accent, $white ) !default;
$form-field-background-color:                         var( --fluidcheckout--field--background-color, $white ) !default;
$form-field-background-color--focus:                  var( --fluidcheckout--field--background-color--focus, $form-field-background-color ) !default;
$form-field-background-color--accent:                 var( --fluidcheckout--field--background-color--accent, $grey ) !default;
$form-field-border-color:                             var( --fluidcheckout--field--border-color, $light-grey ) !default;
$form-field-box-shadow:                               var( --fluidcheckout--field--box-shadow, none ) !default;
$form-field-box-shadow--focus:                        var( --fluidcheckout--field--box-shadow--focus, $form-field-box-shadow ) !default;

$form-field-item-border-radius:                       var( --fluidcheckout--field-item--border-radius, $global-radius-extra-small ) !default;

$form-field-select2-inner-spacing:                    var( --fluidcheckout--select2--inner-spacing, remsize( .5rem ) ) !default;
$form-field-select2-inner-component-height:           var( --fluidcheckout--select2--inner-component-height, calc( #{ $form-field-height } - ( #{ $form-field-border-width } * 2 ) ) ) !default;
$form-field-select2-selection-height--single:         calc( #{ $form-field-height } - ( #{ $form-field-border-width } * 2 ) ) !default;
$form-field-select2-selection-height--multiple:       calc( #{ $form-field-height } - ( #{ $form-field-border-width } * 2 ) - ( #{ $form-field-select2-inner-spacing } * 2 ) ) !default;

$form-field-loader-icon-top:                          calc( ( #{ $form-field-height } / 2 ) - ( #{ $icon-size } / 2 ) ) !default;
$form-field-loader-icon-horizontal-spacing:           remsize( .5rem ) !default;

$checkout-message-error-icon:                         'i-alert-octagon' !default;
$checkout-message-error-icon-size:                    $icon-size-small !default;
$checkout-message-error-icon-position-top:            remsize( 1.6rem ) !default;
$checkout-message-error-icon-position-left:           $global-spacing-tiny !default;

$checkout-message-error-padding:                      $global-spacing-tiny $global-spacing-extra-small $global-spacing-tiny !default;
$checkout-message-error-padding-left:                 #{ $checkout-message-error-icon-position-left + $checkout-message-error-icon-size + $global-spacing-tiny } !default;
$checkout-message-error-color:                        $error-color !default;
$checkout-message-error-background-color:             $lighter-grey !default;
$checkout-message-error-font-size:                    $font-size-extra-small !default;
$checkout-message-error-font-size--large-screen:      $font-size-extra-small !default;

$checkout-message-suggestion-padding:                 $global-spacing-tiny $global-spacing-extra-small !default;

$checkout-message-success-color:                      $success-color !default;
$checkout-message-success-icon:                       'i-check-circle' !default;
$checkout-message-success-icon-size:                  $icon-size-small !default;
$checkout-message-success-icon-position-top:          remsize( 1.4rem ) !default;
$checkout-message-success-icon-position-left:         $global-spacing-tiny !default;

$checkout-field-group-margin:                         0 #{ - $global-spacing-small } #{ - $global-spacing-small } !default;
$checkout-field-group-margin--large-screen:           0 #{ - $global-spacing-small } #{ - $global-spacing-small } !default;
$checkout-field-group-padding:                        $global-spacing-small !default;
$checkout-field-group-padding--large-screen:          $global-spacing-small !default;

// END - FORM FIELDS
// ----------------------------------------





// ----------------------------------------
// CHECKOUT VALIDATION

$checkout-validation-check-top:                                calc( ( #{ $form-field-height } / 2 ) - ( #{ $icon-size } / 2 ) ) !default;
$checkout-validation-check-horizontal-spacing:                 var( --fluidcheckout--validation-check--horizontal-spacing, remsize( .5rem ) ) !default;
$checkout-validation-check-horizontal-spacing--select:         var( --fluidcheckout--validation-check--horizontal-spacing--select, remsize( 1.5rem ) ) !default;
$checkout-validation-check-horizontal-spacing--select-alt:     var( --fluidcheckout--validation-check--horizontal-spacing--select-alt, remsize( 2.5rem ) ) !default;
$checkout-validation-check-horizontal-spacing--password:       var( --fluidcheckout--validation-check--horizontal-spacing--password, remsize( 2.5rem ) ) !default;

// END - CHECKOUT VALIDATION
// ----------------------------------------
