//
// Variables
// --------------------------------------------------


// Import Bootstrap functions to use inside variables values
@import '../vendor/bootstrap/scss/functions';


// Prefix for :root CSS variables

$prefix:                      si- !default;


//== Colors
//
// Gray and brand colors to use across the Theme.

// Grayscale
$white:                       #fff !default;
$gray-100:                    #f3f6ff !default;
$gray-200:                    #eff2fc !default;
$gray-300:                    #e2e5f1 !default;
$gray-400:                    #d4d7e5 !default;
$gray-500:                    #b4b7c9 !default;
$gray-600:                    #9397ad !default;
$gray-700:                    #565973 !default;
$gray-800:                    #33354d !default;
$gray-900:                    #0b0f19 !default;
$black:                       #000 !default;

// Theme colors
$primary:                     #6366f1 !default;
$secondary:                   $gray-200 !default;
$info:		                    #4c82f7 !default;
$success:                     #22c55e !default;
$warning:                     #ffba08 !default;
$danger:                      #ef4444 !default;
$light:                       $white !default;
$dark:                        $gray-900 !default;

// Bootstrap's $theme-colors map
$theme-colors: (
  'primary':    $primary,
  'secondary':  $secondary,
  'success':    $success,
  'info':       $info,
  'warning':    $warning,
  'danger':     $danger,
  'light':      $light,
  'dark':       $dark
) !default;

// Faded colors map
$theme-faded-colors: (
  'primary':    rgba($primary, .12),
  'success':    rgba($success, .12),
  'info':       rgba($info, .12),
  'warning':    rgba($warning, .12),
  'danger':     rgba($danger, .12),
  'light':      rgba($light, .05),
  'dark':       rgba($dark, .12)
) !default;

// Gradients map
$theme-gradients: (
  'primary':              linear-gradient(90deg, $primary 0%, #8b5cf6 50%, #d946ef 100%),
  'primary-translucent':  linear-gradient(180deg, rgba($primary, 0) 0%, rgba($primary, .6) 120%),
  'dark-translucent':     linear-gradient(180deg, rgba($dark, .58) 0%, rgba($dark, .78) 100%)
) !default;


// User selection color
$user-selection-color:        rgba(var(--#{$prefix}primary-rgb), .22) !default;


// Options
//
// Modifying Bootstrap global options

$enable-shadows:              true !default;
$enable-negative-margins:     true !default;
$enable-smooth-scroll:        false !default;
$enable-dark-mode:            true !default;


// Spacing

$spacer:                      1rem !default;


// Grid settings overrides
//
// Modifying default Bootstrap's $grid-breakpoints map
$grid-breakpoints: (
  xs: 0,
  sm: 500px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
) !default;


// Grid containers
//
// Modifying default Bootstrap's $container-max-widths map (max-width of .container)
$container-max-widths: (
  sm: 97%,
  md: 95%,
  lg: 95%,
  xl: 95%,
  xxl: 1320px
) !default;


// Body

$body-color:                                $gray-700 !default;
$body-bg:                                   $white !default;
$text-muted:                                var(--#{$prefix}gray-600) !default;

$body-dark-mode-color:                      rgba($white, .7) !default;
$body-dark-mode-bg:                         $gray-900 !default;


// Links

$link-color:                                $primary !default;
$link-decoration:                           underline !default;
$link-hover-color:                          darken($link-color, 8%) !default;
$link-hover-decoration:                     none !default;
$link-transition:                           color .2s ease-in-out !default;
$emphasized-link-hover-darken-percentage:   0% !default;


// Components
//
// Define common padding and border radius sizes and more.

$border-width:                              1px !default;
$border-color:                              $gray-300 !default;
$border-light-color:                        rgba($white, .14) !default;

$border-radius:                             .375rem !default;
$border-radius-lg:                          .5rem !default;
$border-radius-sm:                          .25rem !default;
$border-radius-pill:                        50rem !default;


// Border colors map
$border-colors: (
  'primary': rgba($primary, .35),
  'success': rgba($success, .35),
  'info':    rgba($info, .35),
  'warning': rgba($warning, .35),
  'danger':  rgba($danger, .35),
  'light':   $border-light-color,
  'dark':    rgba($dark, .35),
  'white':   rgba($white, .35)
) !default;


// Theme shadows

$box-shadow-sm:                             0 .275rem .75rem -.0625rem rgba($gray-900, .06),
                                            0 .125rem .4rem -.0625rem rgba($gray-900, .03) !default;
$box-shadow:                                0 .275rem 1.25rem rgba($gray-900, .05),
                                            0 .25rem .5625rem rgba($gray-900, .03) !default;
$box-shadow-lg:                             0 .3rem 1.525rem -.375rem rgba($gray-900, .1),
                                            0 .25rem .8125rem -.125rem rgba($gray-900, .06) !default;
$box-shadow-inset:                          inset 0 0 0 transparent !default;

$box-shadow-primary:                        0 .5rem 1.125rem -.5rem rgba($primary, .9) !default;
$box-shadow-secondary:                      0 .5rem 1.125rem -.5rem rgba($gray-900, .15) !default;
$box-shadow-info:                           0 .5rem 1.125rem -.5rem rgba($info, .9) !default;
$box-shadow-success:                        0 .5rem 1.125rem -.5rem rgba($success, .9) !default;
$box-shadow-warning:                        0 .5rem 1.125rem -.5rem rgba($warning, .9) !default;
$box-shadow-danger:                         0 .5rem 1.125rem -.5rem rgba($danger, .9) !default;
$box-shadow-dark:                           0 .5rem 1.125rem -.5rem rgba($dark, .9) !default;

$text-shadow:                               0 .0625rem $gray-900 !default;


// Fonts
//
// Font, line-height, and color for body text, headings, and more.

$path-to-fonts:                             'https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap' !default;

$font-family-sans-serif:                    'Manrope', sans-serif !default;

$font-size-base:                            1rem !default;
$font-size-xl:                              $font-size-base * 1.25 !default;
$font-size-lg:                              $font-size-base * 1.125 !default;
$font-size-sm:                              $font-size-base * .875 !default;
$font-size-xs:                              $font-size-base * .75 !default;

$font-weight-normal:                        400 !default;
$font-weight-medium:                        600 !default;
$font-weight-semibold:                      700 !default;
$font-weight-bold:                          800 !default;

$line-height-base:                          1.6 !default;
$line-height-sm:                            1.4 !default;
$line-height-lg:                            1.8 !default;

$h1-font-size:                              $font-size-base * 2.5 !default;
$h2-font-size:                              $font-size-base * 2 !default;
$h3-font-size:                              $font-size-base * 1.75 !default;
$h4-font-size:                              $font-size-base * 1.5 !default;
$h5-font-size:                              $font-size-base * 1.25 !default;
$h6-font-size:                              $font-size-base !default;

// Modifying default Bootstrap's $font-sizes map
$font-sizes: (
  1:                                        $h1-font-size,
  2:                                        $h2-font-size,
  3:                                        $h3-font-size,
  4:                                        $h4-font-size,
  5:                                        $h5-font-size,
  6:                                        $h6-font-size,
  'xl':                                     $font-size-xl,
  'lg':                                     $font-size-lg,
  'base':                                   $font-size-base,
  'sm':                                     $font-size-sm,
  'xs':                                     $font-size-xs
) !default;

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

$headings-margin-bottom:                    $spacer !default;
$headings-font-weight:                      $font-weight-bold !default;
$headings-line-height:                      1.3 !default;
$headings-color:                            var(--#{$prefix}gray-900) !default;

// Modifying default Bootstrap's $display-font-sizes map
$display-font-sizes: (
  1: $font-size-base * 5,
  2: $font-size-base * 4.5,
  3: $font-size-base * 4,
  4: $font-size-base * 3.5,
  5: $font-size-base * 3,
  6: $font-size-base * 2.625
) !default;

$display-font-weight:                       $font-weight-bold !default;

// Paragraphs
$paragraph-margin-bottom:                   $spacer * 1.25 !default;

// Blockquote
$blockquote-font-size:                      $font-size-base !default;
$blockquote-footer-color:                   var(--#{$prefix}gray-600) !default;
$blockquote-footer-font-size:               $font-size-sm !default;

// Inline list
$list-inline-padding:                       $spacer !default;


// Horizontal rule

$hr-margin-y:                               0 !default;
$hr-color:                                  var(--#{$prefix}border-color) !default;
$hr-opacity:                                1 !default;


// Icon font

$icons-font-family:                         'boxicons' !default;


// Tables

$table-cell-padding-y:                      .75rem !default;
$table-cell-padding-x:                      .75rem !default;
$table-cell-padding-y-sm:                   .375rem !default;
$table-cell-padding-x-sm:                   .375rem !default;

$table-th-color:                            $headings-color !default;
$table-th-font-weight:                      $font-weight-semibold !default;

$table-striped-bg-factor:                   .0375 !default;
$table-active-bg-factor:                    .05 !default;
$table-hover-bg-factor:                     .05 !default;
$table-border-factor:                       .15 !default;

$table-bg-scale:                            -90% !default;

// Modifying default Bootstrap's $table-variants map
$table-variants: (
  'dark':       $dark,
) !default;


// Buttons + Forms

$input-btn-padding-y:                       .625rem !default;
$input-btn-padding-x:                       1.75rem !default;
$input-btn-font-size:                       $font-size-sm !default;
$input-btn-focus-width:                     0 !default;

$input-btn-padding-y-sm:                    .475rem !default;
$input-btn-padding-x-sm:                    1.25rem !default;
$input-btn-font-size-sm:                    $font-size-xs !default;

$input-btn-padding-y-lg:                    .785rem !default;
$input-btn-padding-x-lg:                    2rem !default;
$input-btn-font-size-lg:                    $font-size-base !default;


// Buttons

$btn-color:                                 $white !default;
$btn-font-weight:                           $font-weight-medium !default;
$btn-white-space:                           nowrap !default;
$btn-focus-width:                           0 !default;

$btn-box-shadow:                            unset !default;
$btn-focus-box-shadow:                      unset !default;
$btn-active-box-shadow:                     unset !default;

$btn-link-decoration:                       none !default;
$btn-link-hover-decoration:                 none !default;

$btn-transition:                            color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default;


// Icon buttons

$btn-icon-size:                             2.75rem !default;
$btn-icon-sm-size:                          2.25rem !default;
$btn-icon-lg-size:                          3.25rem !default;
$btn-icon-xl-size:                          4.5rem !default;


// Social buttons

$social-buttons: (
  'airbnb':         #fd5c63,
  'behance':        #1769ff,
  'blogger':        #f57d00,
  'codepen':        #0ebeff,
  'discord':        #7289da,
  'dribbble':       #ea4c89,
  'dropbox':        #007ee5,
  'facebook':       #1877f2,
  'flickr':         #0063dc,
  'foursquare':     #f94877,
  'gitlab':         #fc6d26,
  'github':         #4078c0,
  'google':         #ea4335,
  'instagram':      #405de6,
  'kickstarter':    #2bde73,
  'linkedin':       #0077b5,
  'medium':         #00ab6c,
  'messenger':      #0084ff,
  'ok':             #ed812b,
  'patreon':        #f96854,
  'pinterest':      #e60023,
  'product-hunt':   #da552f,
  'reddit':         #ff4500,
  'skype':          #00aff0,
  'slack':          #611f69,
  'snapchat':       #fffc00,
  'stack-overflow': #f48024,
  'steam':          #00adee,
  'telegram':       #0088cc,
  'tiktok':         #fe2c55,
  'trip-advisor':   #00af87,
  'tumblr':         #35465c,
  'twitch':         #9146ff,
  'twitter':        #1da1f2,
  'vimeo':          #1ab7ea,
  'vk':             #45668e,
  'whatsapp':       #128c7e,
  'youtube':        #ff0000,
  'zoom':           #2d8cff,
) !default;

// Video button

$btn-video-border-radius:                   50% !default;
$btn-video-bg:                              $white !default;
$btn-video-color:                           $gray-800 !default;
$btn-video-box-shadow:                      $box-shadow-sm !default;

$btn-video-hover-bg:                        $primary !default;
$btn-video-hover-color:                     $white !default;
$btn-video-hover-box-shadow:                $box-shadow-primary !default;

$btn-video-dark-mode-bg:                    rgba($white, .05) !default;
$btn-video-dark-mode-color:                 $white !default;
$btn-video-dark-mode-box-shadow:            none !default;
$btn-video-dark-mode-hover-bg:              $primary !default;
$btn-video-dark-mode-hover-color:           $white !default;
$btn-video-dark-mode-hover-box-shadow:      $box-shadow-primary !default;


// Scroll to top button

$btn-scroll-top-size:                       2.75rem !default;
$btn-scroll-top-icon-font-size:             $font-size-base * 1.5 !default;
$btn-scroll-top-bg:                         rgba($gray-900, .2) !default;
$btn-scroll-top-hover-bg:                   rgba($gray-900, .4) !default;
$btn-scroll-top-color:                      $white !default;
$btn-scroll-top-hover-color:                $white !default;
$btn-scroll-top-transition:                 bottom 400ms cubic-bezier(.68, -.55, .265, 1.55), opacity .3s, background-color .25s ease-in-out !default;

$btn-scroll-top-dark-mode-bg:               rgba($white, .15) !default;
$btn-scroll-top-dark-mode-hover-bg:         rgba($white, .3) !default;
$btn-scroll-top-dark-mode-color:            $white !default;
$btn-scroll-top-dark-mode-hover-color:      $white !default;


// Forms

$form-text-font-size:                       $font-size-xs !default;
$form-text-color:                           $text-muted !default;
$form-text-dark-mode-color:                 rgba($white, .5) !default;

$form-label-margin-bottom:                  .3125rem !default;
$form-label-font-size:                      $font-size-sm !default;
$form-label-font-weight:                    $font-weight-medium !default;
$form-label-color:                          $gray-900 !default;
$form-floating-label-opacity:               .7 !default;
$form-label-dark-mode-color:                $white !default;
$form-label-dark-mode-focus-color:          $body-dark-mode-color !default;

$input-padding-x:                           1rem !default;
$input-padding-x-sm:                        .875rem !default;
$input-padding-x-lg:                        1.125rem !default;

$input-color:                               $body-color !default;
$input-bg:                                  $white !default;
$input-disabled-bg:                         $gray-100 !default;
$input-border-color:                        $gray-400 !default;

$input-focus-border-color:                  map-get($border-colors, 'primary') !default;
$input-focus-box-shadow:                    0 .5rem 1.125rem -.5rem rgba($primary, .2) !default;

$input-placeholder-color:                   $gray-500 !default;
$input-disabled-placeholder-color:          $gray-600 !default;

$input-transition:                          border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;

$input-dark-mode-color:                     $body-dark-mode-color !default;
$input-dark-mode-border-color:              rgba($white, .18) !default;
$input-dark-mode-bg:                        rgba($white, .02) !default;
$input-dark-mode-placeholder-color:         rgba($white, .4) !default;
$input-dark-mode-disabled-bg:               rgba($white, .01) !default;
$input-dark-mode-disabled-border-color:     rgba($white, .1) !default;
$input-dark-mode-focus-border-color:        rgba($white, .35) !default;

// Range
$form-range-thumb-bg:                       $primary !default;
$form-range-thumb-active-bg:                darken($form-range-thumb-bg, 9%) !default;
$form-range-track-bg:                       lighten($gray-300, 2%) !default;
$form-range-dark-mode-track-bg:             rgba($white, .09) !default;

// Select
$form-select-disabled-bg:                   $gray-100 !default;
$form-select-indicator-color:               $input-color !default;
$form-select-dark-mode-indicator-color:     $input-dark-mode-color !default;
$form-select-dark-mode-indicator:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$input-dark-mode-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>") !default;


// Form check
$form-check-input-width:                    1rem !default;
$form-check-padding-start:                  $form-check-input-width + .5rem !default;
$form-check-margin-bottom:                  $spacer * .25 !default;
$form-check-input-border:                   2px solid $gray-500 !default;
$form-check-input-border-radius:            .1875em !default;
$form-check-input-disabled-opacity:         .55 !default;
$form-check-label-font-size:                $font-size-sm !default;
$form-check-input-dark-mode-bg:             transparent !default;
$form-check-input-dark-mode-border-color:   rgba($white, .5) !default;


// Form switch
$form-switch-width:                         2.875em !default;
$form-switch-height:                        1.5rem !default;
$form-switch-margin-bottom:                 $spacer * .5 !default;
$form-switch-color:                         $white !default;
$form-switch-focus-color:                   $form-switch-color !default;
$form-switch-bg:                            $gray-500 !default;
$form-switch-checked-bg:                    $primary !default;
$form-switch-checked-box-shadow:            $box-shadow-primary !default;
$form-switch-dark-mode-bg:                  rgba($white, .25) !default;
$form-switch-dark-mode-checked-bg:          $primary !default;

// Form validation
$form-feedback-font-size:                   $font-size-xs !default;
$form-feedback-valid-color:                 $success !default;
$form-feedback-invalid-color:               $danger !default;
$form-feedback-icon-valid-color:            $form-feedback-valid-color !default;
$form-feedback-icon-invalid-color:          $form-feedback-invalid-color !default;

$form-feedback-tooltip-font-size:           $form-feedback-font-size !default;
$form-feedback-tooltip-valid-color:         $form-feedback-valid-color !default;
$form-feedback-tooltip-invalid-color:       $form-feedback-invalid-color !default;
$form-feedback-tooltip-valid-bg:            map-get($theme-faded-colors, 'success') !default;
$form-feedback-tooltip-invalid-bg:          map-get($theme-faded-colors, 'danger') !default;
$form-feedback-tooltip-border-radius:       $border-radius-sm !default;
$form-feedback-icon-valid:                  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$form-feedback-icon-valid-color}'><path d='M10 1.667c-4.595 0-8.333 3.738-8.333 8.333S5.405 18.333 10 18.333s8.333-3.738 8.333-8.333S14.595 1.667 10 1.667zm0 15c-3.676 0-6.667-2.991-6.667-6.667S6.324 3.333 10 3.333 16.667 6.324 16.667 10 13.676 16.667 10 16.667zm-1.668-5.345L6.416 9.41 5.24 10.59l3.094 3.088 5.588-5.588-1.178-1.178-4.412 4.412z'/></svg>") !default;
$form-feedback-icon-invalid:                url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$form-feedback-icon-invalid-color}'><path d='M7.643 13.535L10 11.178l2.357 2.357 1.178-1.178L11.178 10l2.357-2.357-1.178-1.178L10 8.822 7.643 6.465 6.465 7.643 8.822 10l-2.357 2.357 1.178 1.178zM10 18.333c4.595 0 8.333-3.738 8.333-8.333S14.595 1.667 10 1.667 1.667 5.405 1.667 10 5.405 18.333 10 18.333zm0-15c3.676 0 6.667 2.991 6.667 6.667S13.676 16.667 10 16.667 3.333 13.676 3.333 10 6.324 3.333 10 3.333z'/></svg>") !default;

// Input group
$input-group-addon-bg:                      $input-bg !default;
$input-group-dark-mode-addon-bg:            $input-dark-mode-bg !default;
$input-group-dark-mode-addon-color:         $input-dark-mode-color !default;
$input-group-dark-mode-addon-border-color:  $input-dark-mode-border-color !default;

// File
$form-file-dark-mode-button-color:          $input-dark-mode-color !default;
$form-file-dark-mode-button-bg:             $input-group-dark-mode-addon-bg !default;
$form-file-dark-mode-button-hover-bg:       shade-color($form-file-dark-mode-button-bg, 5%) !default;


// Range slider

$range-slider-height:                       .1875rem !default;
$range-slider-bg:                           lighten($gray-300, 1%) !default;
$range-slider-connect-bg:                   $primary !default;
$range-slider-dark-mode-bg:                 rgba($white, .12) !default;
$range-slider-handle-size:                  1.375rem !default;
$range-slider-handle-bg:                    $white !default;
$range-slider-handle-box-shadow:            0 .125rem .5625rem -.125rem rgba($black, .25) !default;
$range-slider-tooltip-font-size:            $font-size-xs !default;
$range-slider-tooltip-bg:                   darken($gray-800, 10%) !default;
$range-slider-tooltip-color:                $white !default;
$range-slider-pips-font-size:               $font-size-base * .8125 !default;


// Navs

$nav-link-padding-y:                        .535rem !default;
$nav-link-padding-x:                        1rem !default;
$nav-link-font-weight:                      $font-weight-medium !default;
$nav-link-color:                            $gray-800 !default;
$nav-link-hover-color:                      $primary !default;
$nav-link-active-color:                     $primary !default;
$nav-link-disabled-color:                   $gray-600 !default;
$nav-link-transition:                       color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out !default;

$nav-link-dark-mode-color:                  rgba($white, .85) !default;
$nav-link-dark-mode-hover-color:            $primary !default;
$nav-link-dark-mode-active-color:           $primary !default;
$nav-link-dark-mode-disabled-color:         rgba($white, .4) !default;


// Tabs

$nav-tabs-border-color:                     transparent !default;
$nav-tabs-border-width:                     0 !default;
$nav-tabs-link-bg:                          $gray-200 !default;
$nav-tabs-link-color:                       $nav-link-color !default;
$nav-tabs-link-hover-border-color:          transparent !default;
$nav-tabs-link-hover-bg:                    map-get($theme-faded-colors, 'primary') !default;
$nav-tabs-link-hover-color:                 $primary !default;
$nav-tabs-link-active-border-color:         transparent !default;
$nav-tabs-link-active-bg:                   $primary !default;
$nav-tabs-link-active-color:                $white !default;
$nav-tabs-link-disabled-bg:                 $gray-100 !default;

$nav-tabs-dark-mode-link-bg:                rgba($white, .05) !default;
$nav-tabs-dark-mode-link-color:             rgba($white, .85) !default;
$nav-tabs-dark-mode-link-hover-bg:          map-get($theme-faded-colors, 'primary') !default;
$nav-tabs-dark-mode-link-hover-color:       $primary !default;
$nav-tabs-dark-mode-link-active-bg:         $primary !default;
$nav-tabs-dark-mode-link-active-color:      $white !default;
$nav-tabs-dark-mode-link-disabled-bg:       rgba($white, .04) !default;
$nav-tabs-dark-mode-link-disabled-color:    $nav-link-dark-mode-disabled-color !default;


// Pills

$nav-pills-border-radius:                   $border-radius-pill !default;


// Sidebar navigation

$side-nav-padding-y:                        0 !default;
$side-nav-padding-x:                        $spacer * 2 !default;
$side-nav-border-width:                     $border-width !default;
$side-nav-border-color:                     $border-color !default;
$side-nav-dark-mode-border-color:           $border-light-color !default;

$side-nav-link-font-size:                   $font-size-sm !default;
$side-nav-link-padding-y:                   .375rem !default;
$side-nav-link-padding-x:                   $side-nav-padding-x !default;
$side-nav-link-trnasition:                  color .2s ease-in-out, border-color .2s ease-in-out, background-color .2s ease-in-out !default;


// Navbar

$navbar-nav-link-padding-x:                 .875rem !default;

// Brand
$navbar-brand-font-size:                    1.375rem !default;
$navbar-brand-font-weight:                  $font-weight-bold !default;
$navbar-brand-padding-y:                    $spacer * .5 !default;

// Toggler
$navbar-toggler-padding-y:                  $spacer * .625 !default;
$navbar-toggler-padding-x:                  $spacer * .25 !default;
$navbar-toggler-border-radius:              0 !default;
$navbar-toggler-bar-width:                  1.375rem !default;
$navbar-toggler-bar-height:                 .125rem !default;
$navbar-toggler-bar-spacing:                .3125rem !default;

// Navbar light
$navbar-light-color:                        $nav-link-color !default;
$navbar-light-hover-color:                  $nav-link-hover-color !default;
$navbar-light-active-color:                 $nav-link-active-color !default;
$navbar-light-disabled-color:               $nav-link-disabled-color !default;
$navbar-light-toggler-border-color:         transparent !default;
$navbar-light-toggler-icon-bg:              initial !default;
$navbar-light-toggler-bar-color:            $nav-link-color !default;
$navbar-light-brand-color:                  $gray-900 !default;
$navbar-light-brand-hover-color:            $gray-900 !default;


// Navbar dark
$navbar-dark-color:                         $nav-link-dark-mode-color !default;
$navbar-dark-hover-color:                   $nav-link-dark-mode-hover-color !default;
$navbar-dark-active-color:                  $nav-link-dark-mode-active-color !default;
$navbar-dark-disabled-color:                $nav-link-dark-mode-disabled-color !default;
$navbar-dark-toggler-border-color:          transparent !default;
$navbar-dark-toggler-icon-bg:               initial !default;
$navbar-dark-toggler-bar-color:             $nav-link-dark-mode-color !default;
$navbar-dark-brand-color:                   $white !default;
$navbar-dark-brand-hover-color:             $white !default;

// Mega dropdown
$mega-dropdown-column-width:                14rem !default;


// Dropdowns

$dropdown-min-width:                        12rem !default;
$dropdown-font-size:                        $font-size-sm !default;
$dropdown-font-weight:                      500 !default;
$dropdown-bg:                               $white !default;
$dropdown-border-color:                     $dropdown-bg !default;
$dropdown-divider-bg:                       $border-color !default;
$dropdown-divider-margin-y:                 .375rem !default;
$dropdown-divider-margin-x:                 1rem !default;
$dropdown-box-shadow:                       $box-shadow !default;
$dropdown-border-radius:                    $border-radius-lg !default;
$dropdown-spacer:                           .25rem !default;

$dropdown-item-padding-y:                   .375rem !default;
$dropdown-item-padding-x:                   1rem !default;
$dropdown-item-font-size:                   $font-size-sm !default;
$dropdown-item-icon-size:                   $font-size-base !default;

$dropdown-header-color:                     $headings-color !default;

$dropdown-link-color:                       $nav-link-color !default;
$dropdown-link-hover-color:                 $nav-link-hover-color !default;
$dropdown-link-hover-bg:                    transparent !default;
$dropdown-link-active-color:                $nav-link-active-color !default;
$dropdown-link-active-bg:                   transparent !default;
$dropdown-link-disabled-color:              $nav-link-disabled-color !default;

$dropdown-dark-color:                       rgba($white, .7) !default;
$dropdown-dark-bg:                          linear-gradient(0deg, rgba($white, .03), rgba($white, .03)), $dark !default;
$dropdown-dark-border-color:                $border-light-color !default;
$dropdown-dark-divider-bg:                  $border-light-color !default;
$dropdown-dark-link-color:                  $nav-link-dark-mode-color !default;
$dropdown-dark-link-hover-color:            $nav-link-dark-mode-hover-color !default;
$dropdown-dark-link-hover-bg:               transparent !default;
$dropdown-dark-link-active-color:           $nav-link-dark-mode-active-color !default;
$dropdown-dark-link-active-bg:              transparent !default;
$dropdown-dark-link-disabled-color:         $nav-link-dark-mode-disabled-color !default;
$dropdown-dark-header-color:                $white !default;


// Pagination

$pagination-padding-y:                      .45rem !default;
$pagination-padding-x:                      .875rem !default;
$pagination-font-size:                      $font-size-sm !default;

$pagination-padding-y-sm:                   .265rem !default;
$pagination-padding-x-sm:                   .65rem !default;
$pagination-font-size-sm:                   $font-size-xs !default;

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

$pagination-margin:                         .125rem !default;
$pagination-color:                          $nav-link-color !default;
$pagination-font-weight:                    $nav-link-font-weight !default;
$pagination-bg:                             transparent !default;
$pagination-border-width:                   0 !default;

$pagination-hover-color:                    $nav-link-hover-color !default;
$pagination-focus-color:                    $pagination-hover-color !default;
$pagination-hover-bg:                       $gray-200 !default;

$pagination-active-color:                   $white !default;
$pagination-active-bg:                      $primary !default;
$pagination-active-box-shadow:              $box-shadow-primary !default;

$pagination-disabled-bg:                    transparent !default;
$pagination-transition:                     color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default;

$pagination-dark-mode-color:                $nav-link-dark-mode-color !default;
$pagination-dark-mode-hover-color:          $nav-link-dark-mode-hover-color !default;
$pagination-dark-mode-hover-bg:             rgba($white, .05) !default;
$pagination-dark-mode-disabled-color:       rgba($white, .5) !default;


// Placeholders

$placeholder-opacity-max:                   .35 !default;
$placeholder-opacity-min:                   .12 !default;
$placeholder-dark-mode-opacity-max:         .25 !default;
$placeholder-dark-mode-opacity-min:         .1 !default;


// Cards

$card-spacer-y:                             $spacer * 1.5 !default;
$card-spacer-x:                             $spacer * 1.5 !default;
$card-title-spacer-y:                       $spacer * .75 !default;
$card-border-radius:                        $border-radius-lg !default;
$card-border-color:                         $border-color !default;
$card-bg:                                   $white !default;
$card-cap-padding-y:                        $card-spacer-y * .75 !default;
$card-cap-bg:                               transparent !default;
$card-transition:                           transform .2s ease-in-out,
                                            border-color .2s ease-in-out,
                                            background-color .2s ease-in-out,
                                            box-shadow .2s ease-in-out !default;
$card-img-overlay-padding:                  $spacer * 1.5 !default;
$card-dark-mode-bg:                         $body-dark-mode-bg !default;
$card-dark-mode-border-color:               $border-light-color !default;
$card-dark-mode-color:                      rgba($white, .7) !default;


// Accordion

$accordion-padding-x:                       1.5rem !default;
$accordion-border-color:                    $border-color !default;
$accordion-border-radius:                   $border-radius-lg !default;

$accordion-button-color:                    $gray-900 !default;
$accordion-button-active-color:             $accordion-button-color !default;
$accordion-button-font-weight:              $font-weight-medium !default;
$accordion-button-active-bg:                $white !default;

$accordion-icon-width:                      .625rem !default;
$accordion-icon-color:                      $gray-800 !default;
$accordion-icon-active-color:               $white !default;

$accordion-icon-box-size:                   2.25rem !default;
$accordion-icon-box-bg:                     $gray-100 !default;
$accordion-icon-box-active-bg:              $primary !default;
$accordion-icon-box-active-box-shadow:      0 -.5rem 1.125rem -.5rem rgba($primary, .9) !default;

$accordion-button-icon:                     url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='#{$accordion-icon-color}'><path d='M225.813 48.907L128 146.72 30.187 48.907 0 79.093l128 128 128-128z'/></svg>") !default;
$accordion-button-active-icon:              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='#{$accordion-icon-active-color}'><path d='M225.813 48.907L128 146.72 30.187 48.907 0 79.093l128 128 128-128z'/></svg>") !default;

$accordion-dark-mode-color:                 $body-dark-mode-color !default;
$accordion-dark-mode-bg:                    $body-dark-mode-bg !default;
$accordion-dark-mode-border-color:          $border-light-color !default;
$accordion-dark-mode-button-color:          $white !default;
$accordion-dark-mode-icon-color:            $white !default;
$accordion-dark-mode-icon-active-color:     $white !default;
$accordion-dark-mode-icon-box-bg:           rgba($white, .05) !default;
$accordion-dark-mode-icon-box-active-bg:    $primary !default;
$accordion-dark-mode-button-icon:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='#{$accordion-dark-mode-icon-color}'><path d='M225.813 48.907L128 146.72 30.187 48.907 0 79.093l128 128 128-128z'/></svg>") !default;


// Tooltips

$tooltip-font-size:                         $font-size-base * .8125 !default;
$tooltip-border-radius:                     $border-radius-sm !default;


// Popovers

$popover-bg:                                $white !default;
$popover-border-color:                      $border-color !default;
$popover-arrow-outer-color:                 $popover-border-color !default;
$popover-box-shadow:                        $box-shadow-sm !default;
$popover-border-radius:                     $border-radius-lg !default;
$popover-header-bg:                         transparent !default;
$popover-header-padding-y:                  $spacer * .75 !default;
$popover-header-padding-x:                  $spacer !default;
$popover-header-font-size:                  $font-size-base !default;
$popover-body-font-size:                    $font-size-sm !default;

$popover-dark-mode-bg:                      #14171f !default;


// Toasts

$toast-padding-x:                           $spacer !default;
$toast-padding-y:                           $spacer * .75 !default;
$toast-background-color:                    $white !default;
$toast-border-radius:                       $border-radius-lg !default;
$toast-border-color:                        transparent !default;

$toast-header-color:                        var(--#{$prefix}heading-color) !default;
$toast-header-background-color:             transparent !default;
$toast-header-border-color:                 var(--#{$prefix}border-color) !default;

$toast-dark-mode-bg:                        linear-gradient(0deg, rgba($white, .04), rgba($white, .04)), $dark !default;


// Badges

$badge-font-size:                           .8125em !default;
$badge-font-weight:                         $font-weight-medium !default;
$badge-border-radius:                       $border-radius-sm !default;
$badge-padding-y:                           .35em !default;
$badge-padding-x:                           .6em !default;


// Modals

$modal-inner-padding:                       $spacer * 1.5 !default;

$modal-content-border-width:                0 !default;
$modal-content-box-shadow-xs:               $box-shadow !default;

$modal-header-padding-y:                    $modal-inner-padding * .75 !default;
$modal-header-border-color:                 $border-color !default;
$modal-header-border-width:                 $border-width !default;
$modal-footer-border-width:                 $border-width !default;
$modal-footer-margin-between:               .75rem !default;

$modal-fade-transform:                      scale(.9) !default;
$modal-transition:                          transform .2s ease-out !default;

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

$modal-dark-mode-content-border-width:      $border-width !default;
$modal-dark-mode-content-border-color:      $border-light-color !default;
$modal-dark-mode-content-bg:                $dark !default;


// Alerts

$alert-border-radius:                       $border-radius-lg !default;
$alert-link-font-weight:                    $font-weight-medium !default;
$alert-bg-scale:                            -90% !default;
$alert-border-scale:                        -50% !default;
$alert-color-scale:                         -90% !default;


// Progress bars

$progress-border-radius:                    $border-radius-pill !default;
$progress-bg:                               lighten($gray-300, 2%) !default;
$progress-dark-mode-bg:                     rgba($white, .08) !default;


// List group

$list-group-color:                          $body-color !default;
$list-group-bg:                             transparent !default;
$list-group-border-color:                   $border-color !default;
$list-group-border-radius:                  $border-radius-lg !default;

$list-group-item-padding-y:                 $spacer * .75 !default;
$list-group-item-padding-x:                 $spacer !default;
$list-group-item-bg-scale:                  -87% !default;
$list-group-item-color-scale:               40% !default;


$list-group-hover-bg:                       map-get($theme-faded-colors, 'primary') !default;
$list-group-active-color:                   $white !default;
$list-group-active-bg:                      $primary !default;
$list-group-active-box-shadow:              $box-shadow-primary !default;

$list-group-action-color:                   $nav-link-color !default;
$list-group-action-hover-color:             $primary !default;

$list-group-action-font-weight:             $font-weight-medium !default;
$list-group-action-active-color:            $list-group-active-color !default;
$list-group-action-active-bg:               $list-group-active-bg !default;
$list-group-action-transition:              color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default;

$list-group-dark-mode-color:                $body-dark-mode-color !default;
$list-group-dark-mode-border-color:         $border-light-color !default;
$list-group-dark-mode-action-color:         $nav-link-dark-mode-color !default;
$list-group-dark-mode-disabled-color:       rgba($white, .5) !default;


// Image thumbnails

$thumbnail-padding:                         .5rem !default;
$thumbnail-border-width:                    0 !default;
$thumbnail-border-radius:                   var(--#{$prefix}border-radius-lg) !default;
$thumbnail-bg:                              var(--#{$prefix}body-bg) !default;
$thumbnail-dark-mode-bg:                    rgba($white, .1) !default;


// Figures

$figure-caption-font-size:                  $font-size-sm !default;
$figure-caption-color:                      var(--#{$prefix}gray-600) !default;


// Breadcrumb

$breadcrumb-font-size:                      $font-size-sm !default;
$breadcrumb-font-weight:                    $font-weight-medium !default;
$breadcrumb-item-padding-x:                 .625rem !default;
$breadcrumb-color:                          var(--#{$prefix}gray-600) !default;
$breadcrumb-hover-color:                    var(--#{$prefix}gray-800) !default;
$breadcrumb-active-color:                   var(--#{$prefix}primary) !default;
$breadcrumb-divider-color:                  $breadcrumb-color !default;
$breadcrumb-divider-font-size:              1.15em !default;
$breadcrumb-divider:                        quote("\ea55") !default;
$breadcrumb-divider-flipped:                quote("\ed3f") !default;
$breadcrumb-dark-mode-active-color:         $white !default;


// Spinners

$spinner-border-width:                      .15em !default;
$spinner-border-width-sm:                   .1em !default;


// Close

$btn-close-width:                           .75em !default;
$btn-close-focus-shadow:                    none !default;
$btn-close-transition:                      opacity .25s ease-in-out !default;


// Offcanvas

$offcanvas-horizontal-width:                21rem !default;
$offcanvas-border-width:                    0 !default;
$offcanvas-box-shadow:                      $box-shadow !default;

$offcanvas-dark-mode-border-color:          $border-light-color !default;
$offcanvas-dark-mode-bg-color:              $gray-900 !default;
$offcanvas-dark-mode-color:                 rgba($white, .5) !default;


// Code

$code-color:                                #e3116c !default;
$code-dark-mode-color:                      #f33185 !default;
$kbd-color:                                 $white !default;
$kbd-bg:                                    $gray-900 !default;

$pre-padding-y:                             $spacer * 1.5 !default;
$pre-padding-x:                             $spacer * 1.5 !default;
$pre-color:                                 $gray-800 !default;
$pre-bg:                                    $white !default;
$pre-border-width:                          var(--#{$prefix}border-width) !default;
$pre-border-color:                          var(--#{$prefix}border-color) !default;
$pre-border-radius:                         $border-radius-lg !default;
$pre-box-shadow:                            $box-shadow-sm !default;

$pre-line-numbers-border-width:             $border-width !default;
$pre-line-numbers-border-color:             $border-color !default;
$pre-line-numbers-color:                    darken($gray-500, 6%) !default;

$pre-dark-mode-color:                       $white !default;
$pre-dark-mode-border-color:                $border-light-color !default;
$pre-dark-mode-bg:                          rgba($white, .04) !default;
$pre-dark-mode-line-numbers-border-color:   $border-light-color !default;
$pre-dark-mode-line-numbers-color:          rgba($white, .5) !default;
$kbd-dark-mode-color:                       $white !default;
$kbd-dark-mode-bg:                          darken($gray-900, 8%) !default;


// Carousel

$carousel-nav-btn-border-radius:            50% !default;
$carousel-nav-btn-bg:                       $white !default;
$carousel-nav-btn-color:                    $gray-800 !default;
$carousel-nav-btn-box-shadow:               $box-shadow-sm !default;

$carousel-nav-btn-hover-bg:                 $primary !default;
$carousel-nav-btn-hover-color:              $white !default;
$carousel-nav-btn-hover-box-shadow:         $box-shadow-primary !default;
$carousel-nav-btn-transition:               color .2s ease-in-out,
                                            background-color .2s ease-in-out,
                                            border-color .2s ease-in-out,
                                            box-shadow .2s ease-in-out,
                                            opacity .2s ease-in-out !default;

$carousel-dark-mode-nav-btn-bg:               rgba($white, .05) !default;
$carousel-dark-mode-nav-btn-color:            $white !default;

$carousel-bullet-width:                     .3125rem !default;
$carousel-bullet-height:                    .3125rem !default;
$carousel-bullet-border-radius:             $border-radius-pill !default;
$carousel-bullet-spacer:                    $spacer * .875 !default;
$carousel-bullet-transition:                width .2s ease-in-out, height .2s ease-in-out, background-color .2s ease-in-out !default;

$carousel-bullet-bg:                        $gray-500 !default;
$carousel-bullet-active-bg:                 $primary !default;
$carousel-bullet-active-width:              1.5rem !default;

$carousel-dark-mode-bullet-bg:              rgba($white, .5) !default;
$carousel-dark-mode-bullet-active-bg:       $white !default;

$carousel-scrollbar-width:                  .1875rem !default;
$carousel-scrollbar-bg:                     $border-color !default;
$carousel-scrollbar-drag-bg:                darken($gray-500, 6%) !default;
$carousel-dark-mode-scrollbar-bg:           $border-light-color !default;
$carousel-dark-mode-scrollbar-drag-bg:      $white !default;

$carousel-progressbar-height:               .1875rem !default;
$carousel-progressbar-bg:                   $border-color !default;
$carousel-progressbar-fill-bg:              $primary !default;
$carousel-dark-mode-progressbar-bg:         $border-light-color !default;


// Gallery

$gallery-indicator-size:                    4.5rem !default;

$gallery-image-indicator-color:             $white !default;
$gallery-image-indicator-font-size:         $font-size-base * 2 !default;

$gallery-video-indicator-bg:                $white !default;
$gallery-video-indicator-color:             $gray-800 !default;
$gallery-video-indicator-font-size:         $font-size-base * 2 !default;
$gallery-video-indicator-box-shadow:        $box-shadow-sm !default;
$gallery-video-indicator-hover-bg:          $primary !default;
$gallery-video-indicator-hover-color:       $white !default;
$gallery-video-indicator-hover-box-shadow:  $box-shadow-primary !default;

$gallery-overlay-bg:                        rgba($gray-900, .4) !default;
$gallery-caption-color:                     $white !default;


// Steps

$steps-padding-y:                           $spacer * 1.5 !default;
$steps-padding-x:                           $spacer * 1.5 !default;
$steps-number-size:                         7.625rem !default;
$steps-number-border-radius:                50% !default;
$steps-number-bg:                           $gray-100 !default;
$steps-number-color:                        var(--#{$prefix}heading-color) !default;
$steps-number-font-size:                    $font-size-base * 2 !default;
$steps-number-font-weight:                  $font-weight-bold !default;
$steps-number-inner-size:                   5.625rem !default;
$steps-number-inner-bg:                     $white !default;
$steps-number-inner-box-shadow:             $box-shadow-sm !default;
$steps-connect-width:                       var(--#{$prefix}border-width) !default;
$steps-connect-color:                       var(--#{$prefix}border-color) !default;

$steps-number-size-sm:                      5rem !default;
$steps-number-inner-size-sm:                3.5rem !default;
$steps-number-font-size-sm:                 $font-size-base * 1.5 !default;

$steps-dark-mode-number-bg:                 #181b24 !default;
$steps-dark-mode-number-inner-bg:           rgba($white, .04) !default;


// Comparison slider

$comparison-slider-divider-width:           .1875rem !default;
$comparison-slider-divider-color:           $primary !default;
