// Colors
@import './colors';

// Options
$enable-caret:                true;
$enable-rounded:              true;
$enable-shadows:              true;
$enable-gradients:            false;
$enable-transitions:          true;
$enable-reduced-motion:       true;
$enable-smooth-scroll:        true;
$enable-grid-classes:         true;
$enable-cssgrid:              true;
$enable-button-pointers:      true;
$enable-rfs:                  true;
$enable-validation-icons:     true;
$enable-negative-margins:     true;
$enable-deprecation-messages: false;
$enable-important-utilities:  true;
$enable-gradient-utilities:   true;

// Prefix for :root CSS variables
$prefix:                x- !default;

// Spacing
$spacer: 1rem;
$spacers: (
  0: 0,
  0\.5: $spacer * 0.125,
  1: $spacer * 0.25,
  1\.5: $spacer * 0.375,
  2: $spacer * 0.5,
  3: $spacer * 0.75,
  4: $spacer,
  5: $spacer * 1.25,
  6: $spacer * 1.5,
  7: $spacer * 1.75,
  8: $spacer * 2,
  10: $spacer * 2.5,
  12: $spacer * 3,
  14: $spacer * 3.5,
  16: $spacer * 4,
  18: $spacer * 4.5,
  20: $spacer * 5,
  24: $spacer * 6,
  32: $spacer * 8,
  40: $spacer * 10,
  48: $spacer * 12,
  56: $spacer * 14,
  64: $spacer * 16,
  72: $spacer * 18,
  80: $spacer * 20,
  88: $spacer * 22,
  96: $spacer * 24,
  px: 1px,
  base: $spacer
) !default;

// Sizing
// This variable affects the `.w-*`, `.min-w-*`, `.mw-*` classes.
$percentage-sizers: (
  25: 25%,
  50: 50%,
  75: 75%,
  80: 80%,
  90: 90%,
  100: 100%
);

// This variable affects the `.w-screen-*`, `.max-w-screen-*` classes.
$screen-width-sm:   640px;
$screen-width-md:   768px;
$screen-width-lg:   1024px;
$screen-width-xl:   1280px;
$screen-width-xxl:  1536px;

// Screen widths
$screen-widths: (
  screen-sm: $screen-width-sm,
  screen-md: $screen-width-md,
  screen-lg: $screen-width-lg,
  screen-xl: $screen-width-xl,
  screen-xxl: $screen-width-xxl
);

// Container widths
$container-width-xs: 20rem;
$container-width-sm: 24rem;
$container-width-md: 28rem;
$container-width-lg: 32rem;
$container-width-xl: 36rem;
$container-width-2xl: 42rem;
$container-width-3xl: 48rem;
$container-width-4xl: 56rem;
$container-width-5xl: 64rem;
$container-width-6xl: 72rem;
$container-width-7xl: 80rem;

$container-widths: (
  xs: $container-width-xs,
  sm: $container-width-sm,
  md: $container-width-md,
  lg: $container-width-lg,
  xl: $container-width-xl,
  2xl: $container-width-2xl,
  3xl: $container-width-3xl,
  4xl: $container-width-4xl,
  5xl: $container-width-5xl,
  6xl: $container-width-6xl,
  7xl: $container-width-7xl,
);

// Contrast ratio
$min-contrast-ratio:    3 !default;

// Customize the light and dark text colors for use in our color contrast function.
$color-contrast-dark:   $black !default;
$color-contrast-light:  $white !default;

// Body
$body-color:            $gray-600 !default;
$body-bg:               $white !default;

$body-secondary-color:  rgba($body-color, .75) !default;
$body-secondary-bg:     $gray-100 !default;

$body-tertiary-color:   rgba($body-color, .5) !default;
$body-tertiary-bg:      $gray-50 !default;

$body-emphasis-color:   $gray-900 !default;

// Accent
// Background and text colors used for adding interactions on elements
$accent-bg:             $gray-100 !default;
$accent-color:          $gray-800 !default;

// Links
$link-color:            $primary;
$link-decoration:       none;
$link-hover-color:      shade-color($link-color, 15%);
$link-hover-decoration: none;

// Border
$border-width:                1px !default;
$border-color:                $gray-200 !default;
$border-color-translucent:    color-mix(in srgb, $gray-200 70%, transparent) !default;

// Border radius
$border-radius-xs:            0.375rem !default;
$border-radius-sm:            0.5rem !default;
$border-radius:               0.75rem !default;
$border-radius-lg:            1rem !default;
$border-radius-xl:            1.5rem !default;
$border-radius-xxl:           2rem !default;

$border-radius-pill:          50rem !default;
$border-radius-circle:        50% !default;

// Box shadow

// added in wpx
$box-shadow-1:                0 1px 2px 0 rgb(0 0 0 / 0.05) !default;
$box-shadow-2:                0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !default;
$box-shadow-3:                0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !default;
$box-shadow-4:                0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !default;
$box-shadow-5:                0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !default;
$box-shadow-6:                0 25px 50px -12px rgb(0 0 0 / 0.25) !default;

$box-shadow-soft-1:           0px 1px 1px 0px rgba(10 22 70 / 4%) !default;
$box-shadow-soft-2:           0px 3px 3px -1px rgba(10 22 70 / 4%) !default;
$box-shadow-soft-3:              0px 6px 6px -1px rgba(10 22 70 / 4%) !default;
$box-shadow-soft-4:           0px 9px 9px -1px rgba(10 22 70 / 4%) !default;
$box-shadow-soft-5:           0px 16px 16px -1px rgba(10 22 70 / 4%) !default;
$box-shadow-soft-6:           0px 32px 40px -2px rgba(10 22 70 / 4%) !default;

$box-shadow-elevated-1:       rgba(41,41,41,.04) 0px 1px 1px 0.5px, rgba(41,41,41,.02) 0px 3px 3px -1.5px, rgba(41,41,41,.04) 0px 6px 6px -3px, rgba(41,41,41,.04) 0px 0px 0px 1px, rgba(51,51,51,.06) 0px -1px 1px -0.5px inset !default;
$box-shadow-elevated-2:       rgba(41,41,41,.04) 0px 1px 1px 0.5px, rgba(41,41,41,.02) 0px 3px 3px -1.5px, rgba(41,41,41,.04) 0px 6px 6px -3px, rgba(41,41,41,.04) 0px 12px 12px -6px, rgba(41,41,41,.04) 0px 0px 0px 1px, rgba(51,51,51,.06) 0px -1px 1px -0.5px inset !default;
$box-shadow-elevated-3:       rgba(41,41,41,.04) 0px 1px 1px 0.5px, rgba(41,41,41,.02) 0px 3px 3px -1.5px, rgba(41,41,41,.04) 0px 6px 6px -3px, rgba(41,41,41,.04) 0px 12px 12px -6px, rgba(41,41,41,.04) 0px 24px 24px -12px, rgba(41,41,41,.04) 0px 0px 0px 1px, rgba(51,51,51,.06) 0px -1px 1px -0.5px inset !default;
$box-shadow-elevated-4:       rgba(41,41,41,.04) 0px 1px 1px 0.5px, rgba(41,41,41,.02) 0px 3px 3px -1.5px, rgba(41,41,41,.04) 0px 6px 6px -3px, rgba(41,41,41,.04) 0px 12px 12px -6px, rgba(41,41,41,.04) 0px 24px 24px -12px, rgba(41,41,41,.04) 0px 48px 48px -24px, rgba(41,41,41,.04) 0px 0px 0px 1px, rgba(51,51,51,.06) 0px -1px 1px -0.5px inset !default;
// end wpx

$box-shadow-sm:               box-shadow-1 !default;
$box-shadow:                  box-shadow-2 !default;
$box-shadow-lg:               box-shadow-3 !default;

$box-shadow-inset:            inset 0 1px 2px rgba($black, .075) !default;
$box-shadow-outline:          0 0 0 3px rgba(66, 153, 225, 0.5) !default;
$box-shadow-focus:            0 0 0 3px rgba(66, 153, 225, 0.5) !default;

$box-shadow-transparent:      0 0 0 0 rgba(0, 0, 0, 0) !default;

// Components
$component-active-color:      $white !default;
$component-active-bg:         $primary !default;

$focus-ring-width:            .15rem !default;
$focus-ring-opacity:          .25 !default;
$focus-ring-color:            var(--#{$prefix}primary-bg-subtle) !default;
$focus-ring-blur:             0 !default;
$focus-ring-box-shadow:       0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;

$caret-width:                 .3em !default;
$caret-vertical-align:        $caret-width * .85 !default;
$caret-spacing:               $caret-width * .85 !default;

// Transitions
$transition-base-duration:          .15s !default;
$transition-fade:                   opacity $transition-base-duration linear !default;
$transition-collapse:               height $transition-base-duration ease !default;
$transition-cubic-bezier:           all $transition-base-duration cubic-bezier(.77, 0, .2, 2.25) !default;
$transition-bg:                     background-color $transition-base-duration * 2 linear !default;
$transition-ease-in-out:            all $transition-base-duration ease-in-out !default;
$transition-base:                   all $transition-base-duration ease-in-out !default;

// Transition properties for utilities
$transition-property:               background-color, border-color, color, fill, stroke, opacity, box-shadow, transform !default;
$transition-property-colors:        background-color, border-color, color, fill, stroke !default;

$transition-timing-function:        cubic-bezier(0.4, 0, 0.2, 1) !default;
$transition-in-timing-function:     cubic-bezier(0.4, 0, 1, 1) !default;
$transition-out-timing-function:    cubic-bezier(0, 0, 0.2, 1) !default;
$transition-in-out-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;

// Grid
$grid-gutter-width:       1rem !default;
$grid-row-columns:        8 !default;

// Container
$container-padding-x:     2rem !default;

// Paragraphs
$paragraph-margin-bottom: 0 !default;

// System fonts
$font-sans-serif-system:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-serif-system:         ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !default;
$font-monospace-system:     ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;

// Additional variable to add custom fonts
// add here you custom fonts after you install them
$font-sans-serif:   null !default;
$font-serif:        null !default;
$font-display:      $font-sans-serif !default;
$font-monospace:    null !default;

// Generate the font family by adding the custom font to the collection if that exists
$font-sans-serif-bundle:    if($font-sans-serif, #{$font-sans-serif,$font-sans-serif-system}, $font-sans-serif-system) !default;
$font-serif-bundle:         if($font-serif, #{$font-serif,$font-serif-system}, $font-serif-system) !default;
$font-display-bundle:       if($font-display, #{$font-display,$font-sans-serif-system}, $font-sans-serif-system) !default;
$font-monospace-bundle:     if($font-monospace, #{$font-monospace,$font-monospace-system}, $font-monospace-system) !default;

$font-family-sans-serif:    var(--#{$prefix}font-sans-serif) !default;
$font-family-serif:         var(--#{$prefix}font-serif) !default;
$font-family-display:       var(--#{$prefix}font-display) !default;
$font-family-monospace:     var(--#{$prefix}font-monospace) !default;

// Font size
$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
$font-size-xxs:               $font-size-base * .625 !default;
$font-size-xs:                $font-size-base * .75 !default;
$font-size-sm:                $font-size-base * .875 !default;
$font-size-md:                $font-size-base * 1.125 !default;
$font-size-lg:                $font-size-base * 1.25 !default;
$font-size-xl:                $font-size-base * 1.5 !default;
$font-size-2xl:               $font-size-base * 2 !default;

// Font weight
$font-weight-lighter:         lighter !default;
$font-weight-light:           300 !default;
$font-weight-normal:          400 !default;
$font-weight-semibold:        500 !default;
$font-weight-bold:            600 !default;
$font-weight-bolder:          700 !default;
$font-weight-black:           800 !default;

// Line height
$line-height-base:            1.625 !default;
$line-height-sm:              1.3 !default;
$line-height-lg:              2 !default;

// Headings
$h1-font-size:                $font-size-base * 2.25 !default;
$h2-font-size:                $font-size-base * 1.75 !default;
$h3-font-size:                $font-size-base * 1.375 !default;
$h4-font-size:                $font-size-base * 1.125 !default;
$h5-font-size:                $font-size-base * 1 !default;
$h6-font-size:                $font-size-base * .875 !default;

$headings-margin-bottom:      0 !default;
$headings-font-family:        null !default;
$headings-font-style:         null !default;
$headings-font-weight:        $font-weight-semibold !default;
$headings-line-height:        1.3 !default;
$headings-color:              $gray-900 !default;

// scss-docs-start display-headings
$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
) !default;

$display-font-family:        $font-family-display !default;
$display-font-weight:        $font-weight-bold !default;
$display-line-height:        $headings-line-height !default;
$display-color:              $headings-color !default;

$lead-font-size:              $font-size-base * 1.125 !default;
$lead-font-weight:            $font-weight-normal !default;

$small-font-size:             .875em !default;
$sub-sup-font-size:           .75em !default;

$initialism-font-size:        $small-font-size !default;

$blockquote-margin-y:         $spacer !default;
$blockquote-font-size:        $font-size-base * 1.25 !default;
$blockquote-footer-color:     $gray-600 !default;
$blockquote-footer-font-size: $small-font-size !default;

$hr-opacity:                  .10 !default;

// Surtitle
$surtitle-color:              $gray-700 !default;
$surtitle-font-size:          .75rem !default;
$surtitle-font-weight:        $font-weight-semibold !default;
$surtitle-text-transform:     uppercase !default;

// Articles
$article-font-size:           1rem !default;
$article-color:               var(--#{$prefix}body-color) !default;
$article-hr-spacing-y:        3em !default;
$article-text-line-height:    1.9 !default;
$article-headings-color:      var(--#{$prefix}heading-color) !default;
$article-img-border-radius:   var(--#{$prefix}border-radius) !default;
$article-pre-border-radius:   var(--#{$prefix}border-radius) !default;

// Tables
$table-cell-padding-y:          .75rem !default;
$table-cell-padding-x:          $grid-gutter-width !default;
$table-cell-padding-y-sm:       .5rem !default;
$table-cell-padding-x-sm:       $grid-gutter-width !default;
$table-cell-vertical-align:     middle !default;
$table-cell-font-size:          $font-size-sm !default;

$table-th-font-weight:          $font-weight-semibold !default;
$table-th-font-size:            $font-size-sm !default;
$table-th-text-transform:       none !default;
$table-th-letter-spacing:       0 !default;
$table-th-bg:                   var(--#{$prefix}tertiary-bg) !default;
$table-th-color:                var(--#{$prefix}secondary-color) !default;

$table-color:                   var(--#{$prefix}body-color) !default;

$table-striped-bg-factor:     .03 !default;

$table-hover-bg-factor:         .4 !default;
$table-hover-bg:                rgba($gray-100, $table-hover-bg-factor) !default;

// wpx-add
$table-spaced-row-border-radius: var(--#{$prefix}border-radius) !default;
$table-spaced-row-shadow:        null !default;
// wpx-end

// Sections
$section-step-bg:             str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg width='355px' height='103px' viewBox='0 0 355 103' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-dasharray='6,12' stroke-linecap='round'%3E%3Cpath stroke='#{$border-color}' stroke-width='3' transform='translate(173.245679, 51.548257) scale(-1, 1) translate(-173.245679, -51.548257)' d='M-6.75432109,1.54825684 C113.245679,110.326533 233.245679,130.359459 353.245679,61.647035'/%3E%3C/g%3E%3C/svg%3E"), "#", "%23") !default;
$section-step-even-bg:        str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg width='355px' height='103px' viewBox='0 0 355 103' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-dasharray='6,12' stroke-linecap='round'%3E%3Cpath stroke='#{$border-color}' stroke-width='3' d='M2.24567891,1.54825684 C122.245679,110.326533 242.245679,130.359459 362.245679,61.647035'/%3E%3C/g%3E%3C/svg%3E"), "#", "%23") !default;

// Buttons + Forms
$input-btn-font-size:           $font-size-base !default;

$input-btn-focus-width:         $focus-ring-width !default;
$input-btn-focus-color-opacity: $focus-ring-opacity !default;
$input-btn-focus-color:         $focus-ring-color !default;
$input-btn-focus-blur:          $focus-ring-blur !default;
$input-btn-focus-box-shadow:    $focus-ring-box-shadow !default;

// bootstrap overrides
$input-btn-padding-y-xs:      0.25rem !default;
$input-btn-padding-x-xs:      0.65rem !default;
$input-btn-font-size-xs:      $font-size-xs !default;

$input-btn-padding-y-sm:      0.325rem !default;
$input-btn-padding-x-sm:      0.75rem !default;
$input-btn-font-size-sm:      $font-size-sm !default;

$input-btn-padding-y:         0.5rem !default;
$input-btn-padding-x:         1rem !default;
$input-btn-font-size:         $font-size-base !default;

$input-btn-padding-y-md:      0.6rem !default;
$input-btn-padding-x-md:      1.1rem !default;
$input-btn-font-size-md:      $font-size-base !default;

$input-btn-padding-y-lg:      0.75rem !default;
$input-btn-padding-x-lg:      1.25rem !default;
$input-btn-font-size-lg:      $font-size-base !default;

// Input groups
$input-group-addon-color:     var(--#{$prefix}tertiary-color) !default;
$input-group-addon-bg:        var(--#{$prefix}tertiary-bg) !default;

// Buttons
$btn-font-weight:             $font-weight-semibold !default;
$btn-box-shadow:              var(--#{$prefix}box-shadow-xs) !default;
$btn-active-box-shadow:       $box-shadow-transparent !default;

$btn-hover-bg-shade-amount:       20% !default;
$btn-hover-bg-tint-amount:        20% !default;
$btn-hover-border-shade-amount:   20% !default;
$btn-hover-border-tint-amount:    10% !default;
$btn-active-bg-shade-amount:      20% !default;
$btn-active-bg-tint-amount:       20% !default;
$btn-active-border-shade-amount:  25% !default;
$btn-active-border-tint-amount:   10% !default;

// added in webpixels
$btn-padding-y-xs:            $input-btn-padding-y-xs !default;
$btn-padding-x-xs:            $input-btn-padding-x-xs !default;
$btn-font-size-xs:            $input-btn-font-size-xs !default;

// Allows for customizing button radius independently from global border radius
$btn-border-radius:           var(--#{$prefix}border-radius) !default;
$btn-border-radius-xs:        var(--#{$prefix}border-radius-xs) !default;
$btn-border-radius-sm:        var(--#{$prefix}border-radius-sm) !default;
$btn-border-radius-lg:        var(--#{$prefix}border-radius-lg) !default;

// Neutral button
$btn-neutral-bg:                    $white !default;
$btn-neutral-color:                 $gray-700 !default;
$btn-neutral-border-color:          $gray-300 !default;
$btn-neutral-hover-bg:              $gray-100 !default;
$btn-neutral-hover-border-color:    $gray-200 !default;
$btn-neutral-hover-color:           $gray-700 !default;
$btn-neutral-active-bg:             $gray-200 !default;
$btn-neutral-active-border-color:   $gray-300 !default;
$btn-neutral-active-color:          $gray-700 !default;

// Forms
$form-label-font-size:               $font-size-sm !default;
$form-label-font-weight:             $font-weight-semibold !default;

$input-bg:                           transparent !default; 
$input-box-shadow:                   0px 1px 2px rgba(50, 50, 71, 0.08) !default;

$input-border-radius:                var(--#{$prefix}border-radius) !default;
$input-border-radius-sm:             var(--#{$prefix}border-radius-sm) !default;
$input-border-radius-lg:             var(--#{$prefix}border-radius-lg) !default;

$input-focus-border-color:           var(--#{$prefix}primary) !default;
$input-focus-width:                  $input-btn-focus-width !default;
$input-focus-box-shadow:             $input-btn-focus-box-shadow !default;

$input-muted-bg:                     tint-color($gray-200, 30%) !default;
$input-muted-focus-bg:               tint-color($input-muted-bg, 15%) !default;

$input-alt-bg:                       var(--#{$prefix}body-bg) !default;
$input-alt-border-width:             0 !default;
$input-alt-border-color:             transparent !default;
$input-alt-box-shadow:               0 0 0 1px rgba(0,0,0,.1), 0 2px 4px rgba(0,0,0,.1) !default;

$input-alt-focus-bg:                 $input-alt-bg !default;
$input-alt-focus-border-color:       transparent !default;
$input-alt-focus-box-shadow:         0 0 0 2px $primary !default;

$input-placeholder-color:            var(--#{$prefix}tertiary-color) !default;
$input-plaintext-color:              var(--#{$prefix}body-color) !default;

$form-check-margin-bottom:           0 !default;
$form-check-input-checked-bg-color:  var(--#{$prefix}primary) !default;

$form-switch-width:                  2.875em !default;
$form-switch-min-height:             1.5rem !default;
$form-switch-padding-start:          $form-switch-width + .5em !default;

$form-select-box-shadow:             var(--#{$prefix}shadow-sm) !default;

// Alerts

$alert-padding-y:                   .875rem !default;
$alert-padding-x:                   1rem !default;
$alert-margin-bottom:               0 !default;
$alert-border-radius:               $border-radius-lg !default;
$alert-link-font-weight:            $font-weight-bold !default;
$alert-border-width:                $border-width !default;
$alert-box-shadow:                  $box-shadow !default;

$alert-bg-scale:                    -90% !default;
$alert-border-scale:                -80% !default;
$alert-color-scale:                 10% !default;

$alert-dark-bg:                     $dark !default;
$alert-dark-color:                  color-contrast($alert-dark-bg) !default;

// Square/Circle shape buttons
$square-size-xs:  1.75rem !default;
$square-size-sm:  2.25rem !default;
$square-size:     2.75rem !default;
$square-size-lg:  3.25rem !default;
$square-size-xl:  4rem !default;
$square-size-2xl: 5rem !default;

// Avatars
$avatar-size:                       $square-size !default;
$avatar-font-size:                  1rem !default;
$avatar-border-radius:              $border-radius !default;

$avatar-size-xl:                    $square-size-xl !default;
$avatar-font-size-xl:               $avatar-font-size * 1.375 !default;
$avatar-border-radius-xl:           $border-radius-lg !default;

$avatar-size-lg:                    $square-size-lg !default;
$avatar-font-size-lg:               $avatar-font-size * 1.25 !default;
$avatar-border-radius-lg:           $border-radius-lg !default;

$avatar-size-sm:                    $square-size-sm !default;
$avatar-font-size-sm:               $avatar-font-size * .75 !default;
$avatar-border-radius-sm:           $border-radius-sm !default;

$avatar-size-xs:                    $square-size-xs !default;
$avatar-font-size-xs:               $avatar-font-size * .675 !default;
$avatar-border-radius-xs:           $border-radius-sm !default;

$avatar-bg:                         $primary !default;
$avatar-color:                      color-yiq($avatar-bg) !default;
$avatar-font-weight:                $font-weight-bold !default;

$avatar-stack-gutter:               2px !default;
$avatar-stack-border-color:         var(--#{$prefix}body-bg) !default;

// Badges
$badge-font-size:                   $font-size-xs !default;
$badge-lg-font-size:                $font-size-sm !default;
$badge-font-weight:                 $font-weight-semibold !default;

$badge-padding-y:                   .2rem !default;
$badge-padding-x:                   .6rem !default;

$badge-line-height:                 1rem !default;
$badge-text-transform:              null !default;
$badge-border-radius:               var(--#{$prefix}border-radius-sm) !default;

$badge-dot-color:                   var(--#{$prefix}body-color) !default;
$badge-dot-font-weight:             $font-weight-normal !default;

// Breadcrumb
$breadcrumb-font-size:              $font-size-sm !default;
$breadcrumb-padding-y:              0 !default;
$breadcrumb-padding-x:              0 !default;
$breadcrumb-item-padding-x:         .75rem !default;
$breadcrumb-margin-bottom:          0 !default;
$breadcrumb-bg:                     null !default;
$breadcrumb-divider-color:          var(--#{$prefix}tertiary-color) !default;
$breadcrumb-active-color:           var(--#{$prefix}body-color) !default;
$breadcrumb-divider:                quote("/") !default;
$breadcrumb-divider-flipped:        $breadcrumb-divider !default;
$breadcrumb-border-radius:          null !default;

// Card
$card-spacer-y:                     $spacer * 1.5 !default;
$card-spacer-x:                     $spacer * 1.5 !default;

$card-title-spacer-y:               0.5rem !default;
$card-title-color:                  var(--#{$prefix}heading-color) !default;

$card-border-color:                 var(--#{$prefix}border-color-translucent) !default;
$card-border-radius:                var(--#{$prefix}border-radius-lg) !default;
$card-box-shadow:                   none !default;

$card-cap-padding-y:                1rem !default;
$card-cap-bg:                       rgba(var(--#{$prefix}body-color-rgb), 0) !default;
$card-cap-color:                    var(--#{$prefix}heading-color) !default;

// added in wpx
$card-sm-spacer-y:                  $spacer !default;
$card-sm-spacer-x:                  $spacer !default;
$card-sm-cap-padding-y:             .75rem !default;
$card-sm-cap-padding-x:             $card-sm-spacer-x !default;

$card-contained-padding:            $spacer * .325 !default;
$card-contained-bg:                 color-mix(in srgb, var(--#{$prefix}secondary-bg) 50%, transparent) !default;
$card-contained-body-bg:            var(--#{$prefix}body-bg) !default;
$card-contained-body-border-color:  $card-border-color !default;
$card-contained-body-box-shadow:    $box-shadow-elevated-1 !default;
$card-contained-spacer-y:           $spacer !default;
$card-contained-spacer-x:           $spacer !default;
$card-contained-cap-padding-y:      $spacer * .75 !default;
$card-contained-cap-padding-x:      $spacer !default;

$card-elevated-box-shadow:          rgba(41, 41, 41, 0.04) 0px 1px 1px 0.5px, rgba(41, 41, 41, 0.02) 0px 3px 3px -1.5px, rgba(41, 41, 41, 0.04) 0px 6px 6px -3px, rgba(41, 41, 41, 0.04) 0px 12px 12px -6px, rgba(41, 41, 41, 0.04) 0px 24px 24px -12px, rgba(41, 41, 41, 0.04) 0px 48px 48px -24px, rgba(41, 41, 41, 0.04) 0px 0px 0px 1px, rgba(51, 51, 51, 0.06) 0px -1px 1px -0.5px inset !default;

// Accordion
$accordion-padding-y:                     1.25rem !default;
$accordion-padding-x:                     1.25rem !default;

$accordion-color:                         var(--#{$prefix}body-color) !default;
$accordion-bg:                            transparent !default;
$accordion-border-width:                  var(--#{$prefix}border-width) !default;
$accordion-border-color:                  var(--#{$prefix}border-color) !default;
$accordion-border-radius:                 var(--#{$prefix}border-radius-lg) !default;

$accordion-body-padding-y:                $accordion-padding-y !default;
$accordion-body-padding-x:                $accordion-padding-x !default;

$accordion-button-padding-y:              $accordion-padding-y !default;
$accordion-button-padding-x:              $accordion-padding-x !default;
$accordion-button-color:                  $accordion-color !default;
$accordion-button-bg:                     $accordion-bg !default;
$accordion-button-font-weight:            $font-weight-bold !default;
$accordion-button-active-bg:              $accordion-bg !default;
$accordion-button-active-color:           $primary !default;

$accordion-button-focus-box-shadow:       none !default;

$accordion-icon-width:                    1.25rem !default;
$accordion-icon-color:                    $accordion-color !default;
$accordion-icon-active-color:             $accordion-button-active-color !default;
$accordion-icon-transition:               transform .2s ease-in-out !default;
$accordion-icon-transform:                rotate(180deg) !default;

$accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/></svg>") !default;
$accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/></svg>") !default;

// Dropdown
$dropdown-min-width-sm:   12rem !default;
$dropdown-min-width:      15rem !default;
$dropdown-min-width-md:   22rem !default;
$dropdown-min-width-lg:   28rem !default;
$dropdown-min-width-xl:   36rem !default;
$dropdown-min-width-xxl:  48rem !default;

$dropdown-transform:                translateX(-50%) translateY(-3px) scale(.96) !default;
$dropdown-hover-transform:          translateX(0) translateY(-6px) scale(1) !default;
$dropdown-left-offset:              50% !default;

$dropdown-padding-x:                .5rem !default;
$dropdown-padding-y:                .5rem !default;
$dropdown-spacer:                   .125rem !default;
$dropdown-color:                    var(--#{$prefix}body-color) !default;
$dropdown-bg:                       var(--#{$prefix}body-bg) !default;
$dropdown-border-color:             var(--#{$prefix}border-color) !default;
$dropdown-border-radius:            var(--#{$prefix}border-radius-lg) !default;
$dropdown-divider-margin-y:         $dropdown-padding-y !default;
$dropdown-divider-bg:               var(--#{$prefix}border-color) !default;
$dropdown-box-shadow:               var(--#{$prefix}box-shadow-4) !default;
$dropdown-font-size:                $font-size-sm !default;

$dropdown-secondary-bg:             var(--#{$prefix}secondary-bg) !default;

$dropdown-heading-color:            var(--#{$prefix}heading-color) !default;
$dropdown-heading-font-size:        $font-size-sm !default;
$dropdown-heading-font-weight:      $font-weight-semibold !default;
$dropdown-heading-focus-color:      $primary !default;

$dropdown-helper-color:             var(--#{$prefix}secondary-color) !default;

$dropdown-item-padding-y:           .5rem !default;
$dropdown-item-padding-x:           .75rem !default;

// added in wpx
$dropdown-item-border-radius:       var(--#{$prefix}border-radius) !default;
// end wpx

$dropdown-link-color:               var(--#{$prefix}body-color) !default;
$dropdown-link-hover-color:         $dropdown-link-color !default;
$dropdown-link-hover-bg:            var(--#{$prefix}accent-bg) !default;

$dropdown-link-active-color:        $dropdown-link-color !default;
$dropdown-link-active-bg:           var(--#{$prefix}accent-bg) !default;


// Frames

$frame-iphone-width:            92% !default;
$frame-iphone-height:           96% !default;
$frame-iphone-spacing:          4% 4% 0 4% !default;

$frame-laptop-width:            70% !default;
$frame-laptop-height:           78% !default;
$frame-laptop-spacing:          2.5% 15% 0 15% !default;


// SVG icons
$svg-icon-stroke-linecap:       round !default;
$svg-icon-size:                 1em !default;
$svg-icon-stroke-width:         2px !default;


// Icons
$icon-size:                     3rem !default;
$icon-size-xl:                  5rem !default;
$icon-size-lg:                  4rem !default;
$icon-size-sm:                  2rem !default;
$icon-size-xs:                  1.25rem !default;
$icon-border-width:             3px !default;
$icon-bg-level:                 -70% !default;

// List group
$list-group-item-padding-y:         1rem !default;
$list-group-item-padding-x:         1.25rem !default;
$list-group-item-font-size:         $font-size-sm !default;

$list-group-bg:                     transparent !default;
$list-group-hover-bg:               var(--#{$prefix}secondary-bg) !default;

// Modals
$modal-inner-padding:               1.5rem !default;

$modal-content-border-color:        var(--#{$prefix}border-color) !default;
$modal-content-border-width:        var(--#{$prefix}border-width) !default;
$modal-content-border-radius:       var(--#{$prefix}border-radius-xl) !default;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;

$modal-header-border-width:         0 !default;
$modal-header-border-color:         var(--#{$prefix}border-color) !default;

$modal-footer-border-width:         0 !default;
$modal-footer-margin-between:       .75rem !default;

$modal-backdrop-bg:                 rgba($gray-900, .15) !default;
$modal-backdrop-opacity:            1 !default;
$modal-backdrop-blur:               8px !default;

$modal-fade-transform:              translate(0, 15px) scale(0.95) !default;
$modal-transition:                  all $transition-base-duration ease-out !default;

// Navs
$nav-link-padding-y:                0.325rem !default;
$nav-link-padding-x:                0.75rem !default;
$nav-link-font-size:                $font-size-sm !default;
$nav-link-font-weight:              $font-weight-normal !default;
$nav-link-color:                    var(--#{$prefix}body-color) !default;

$nav-tabs-link-active-bg:           transparent !default;

// Navbar
$navbar-padding-y:                      1rem !default;
$navbar-padding-x:                      1rem !default;

$navbar-icon-min-width:                 1.75rem !default;
$navbar-icon-font-size:                 1rem !default;

$navbar-light-color:                    rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default;
$navbar-light-hover-color:              rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default;
$navbar-light-active-color:             rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default;
$navbar-light-disabled-color:           rgba(var(--#{$prefix}emphasis-color-rgb), .5) !default;

// start wpx
$navbar-light-nav-link-bg:              transparent !default;
$navbar-light-nav-link-hover-bg:        var(--#{$prefix}accent-bg) !default;
$navbar-light-nav-link-active-bg:       var(--#{$prefix}accent-bg) !default;

$navbar-light-icon-color:               $navbar-light-color !default;
$navbar-light-caret-bg:                 str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 16 16' fill='#{$navbar-light-color}' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E"), "#", "%23") !default;
$navbar-light-collapse-border-color:    rgba($dark, .10) !default;
// end wpx

$navbar-dark-color:                     rgba($white, .75) !default;
$navbar-dark-hover-color:               rgba($white, .95) !default;
$navbar-dark-active-color:              rgba($white, .95) !default;
$navbar-dark-disabled-color:            rgba($white, .25) !default;
$navbar-dark-icon-color:                $navbar-dark-color !default;

// added in wpx
$navbar-dark-nav-link-bg:               transparent !default;
$navbar-dark-nav-link-hover-bg:         rgba(255, 255, 255, .1) !default;
$navbar-dark-nav-link-active-bg:        rgba(255, 255, 255, .1) !default;

$navbar-dark-icon-color:                $gray-100 !default;
$navbar-dark-caret-bg:                  str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 16 16' fill='#{$navbar-dark-color}' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E"), "#", "%23") !default;
$navbar-dark-collapse-border-color:     rgba($white, .25) !default;

$navbar-toggler-padding-y:          .25rem !default;
$navbar-toggler-padding-x:          .375rem !default;
$navbar-toggler-border-width:       1px !default;
$navbar-toggler-font-size:          $font-size-lg !default;

$navbar-toggler-icon-width:         1.25em !default;
$navbar-toggler-icon-height:        1.25em !default;

$navbar-light-toggler-color:        $gray-600 !default;
$navbar-light-toggler-bg:           transparent !default;
$navbar-light-toggler-icon-bg:      str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-toggler-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
$navbar-light-toggler-border-color: transparent !default;
$navbar-light-toggler-focus-color:  transparent !default;
$navbar-light-toggler-focus-bg:     $gray-100 !default;

$navbar-dark-toggler-color:         $gray-200 !default;
$navbar-dark-toggler-bg:             transparent !default;
$navbar-dark-toggler-icon-bg:       str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-toggler-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
$navbar-dark-toggler-border-color:  transparent !default;
$navbar-dark-toggler-focus-color:   transparent !default;
$navbar-dark-toggler-focus-bg:      $gray-100 !default;

// Vertical navbar
$navbar-vertical-width:                 270px !default;
$navbar-vertical-width-lg:              320px !default;
$navbar-vertical-width-xl:              370px !default;

$navbar-vertical-border-width:          1px !default;
$navbar-vertical-border-style:          solid !default;
$navbar-vertical-border-radius:         0 !default;
$navbar-vertical-open-border-radius:    0 !default;

$navbar-vertical-nav-link-padding-x:    .5rem !default;
$navbar-vertical-nav-link-padding-y:    .375rem !default;
$navbar-vertical-nav-link-font-size:    $font-size-sm !default;

// Pagination
$pagination-padding-y:              .375rem !default;
$pagination-padding-x:              1rem !default;
$pagination-font-size:              $font-size-sm !default;

$pagination-padding-y-sm:           .25rem !default;
$pagination-padding-x-sm:           .75rem !default;
$pagination-font-size-sm:           $font-size-sm !default;

$pagination-padding-y-lg:           .75rem !default;
$pagination-padding-x-lg:           1.5rem !default;
$pagination-font-size-lg:           $font-size-base !default;

$pagination-color:                  var(--#{$prefix}body-color-secondary) !default;
$pagination-focus-outline:          0 !default;

// wpx-add
$pagination-tabs-padding-y:             1.25rem !default;
$pagination-tabs-padding-x:             .75rem !default;
$pagination-tabs-bg-color:              transparent !default;
$pagination-tabs-border-width:          var(--#{$prefix}border-width) !default;
$pagination-tabs-border-color:          var(--#{$prefix}border-color) !default;
$pagination-tabs-color:                 $pagination-color !default;
$pagination-tabs-hover-color:           var(--#{$prefix}primary) !default;
$pagination-tabs-active-color:          var(--#{$prefix}primary) !default;
$pagination-tabs-active-border-color:   var(--#{$prefix}primary) !default;
// wpx-end

// Bullet pagination
$pagination-bullet-bg:              $gray-500 !default;
$pagination-bullet-active-bg:       $primary !default;

// Popovers
$popover-font-size:                 $font-size-sm !default;
$popover-bg:                        $white !default;
$popover-max-width:                 276px !default;
$popover-border-width:              1px !default;
$popover-border-color:              rgba($black, .05) !default;
$popover-border-radius:             $border-radius-lg !default;
$popover-box-shadow:                0px .5rem 2rem 0px rgba($black, .2) !default;

$popover-header-bg:                 $popover-bg !default;
$popover-header-color:              $headings-color !default;
$popover-header-padding-y:          .75rem !default;
$popover-header-padding-x:          .75rem !default;

$popover-body-color:                var(--#{$prefix}body-color) !default;
$popover-body-padding-y:            $popover-header-padding-y !default;
$popover-body-padding-x:            $popover-header-padding-x !default;

$popover-arrow-outer-color:         transparent !default;

// Tooltips
$tooltip-padding-y:                 calc($spacer / 4) !default;
$tooltip-padding-x:                 calc($spacer / 2) !default;

// Toasts
$toast-background-color:            rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
$toast-border-width:                var(--#{$prefix}border-width) !default;
$toast-border-color:                var(--#{$prefix}border-color) !default;
$toast-box-shadow:                  var(--#{$prefix}box-soft-shadow-3) !default;
$toast-spacing:                     $container-padding-x !default;

$toast-header-color:                var(--#{$prefix}secondary-color) !default;
$toast-header-background-color:     rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
$toast-header-border-color:         $toast-border-color !default;

// Progress
$progress-height:                   .25rem !default;

$progress-bg:                       var(--#{$prefix}secondary-bg) !default;
$progress-border-radius:            var(--#{$prefix}border-radius) !default;
$progress-box-shadow:               var(--#{$prefix}box-shadow-inset) !default;

$progress-bar-color:                $white !default;
$progress-bar-bg:                   var(--#{$prefix}primary) !default;

// wpx-add
$progress-circle-size-xl:           $square-size-xl !default;
$progress-circle-size-lg:           $square-size-lg !default;
$progress-circle-size:              $square-size !default;
$progress-circle-size-sm:           $square-size-sm !default;

$progress-circle-bg:                var(--#{$prefix}secondary-bg) !default;
$progress-circle-color:             var(--#{$prefix}primary) !default;
$progress-circle-bar-bg:            var(--#{$prefix}primary) !default;
// wpx-end

// Close
$btn-close-width:            1.2em !default;
$btn-close-height:           $btn-close-width !default;
$btn-close-padding-x:        .25em !default;
$btn-close-padding-y:        $btn-close-padding-x !default;
$btn-close-color:            currentColor !default;
$btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='7' fill='%23{$btn-close-color}'/><path fill='white' d='M4.646 4.646a.5.5 0 01.708 0L8 7.293l2.646-2.647a.5.5 0 01.708.708L8.707 8l2.647 2.646a.5.5 0 01-.708.708L8 8.707l-2.646 2.647a.5.5 0 01-.708-.708L7.293 8 4.646 5.354a.5.5 0 010-.708z'/></svg>") !default;
$btn-close-focus-shadow:     $input-btn-focus-box-shadow !default;
$btn-close-opacity:          .35 !default;
$btn-close-hover-opacity:    .75 !default;
$btn-close-focus-opacity:    1 !default;
$btn-close-disabled-opacity: .25 !default;
$btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%) !default;

// Offcanvas
$offcanvas-padding-y:               $modal-inner-padding !default;
$offcanvas-padding-x:               $modal-inner-padding !default;
$offcanvas-horizontal-width:        400px !default;
$offcanvas-vertical-height:         30vh !default;
$offcanvas-transition-duration:     .15s !default;
$offcanvas-border-color:            $modal-content-border-color !default;
$offcanvas-backdrop-blur:           8px !default;