@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; $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: 80% !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-extra-small: remsize( 1rem ) !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-medium': '\e807', 'i-chevron-down': '\e808', 'i-chevron-left-medium': '\e809', 'i-chevron-left': '\e80a', 'i-chevron-right-medium': '\e80b', 'i-chevron-right': '\e80c', 'i-chevron-up-medium': '\e80d', 'i-chevron-up': '\e80e', 'i-loader-circle': '\e816', 'i-minus': '\e818', 'i-plus': '\e81b', 'i-plus-circle': '\e82a', 'i-trash': '\e822', 'i-x': '\e827', 'i-x-circle': '\e815', ) !default; // END - ICONS // ---------------------------------------- // ---------------------------------------- // 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, #000 ) !default; $button-primary-background-color: var( --fluidcheckout--button--primary--background-color, #000 ) !default; $button-primary-text-color: var( --fluidcheckout--button--primary--text-color, #fff ) !default; $button-primary-border-color--hover: var( --fluidcheckout--button--primary--border-color--hover, #1E212B ) !default; $button-primary-background-color--hover: var( --fluidcheckout--button--primary--background-color--hover, #1E212B ) !default; $button-primary-text-color--hover: var( --fluidcheckout--button--primary--text-color--hover, #fff ) !default; $button-secondary-border-color: var( --fluidcheckout--button--secondary--border-color, #f3f3f3 ) !default; $button-secondary-background-color: var( --fluidcheckout--button--secondary--background-color, #f3f3f3 ) !default; $button-secondary-text-color: var( --fluidcheckout--button--secondary--text-color, #000 ) !default; $button-secondary-border-color--hover: var( --fluidcheckout--button--secondary--border-color--hover, #d8d8d8 ) !default; $button-secondary-background-color--hover: var( --fluidcheckout--button--secondary--background-color--hover, #d8d8d8 ) !default; $button-secondary-text-color--hover: var( --fluidcheckout--button--secondary--text-color--hover, #000 ) !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, $border-dark-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, $border-color ) !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; // 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-background-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; // 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: dashed remsize( .1rem ) var( --fluidcheckout--coupon-code--border-color, $border-color ) !default; $coupon-code-coupon-border-radius: $global-radius-small !default; $coupon-code-coupon-background-color: var( --fluidcheckout--coupon-code--background-color, transparent ) !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 // ---------------------------------------- // ---------------------------------------- // 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-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; $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 // ----------------------------------------