$image-path:                        'images' !default;

// colors
$gray-lighter:                      #f5f7fa !default;
$gray-light:                        #9b9b9b !default;
$gray:                              #707070 !default;
$gray-dark:                         #525252 !default;
$gray-medium:                       #ebebeb !default;
$gray-darker:                       #525252 !default;
$sand:                              #ebebeb !default;
$cool-white:                        #f8f8f8 !default;
$primary:                           $colorPrimary1 !default;
$secondary:                         $colorPrimary2 !default;
$success:                           $colorSuccessFont !default;
$bg-success:                        $colorSuccess !default;
$info:                              $colorInfoFont !default;
$bg-info:                           $colorInfo !default;
$warning:                           $colorWarningFont !default;
$bg-warning:                        $colorWarning !default;
$danger:                            $colorDangerFont !default;
$bg-danger:                         $colorDanger !default;
$bg-main:                           $colorContentBackground !default;
$bg-main-ligther:                   $colorContentBackground !default;

$white:                             #ffffff !default;
$black:                             #000000 !default;

$light:                             $colorNeutral1 !default;
$dark:                              $colorNeutral1 !default;

$gray-100:                          $gray-lighter !default;
$gray-500:                          $gray-light !default;
$gray-600:                          $gray !default;
$gray-700:                          $gray-dark !default;

$yiq-text-dark:                     $colorFontDark !default;
$yiq-text-light:                    $colorFontLight !default;

$bg-typeahead-fix:                  $colorContentBackground !important  !default;

$theme-colors				: ();
$theme-colors: map-merge((
        'gray'			: $gray,
        'gray-light'	: $gray-lighter,
        'gray-medium'	: $gray-medium,
        'gray-dark'		: $gray-light,
        'gray-darker'	: $gray-darker
), $theme-colors);

// spacer

$spacer: 1rem !default;
$spacers: (
        0:                                0,
        1:                                ($spacer * .25),
        2:                                ($spacer * .5),
        3:                                $spacer,
        4:                                ($spacer * 1.5),
        5:                                ($spacer * 2),
        6:                                ($spacer * 3),
        7:                                ($spacer * 4),
        8:                                ($spacer * 5)
) !default;

// grid
$grid-gutter-width:                 20px !default;

$grid-row-columns: 12 !default; // This is used to create row-cols-<breakpoint>-1 through -12 (Bootstrap standard is -1 through -6)

/* grid breakpoints */
$grid-breakpoints: (
        xs: 0,
        sm: 662px,
        md: 834px,
        lg: 1232px,
        xl: 1458px
) !default;

/* grid containers */
$container-max-widths: (
        // sm: 600px, // uncomment this if you want SM to behave like a regular breakpoint and not always grow
        md: 780px,
        lg: 1140px,
        xl: 1320px
) !default;


// Limit for the container-fluid width. Set to 100% to have them behave like default bootstrap fluid containers.
$container-fluid-max-width: 1920px;

// font

$line-height-base:                  1.5 !default;
$nova-theme-path:                   ".." !default;
$fa-font-path:                      "../webfonts" !default;
$fa-mixin-font-family:              "Font Awesome 5 Free" !default;
$fa-mixin-font-weight-regular:      400 !default;
$fa-mixin-font-weight-solid:        900 !default;
$font-family-sans-serif:            sans-serif !default;
$font-accent:                       inherit !default; // Font Family for accent fonts - as these are not per se defined in ET360v2, this is initially inherit

$font-size-base:                    rem(15px) !default;
$font-size-lg:                      rem(16px) !default;
$font-size-sm:                      rem(12px) !default;
$font-size-xs:                      rem(11px) !default;

$font-weight-lighter		: lighter !default;
$font-weight-light			: 300 !default;
$font-weight-normal			: 400 !default;
$font-weight-semibold		: 600 !default;
$font-weight-bold			: 700 !default;
$font-weight-bolder			: bolder !default;

// heading - default bootstrap classes
$h1-font-size:                      rem(25px) !default;
$h2-font-size:                      rem(22px) !default;
$h3-font-size:                      rem(18px) !default;
$h4-font-size:                      rem(16px) !default;
$h5-font-size:                      rem(16px) !default;
$h6-font-size:                      rem(16px) !default;

$headings-margin-bottom:            10px !default;
$headings-font-family:              sans-serif !default;
$headings-font-weight:              $font-weight-normal !default;
$headings-color:                    $colorFontDark !default;

// buttons

$btn-box-shadow:                    none !default;
$btn-active-box-shadow:             none !default;
$btn-focus-box-shadow:              none !default;
$btn-focus-width:                   0 !default;
$btn-decoration:                    none !default;
$btn-hover-decoration:              none !default;
$btn-font-weight:                   $font-weight-normal !default;

// transition

$transition-base-duration:          .2s !default;
$transition-base-timing:            ease-in-out !default;
$transition-base:                   all $transition-base-duration $transition-base-timing !default;
$transition-fade:                   opacity .35s linear !default;

// styles
$focus-border-color:                $colorPrimary1 !default;
$highlight-border-size:             .375rem !default;

$body-bg:                           $colorContentBackground !default;
$body-color:                        $colorFontDark !default;
$table-color:                       $body-color !default;

$copyright-bg-color:               $colorNeutral4 !default;
$footer-bg-color:                  $colorContentBackground !default;
$footer-color:                     $colorFontDark !default;
$header-bg-color:                  $colorContentBackground !default;
$header-color:                     $colorFontDark !default;

$headings-color:                    $colorFontDark !default;
$navbar-light-hover-color:          $colorPrimary1 !default;

$text-muted:                        $colorFontMuted !default;
$text-muted-header:                 $colorFontMuted !default;
$input-color-placeholder:           $colorFontMuted !default;

/* links */

$link-color:                        $colorLink !default;
$link-decoration:                   underline !default;
$link-hover-color:                  $colorLinkHover !default;
$link-hover-decoration:             none !default;

$border-radius:                     3px !default;
$border-radius-lg:                  $border-radius !default;
$border-radius-sm:                  $border-radius !default;

$border-width:                      1px !default;
$border-color:                      $colorPrimary2 !default;

$table-border-color:                $colorNeutral5;

/* cards */

$card-border-color:                 $colorNeutral1 !default;
$card-cap-bg:                       $colorNeutral1 !default;
$card-bg:                           $colorContentBackground !default;

$searchcloud-font-size-scaling:     30% !default;
$navbar-light-color:                $colorNeutral5 !default;

$input-bg:                          $colorContentBackground !default;
$input-focus-border-color:          $colorPrimary2 !default;
$input-focus-box-shadow:            none !default;
$list-group-bg:                     $colorContentBackground !default;
$list-group-disabled-bg:            $colorContentBackground !default;

$progress-bar-color:                $colorPrimary1 !default;
$progress-border-radius:            0 !default;
$progress-bar-transition:           width .1s ease !default;
$progress-height:                   10px !default;

/* tables */

$table-accent-bg:                   $colorNeutral1 !default;
$table-hover-bg:                    $colorNeutral1 !default;
$table-hover-color:                 et-color-yiq($colorNeutral1, $colorFontDark, $colorFontLight) !default;

$table-cell-padding:                (map-get($spacers, 1) * 3) !default;
$table-cell-padding-x:              $spacer !default;
$table-cell-padding-y:              (map-get($spacers, 1) * 3) !default;
$table-cell-padding-sm:             map-get($spacers, 2) $spacer !default;

$table-striped-order:               even !default;

$sizes: (
  20:                               20%,
  40:                               40%,
  60:                               60%,
  80:                               80%
) !default;

// paths

$url-0:                             url(../../images/loading.gif) !default;
$url-1:                             url(../../images/loading-sm.gif) !default;

// tooltips

$tooltip-font-size:                 $font-size-sm !default;
$tooltip-color:                     $colorNeutral1 !default;
$tooltip-border-color:              $colorNeutral1 !default;
$tooltip-bg:                        $colorContentBackground !default;
$tooltip-border-radius:             $border-radius !default;
$tooltip-arrow-color:               $colorNeutral1 !default;
$tooltip-arrow-inner-color:         $colorContentBackground !default;
$tooltip-border-width:              $border-width !default;

$tooltip-arrow-inner-width:         .8rem !default;
$tooltip-arrow-inner-height:        .4rem !default;
$tooltip-arrow-width:               .88rem !default;
$tooltip-arrow-height:              .45rem !default;

$tooltip-margin:                    .5rem !default;

// input

$border-width:                      1px !default;
$input-btn-padding-y:               rem(10px) !default;
$input-btn-padding-x:               rem(15px) !default;
$input-btn-padding-y-sm:            rem(6px) !default;
$input-btn-font-size-sm:            $font-size-base !default;

$input-height:                      calc(#{$line-height-base * 1em} + #{$input-btn-padding-y * 2} + #{$border-width * 2}) !default;
$input-border-color:                $colorNeutral5 !default;
$input-border-width:                1px !default;
$custom-select-indicator-padding:   rem(30px) !default;
$custom-select-indicator-color:     $white !default;
$custom-select-indicator-bg:        $input-border-color !default;
$custom-select-indicator:           str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='#{$input-border-color}' x='0px' y='0px' style='enable-background:new 0 0 32 32;' xml:space='preserve'%3E%3Cpolygon  points='16,18.2 11.8,14.6 12.4,13.8 16,16.8 19.6,13.8 20.2,14.6 '/%3E%3C/svg%3E"), "#", "%23") !default;
$custom-select-invalid-indicator:   str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32.1 32'%3E%3Crect fill='#{$danger}' width='32.1' height='32'/%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M20.4,15l-4.2,4.2c-0.1,0.1-0.1,0.1-0.2,0.1s-0.2,0-0.2-0.1L11.7,15c-0.1-0.1-0.1-0.1-0.1-0.2s0-0.2,0.1-0.2l0.4-0.4c0.1-0.1,0.1-0.1,0.2-0.1c0.1,0,0.2,0,0.2,0.1l3.5,3.5l3.5-3.5c0.1-0.1,0.1-0.1,0.2-0.1s0.2,0,0.2,0.1l0.4,0.4c0.1,0.1,0.1,0.1,0.1,0.2S20.5,14.9,20.4,15z'/%3E%3C/svg%3E"), "#", "%23") !default;
$custom-select-valid-indicator:     str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32.1 32'%3E%3Crect fill='#{$success}' width='32.1' height='32'/%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M20.4,15l-4.2,4.2c-0.1,0.1-0.1,0.1-0.2,0.1s-0.2,0-0.2-0.1L11.7,15c-0.1-0.1-0.1-0.1-0.1-0.2s0-0.2,0.1-0.2l0.4-0.4c0.1-0.1,0.1-0.1,0.2-0.1c0.1,0,0.2,0,0.2,0.1l3.5,3.5l3.5-3.5c0.1-0.1,0.1-0.1,0.2-0.1s0.2,0,0.2,0.1l0.4,0.4c0.1,0.1,0.1,0.1,0.1,0.2S20.5,14.9,20.4,15z'/%3E%3C/svg%3E"), "#", "%23") !default;
$custom-select-background:          $custom-select-indicator no-repeat right center / auto 100% !default;
$custom-select-box-shadow:          none !default;

// pagination

$pagination-border-width:           0 !default;
$pagination-bg:                     transparent !default;
$pagination-color:                  $colorLink !default;

$pagination-hover-bg:               transparent !default;
$pagination-hover-color:            $colorLinkHover !default;

$pagination-active-bg:              transparent !default;
$pagination-active-color:           $colorLinkActive !default;

$pagination-focus-box-shadow:       none !default;

$pagination-disabled-color:         $colorFontMuted !default;
$pagination-disabled-bg:            transparent !default;
$pagination-disabled-border-color:  $colorFontMuted !default;

/* breadcrumbs */

$breadcrumb-padding-y:              map-get($spacers, 2) !default;
$breadcrumb-padding-x:              0 !default;

$breadcrumb-bg:                     transparent !default;
$breadcrumb-divider-color:          $colorLink !default;
$breadcrumb-active-color:           $colorLinkActive !default;

$breadcrumb-border-radius:          0 !default;
$breadcrumb-margin-bottom:          0 !default;

$tap-target-size:                   44px !default;
$tap-target-size-sm:                36px !default;

//BESTSELLER, 1
//SPECIALOFFERS, 2
//NEWPRODUCTS, 3
//TOPOFFERS, 4
//UPCOMINGPRODUCTS, 5
//TOPREVIEWS, 6
//OUTOFSTOCK, 7
//ONSTOCK, 8
//PREORDER, 9
$ribbon-colors				: ();
$ribbon-colors: map-merge((
        '1' : $colorRibbonFont1,
        '2' : $colorRibbonFont2,
        '3' : $colorRibbonFont3,
        '4' : $colorRibbonFont4,
        '5' : $colorRibbonFont5,
        '6' : $colorRibbonFont6,
        '7' : $colorRibbonFont7,
        '8' : $colorRibbonFont8,
        '9' : $colorRibbonFont9
), $ribbon-colors);

$ribbon-bg-colors				: ();
$ribbon-bg-colors: map-merge((
        '1' : $colorRibbon1,
        '2' : $colorRibbon2,
        '3' : $colorRibbon3,
        '4' : $colorRibbon4,
        '5' : $colorRibbon5,
        '6' : $colorRibbon6,
        '7' : $colorRibbon7,
        '8' : $colorRibbon8,
        '9' : $colorRibbon9
), $ribbon-bg-colors);

/* navs */

$nav-tabs-border-radius					: 0 !default;

$nav-tabs-link-hover-border-color		: transparent !default;
$nav-tabs-link-active-color				: $colorLinkActive !default;
$nav-tabs-link-active-bg				: transparent !default;
$nav-tabs-link-active-border-color		: $colorLinkActive !default;

$navbar-nav-link-padding-x: map-get($spacers, 4) !default;
$navbar-nav-link-padding-y: map-get($spacers, 4) !default;
$nav-link-padding-x       : 1rem !default;
$navbar-padding-y         : .4rem !default;
$navbar-padding-y-lg      : .6rem !default;
$navbar-image-height      : 2rem !default;
$navbar-image-height-lg   : rem(49px) !default;

/* modals */

$modal-inner-padding			: $spacer 0 !default;

$modal-content-padding			: $spacer map-get($spacers, 5) !default;
$modal-content-padding-sm   	: $spacer !default;
$modal-content-border-width		: 0 !default;
$modal-content-box-shadow-sm-up	: 0 0 rem(10px) $colorBoxShadow !default;
$modal-content-border-radius	: $border-radius !default;

$modal-header-border-width		: $border-width !default;
$modal-header-padding-y			: map-get($spacers, 2) !default;
$modal-header-padding-x			: 0 !default;

$modal-backdrop-opacity			: .8 !default;

$modal-md: 700px !default;

/* progress */

$progress-bg				: $colorPrimary2 !default;
$progress-box-shadow		: none !default;

/* options */

$enable-caret				: false !default;
$enable-shadows				: true !default;

/* dropdowns */

$dropdown-box-shadow		: 0 rem(1px) rem(12px) $colorBoxShadow !default;
$dropdown-border-width		: 0 !default;
$dropdown-border-radius		: $border-radius !default;

$dropdown-link-bg-color	    : transparent;

$dropdown-link-color		: inherit !default;
$dropdown-link-hover-color	: $colorLinkHover !default;
$dropdown-link-hover-bg		: $colorContentBackground !default;

$dropdown-link-active-color	: $colorLinkActive !default;
$dropdown-link-active-bg	: $colorContentBackground !default;

$dropdown-padding-y         : 0 !default;


// ET360 Font Fallback
$fallbackFontFamily: sans-serif !default; // used while loading fonts.

// Custom Controls
$component-active-color:     $colorFontLight !default;
$component-active-bg:        $colorFontDark !default;

/* ET360v2 specific variables */

// Boxed content variables
$et-boxed-content-bg: $colorNeutral3 !default;
$et-boxed-content-color: et-color-yiq($colorNeutral3, $colorFontDark, $colorFontLight) !default;
$et-boxed-content-color-muted: et-a11y-color($colorFontMuted, $colorNeutral3);
$et-boxed-content-border: initial !default;
$et-boxed-content-border-radius: $border-radius !default;

$et-boxed-content-margin-bottom: $grid-gutter-width !default;
$et-boxed-content-margin-bottom-xs: $et-boxed-content-margin-bottom !default;
$et-boxed-content-margin-bottom-sm: $et-boxed-content-margin-bottom !default;
$et-boxed-content-margin-bottom-md: $et-boxed-content-margin-bottom !default;
$et-boxed-content-margin-bottom-lg: $et-boxed-content-margin-bottom !default;
$et-boxed-content-margin-bottom-xl: $et-boxed-content-margin-bottom !default;

$et-boxed-content-padding: rem(30px) !default;
$et-boxed-content-padding-xs: $et-boxed-content-padding !default;
$et-boxed-content-padding-sm: $et-boxed-content-padding !default;
$et-boxed-content-padding-md: $et-boxed-content-padding !default;
$et-boxed-content-padding-lg: $et-boxed-content-padding !default;
$et-boxed-content-padding-xl: $et-boxed-content-padding !default;

$et-wcag-touch-target-min-height: 24px !default;

$etImportForCrit: false !default;

@if $etImportForCrit == true {
  :root {
    --grid-gutter-width: #{$grid-gutter-width};
    --et-var-image-path: #{$image-path};
    --et-var-gray-lighter: #{$gray-lighter};
    --et-var-gray-light: #{$gray-light};
    --et-var-gray: #{$gray};
    --et-var-gray-dark: #{$gray-dark};
    --et-var-gray-medium: #{$gray-medium};
    --et-var-gray-darker: #{$gray-darker};
    --et-var-sand: #{$sand};
    --et-var-cool-white: #{$cool-white};
    --et-var-primary: #{$primary};
    --et-var-secondary: #{$secondary};
    --et-var-success: #{$success};
    --et-var-bg-success: #{$bg-success};
    --et-var-info: #{$info};
    --et-var-bg-info: #{$bg-info};
    --et-var-warning: #{$warning};
    --et-var-bg-warning: #{$bg-warning};
    --et-var-danger: #{$danger};
    --et-var-bg-danger: #{$bg-danger};
    --et-var-bg-main: #{$bg-main};
    --et-var-bg-main-ligther: #{$bg-main-ligther};
    --et-var-white: #{$white};
    --et-var-black: #{$black};
    --et-var-light: #{$light};
    --et-var-dark: #{$dark};
    --et-var-gray-100: #{$gray-100};
    --et-var-gray-500: #{$gray-500};
    --et-var-gray-600: #{$gray-600};
    --et-var-gray-700: #{$gray-700};
    --et-var-yiq-text-dark: #{$yiq-text-dark};
    --et-var-yiq-text-light: #{$yiq-text-light};
    --et-var-bg-typeahead-fix: #{$bg-typeahead-fix};
    --et-var-theme-color-gray: #{map-get($theme-colors, gray)};
    --et-var-theme-color-gray-light: #{map-get($theme-colors, gray-light)};
    --et-var-theme-color-gray-medium: #{map-get($theme-colors, gray-medium)};
    --et-var-theme-color-gray-dark: #{map-get($theme-colors, gray-dark)};
    --et-var-theme-color-gray-darker: #{map-get($theme-colors, gray-darker)};
    --et-var-spacers-0: #{map-get($spacers, 0)};
    --et-var-spacers-1: #{map-get($spacers, 1)};
    --et-var-spacers-2: #{map-get($spacers, 2)};
    --et-var-spacers-3: #{map-get($spacers, 3)};
    --et-var-spacers-4: #{map-get($spacers, 4)};
    --et-var-spacers-5: #{map-get($spacers, 5)};
    --et-var-spacers-6: #{map-get($spacers, 6)};
    --et-var-spacers-7: #{map-get($spacers, 7)};
    --et-var-spacers-8: #{map-get($spacers, 8)};
    --et-var-grid-gutter-width: #{$grid-gutter-width};
    --et-var-grid-row-columns: #{$grid-row-columns};
    --et-var-grid-breakpoints-xs: #{map-get($grid-breakpoints, xs)};
    --et-var-grid-breakpoints-sm: #{map-get($grid-breakpoints, sm)};
    --et-var-grid-breakpoints-md: #{map-get($grid-breakpoints, md)};
    --et-var-grid-breakpoints-lg: #{map-get($grid-breakpoints, lg)};
    --et-var-grid-breakpoints-xl: #{map-get($grid-breakpoints, xl)};
    --et-var-container-max-widths-md: #{map-get($container-max-widths, md)};
    --et-var-container-max-widths-lg: #{map-get($container-max-widths, lg)};
    --et-var-container-max-widths-xl: #{map-get($container-max-widths, xl)};
    --et-var-container-fluid-max-width: #{$container-fluid-max-width};
    --et-var-line-height-base: #{$line-height-base};
    --et-var-fa-font-path: "#{$fa-font-path}";
    --et-var-fa-mixin-font-family: "#{$fa-mixin-font-family}";
    --et-var-fa-mixin-font-weight-regular: #{$fa-mixin-font-weight-regular};
    --et-var-fa-mixin-font-weight-solid: #{$fa-mixin-font-weight-solid};
    --et-var-font-family-sans-serif: #{$font-family-sans-serif};
    --et-var-font-accent: #{$font-accent};
    --et-var-font-size-base: #{$font-size-base};
    --et-var-font-size-lg: #{$font-size-lg};
    --et-var-font-size-sm: #{$font-size-sm};
    --et-var-font-size-xs: #{$font-size-xs};
    --et-var-font-weight-lighter: #{$font-weight-lighter};
    --et-var-font-weight-light: #{$font-weight-light};
    --et-var-font-weight-normal: #{$font-weight-normal};
    --et-var-font-weight-semibold: #{$font-weight-semibold};
    --et-var-font-weight-bold: #{$font-weight-bold};
    --et-var-font-weight-bolder: #{$font-weight-bolder};
    --et-var-h1-font-size: #{$h1-font-size};
    --et-var-h2-font-size: #{$h2-font-size};
    --et-var-h3-font-size: #{$h3-font-size};
    --et-var-h4-font-size: #{$h4-font-size};
    --et-var-h5-font-size: #{$h5-font-size};
    --et-var-h6-font-size: #{$h6-font-size};
    --et-var-headings-margin-bottom: #{$headings-margin-bottom};
    --et-var-headings-font-family: #{$headings-font-family};
    --et-var-headings-font-weight: #{$headings-font-weight};
    --et-var-headings-color: #{$headings-color};
    --et-var-btn-box-shadow: #{$btn-box-shadow};
    --et-var-btn-active-box-shadow: #{$btn-active-box-shadow};
    --et-var-btn-focus-box-shadow: #{$btn-focus-box-shadow};
    --et-var-btn-focus-width: #{$btn-focus-width};
    --et-var-btn-decoration: #{$btn-decoration};
    --et-var-btn-hover-decoration: #{$btn-hover-decoration};
    --et-var-btn-font-weight: #{$btn-font-weight};
    --et-var-transition-base-duration: #{$transition-base-duration};
    --et-var-transition-base-timing: #{$transition-base-timing};
    --et-var-transition-base: #{$transition-base};
    --et-var-transition-fade: #{$transition-fade};
    --et-var-focus-border-color: #{$focus-border-color};
    --et-var-highlight-border-size: #{$highlight-border-size};
    --et-var-body-bg: #{$body-bg};
    --et-var-body-color: #{$body-color};
    --et-var-table-color: #{$table-color};
    --et-var-copyright-bg-color: #{$copyright-bg-color};
    --et-var-footer-bg-color: #{$footer-bg-color};
    --et-var-footer-color: #{$footer-color};
    --et-var-header-bg-color: #{$header-bg-color};
    --et-var-header-color: #{$header-color};
    --et-var-navbar-light-hover-color: #{$navbar-light-hover-color};
    --et-var-text-muted: #{$text-muted};
    --et-var-text-muted-header: #{$text-muted-header};
    --et-var-input-color-placeholder: #{$input-color-placeholder};
    --et-var-link-color: #{$link-color};
    --et-var-link-decoration: #{$link-decoration};
    --et-var-link-hover-color: #{$link-hover-color};
    --et-var-link-hover-decoration: #{$link-hover-decoration};
    --et-var-border-radius: #{$border-radius};
    --et-var-border-radius-lg: #{$border-radius-lg};
    --et-var-border-radius-sm: #{$border-radius-sm};
    --et-var-border-width: #{$border-width};
    --et-var-border-color: #{$border-color};
    --et-var-table-border-color: #{$table-border-color};
    --et-var-card-border-color: #{$card-border-color};
    --et-var-card-cap-bg: #{$card-cap-bg};
    --et-var-card-bg: #{$card-bg};
    --et-var-searchcloud-font-size-scaling: #{$searchcloud-font-size-scaling};
    --et-var-navbar-light-color: #{$navbar-light-color};
    --et-var-input-bg: #{$input-bg};
    --et-var-input-focus-border-color: #{$input-focus-border-color};
    --et-var-input-focus-box-shadow: #{$input-focus-box-shadow};
    --et-var-list-group-bg: #{$list-group-bg};
    --et-var-list-group-disabled-bg: #{$list-group-disabled-bg};
    --et-var-progress-bar-color: #{$progress-bar-color};
    --et-var-progress-border-radius: #{$progress-border-radius};
    --et-var-progress-bar-transition: #{$progress-bar-transition};
    --et-var-progress-height: #{$progress-height};
    --et-var-table-accent-bg: #{$table-accent-bg};
    --et-var-table-hover-bg: #{$table-hover-bg};
    --et-var-table-hover-color: #{$table-hover-color};
    --et-var-table-cell-padding: #{$table-cell-padding};
    --et-var-table-cell-padding-x: #{$table-cell-padding-x};
    --et-var-table-cell-padding-y: #{$table-cell-padding-y};
    --et-var-table-cell-padding-sm: #{$table-cell-padding-sm};
    --et-var-table-striped-order: #{$table-striped-order};
    --et-var-sizes-20: #{map-get($sizes, 20)};
    --et-var-sizes-40: #{map-get($sizes, 40)};
    --et-var-sizes-60: #{map-get($sizes, 60)};
    --et-var-sizes-80: #{map-get($sizes, 80)};
    --et-var-url-0: #{$url-0};
    --et-var-url-1: #{$url-1};
    --et-var-tooltip-font-size: #{$tooltip-font-size};
    --et-var-tooltip-color: #{$tooltip-color};
    --et-var-tooltip-border-color: #{$tooltip-border-color};
    --et-var-tooltip-bg: #{$tooltip-bg};
    --et-var-tooltip-border-radius: #{$tooltip-border-radius};
    --et-var-tooltip-arrow-color: #{$tooltip-arrow-color};
    --et-var-tooltip-arrow-inner-color: #{$tooltip-arrow-inner-color};
    --et-var-tooltip-border-width: #{$tooltip-border-width};
    --et-var-tooltip-arrow-inner-width: #{$tooltip-arrow-inner-width};
    --et-var-tooltip-arrow-inner-height: #{$tooltip-arrow-inner-height};
    --et-var-tooltip-arrow-width: #{$tooltip-arrow-width};
    --et-var-tooltip-arrow-height: #{$tooltip-arrow-height};
    --et-var-tooltip-margin: #{$tooltip-margin};
    --et-var-input-btn-padding-y: #{$input-btn-padding-y};
    --et-var-input-btn-padding-x: #{$input-btn-padding-x};
    --et-var-input-btn-padding-y-sm: #{$input-btn-padding-y-sm};
    --et-var-input-btn-font-size-sm: #{$input-btn-font-size-sm};
    --et-var-input-height: #{$input-height};
    --et-var-input-border-color: #{$input-border-color};
    --et-var-input-border-width: #{$input-border-width};
    --et-var-custom-select-indicator-padding: #{$custom-select-indicator-padding};
    --et-var-custom-select-indicator-color: #{$custom-select-indicator-color};
    --et-var-custom-select-indicator-bg: #{$custom-select-indicator-bg};
    --et-var-custom-select-indicator: #{$custom-select-indicator};
    --et-var-custom-select-invalid-indicator: #{$custom-select-invalid-indicator};
    --et-var-custom-select-valid-indicator: #{$custom-select-valid-indicator};
    --et-var-custom-select-background: #{$custom-select-background};
    --et-var-custom-select-box-shadow: #{$custom-select-box-shadow};
    --et-var-pagination-border-width: #{$pagination-border-width};
    --et-var-pagination-bg: #{$pagination-bg};
    --et-var-pagination-color: #{$pagination-color};
    --et-var-pagination-hover-bg: #{$pagination-hover-bg};
    --et-var-pagination-hover-color: #{$pagination-hover-color};
    --et-var-pagination-active-bg: #{$pagination-active-bg};
    --et-var-pagination-active-color: #{$pagination-active-color};
    --et-var-pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
    --et-var-pagination-disabled-color: #{$pagination-disabled-color};
    --et-var-pagination-disabled-bg: #{$pagination-disabled-bg};
    --et-var-pagination-disabled-border-color: #{$pagination-disabled-border-color};
    --et-var-breadcrumb-padding-y: #{$breadcrumb-padding-y};
    --et-var-breadcrumb-padding-x: #{$breadcrumb-padding-x};
    --et-var-breadcrumb-bg: #{$breadcrumb-bg};
    --et-var-breadcrumb-divider-color: #{$breadcrumb-divider-color};
    --et-var-breadcrumb-active-color: #{$breadcrumb-active-color};
    --et-var-breadcrumb-border-radius: #{$breadcrumb-border-radius};
    --et-var-breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
    --et-var-tap-target-size: #{$tap-target-size};
    --et-var-tap-target-size-sm: #{$tap-target-size-sm};
    --et-var-ribbon-colors-1: #{map-get($ribbon-colors, '1')};
    --et-var-ribbon-colors-2: #{map-get($ribbon-colors, '2')};
    --et-var-ribbon-colors-3: #{map-get($ribbon-colors, '3')};
    --et-var-ribbon-colors-4: #{map-get($ribbon-colors, '4')};
    --et-var-ribbon-colors-5: #{map-get($ribbon-colors, '5')};
    --et-var-ribbon-colors-6: #{map-get($ribbon-colors, '6')};
    --et-var-ribbon-colors-7: #{map-get($ribbon-colors, '7')};
    --et-var-ribbon-colors-8: #{map-get($ribbon-colors, '8')};
    --et-var-ribbon-colors-9: #{map-get($ribbon-colors, '9')};
    --et-var-ribbon-bg-colors-1: #{map-get($ribbon-bg-colors, '1')};
    --et-var-ribbon-bg-colors-2: #{map-get($ribbon-bg-colors, '2')};
    --et-var-ribbon-bg-colors-3: #{map-get($ribbon-bg-colors, '3')};
    --et-var-ribbon-bg-colors-4: #{map-get($ribbon-bg-colors, '4')};
    --et-var-ribbon-bg-colors-5: #{map-get($ribbon-bg-colors, '5')};
    --et-var-ribbon-bg-colors-6: #{map-get($ribbon-bg-colors, '6')};
    --et-var-ribbon-bg-colors-7: #{map-get($ribbon-bg-colors, '7')};
    --et-var-ribbon-bg-colors-8: #{map-get($ribbon-bg-colors, '8')};
    --et-var-ribbon-bg-colors-9: #{map-get($ribbon-bg-colors, '9')};
    --et-var-nav-tabs-border-radius: #{$nav-tabs-border-radius};
    --et-var-nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
    --et-var-nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
    --et-var-nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
    --et-var-nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
    --et-var-navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
    --et-var-navbar-nav-link-padding-y: #{$navbar-nav-link-padding-y};
    --et-var-nav-link-padding-x: #{$nav-link-padding-x};
    --et-var-navbar-padding-y: #{$navbar-padding-y};
    --et-var-navbar-padding-y-lg: #{$navbar-padding-y-lg};
    --et-var-navbar-image-height: #{$navbar-image-height};
    --et-var-navbar-image-height-lg: #{$navbar-image-height-lg};
    --et-var-modal-inner-padding: #{$modal-inner-padding};
    --et-var-modal-content-padding: #{$modal-content-padding};
    --et-var-modal-content-padding-sm: #{$modal-content-padding-sm};
    --et-var-modal-content-border-width: #{$modal-content-border-width};
    --et-var-modal-content-box-shadow-sm-up: #{$modal-content-box-shadow-sm-up};
    --et-var-modal-content-border-radius: #{$modal-content-border-radius};
    --et-var-modal-header-border-width: #{$modal-header-border-width};
    --et-var-modal-header-padding-y: #{$modal-header-padding-y};
    --et-var-modal-header-padding-x: #{$modal-header-padding-x};
    --et-var-modal-backdrop-opacity: #{$modal-backdrop-opacity};
    --et-var-modal-md: #{$modal-md};
    --et-var-progress-bg: #{$progress-bg};
    --et-var-progress-box-shadow: #{$progress-box-shadow};
    --et-var-enable-caret: #{$enable-caret};
    --et-var-enable-shadows: #{$enable-shadows};
    --et-var-dropdown-box-shadow: #{$dropdown-box-shadow};
    --et-var-dropdown-border-width: #{$dropdown-border-width};
    --et-var-dropdown-border-radius: #{$dropdown-border-radius};
    --et-var-dropdown-link-bg-color: #{$dropdown-link-bg-color};
    --et-var-dropdown-link-color: #{$dropdown-link-color};
    --et-var-dropdown-link-hover-color: #{$dropdown-link-hover-color};
    --et-var-dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
    --et-var-dropdown-link-active-color: #{$dropdown-link-active-color};
    --et-var-dropdown-link-active-bg: #{$dropdown-link-active-bg};
    --et-var-dropdown-padding-y: #{$dropdown-padding-y};
    --et-var-fallbackFontFamily: #{$fallbackFontFamily};
    --et-var-component-active-color: #{$component-active-color};
    --et-var-component-active-bg: #{$component-active-bg};
    --et-var-et-boxed-content-bg: #{$et-boxed-content-bg};
    --et-var-et-boxed-content-color: #{$et-boxed-content-color};
    --et-var-et-boxed-content-border: #{$et-boxed-content-border};
    --et-var-et-boxed-content-border-radius: #{$et-boxed-content-border-radius};
    --et-var-et-boxed-content-margin-bottom: #{$et-boxed-content-margin-bottom};
    --et-var-et-boxed-content-margin-bottom-xs: #{$et-boxed-content-margin-bottom-xs};
    --et-var-et-boxed-content-margin-bottom-sm: #{$et-boxed-content-margin-bottom-sm};
    --et-var-et-boxed-content-margin-bottom-md: #{$et-boxed-content-margin-bottom-md};
    --et-var-et-boxed-content-margin-bottom-lg: #{$et-boxed-content-margin-bottom-lg};
    --et-var-et-boxed-content-margin-bottom-xl: #{$et-boxed-content-margin-bottom-xl};
    --et-var-et-boxed-content-padding: #{$et-boxed-content-padding};
    --et-var-et-boxed-content-padding-xs: #{$et-boxed-content-padding-xs};
    --et-var-et-boxed-content-padding-sm: #{$et-boxed-content-padding-sm};
    --et-var-et-boxed-content-padding-md: #{$et-boxed-content-padding-md};
    --et-var-et-boxed-content-padding-lg: #{$et-boxed-content-padding-lg};
    --et-var-et-boxed-content-padding-xl: #{$et-boxed-content-padding-xl};
    --et-var-wcag-touch-target-min-height: #{$et-wcag-touch-target-min-height};
  }
}