// Variables
//

$white:    #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black:    #000 !default;

$primary: #0d6efd !default;
$secondary: $gray-600 !default;


$primary-bg-subtle:                 tint-color($primary, 80%) !default;
$primary-border-subtle:             $primary-bg-subtle !default;

$primary-bg-subtle-dark:            shade-color($primary, 80%) !default;
$primary-border-subtle-dark:        $primary-bg-subtle-dark !default;

$min-contrast-ratio:   4.5 !default;

$color-contrast-dark:      $black !default;
$color-contrast-light:     $white !default;


$primary-contrast:                  color-contrast($primary) !default;
$secondary-contrast:                color-contrast($secondary) !default;


// Default (Light) Color Mode

$body-color:                        $gray-900 !default;
$body-bg:                           $white !default;
$body-emphasis-color:               $black !default;
// $emphasis-color:                    $black !default;
$emphasis-bg:                       $white !default;
$border-color:                      $gray-300 !default;
$border-color-translucent:          rgba($black, .175) !default;
$headings-color:                    var(--#{$prefix}emphasis-color) !default;
$link-color:                        $body-emphasis-color !default;
$link-hover-color:                  $primary !default;


// Dark Color Mode

$body-color-dark:                   $gray-200 !default;
$body-bg-dark:                      $gray-900 !default;
$body-emphasis-color-dark:          $white !default;
// $emphasis-color-dark:               $white !default;
$emphasis-bg-dark:                  $black !default;
$border-color-dark:                 $gray-700 !default;
$border-color-translucent-dark:     rgba($white, .15) !default;
$headings-color-dark:               var(--#{$prefix}emphasis-color) !default;
$link-color-dark:                   $body-emphasis-color-dark !default;
$link-hover-color-dark:             $primary !default;


// Options
//
// Quickly modify global styling by enabling or disabling optional features.

$enable-caret:                false !default;
$enable-rounded:              true !default;
$enable-shadows:              true !default;
$enable-negative-margins:     true !default;


// Spacing

$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 * 8
) !default;


// Position
//
// Define the edge positioning anchors of the position utilities.

// scss-docs-start position-map
$position-values: (
  auto: auto,
  0: 0,
  50: 50%,
  100: 100%
) !default;


// Link

$link-decoration:                   none !default;


// Grid containers

$container-padding-x:         3rem !default;


// Grid columns

$grid-gutter-width:           1.5rem !default;


// Components

$border-width:                1px !default;

$border-radius:               0 !default;
$border-radius-sm:            0 !default;
$border-radius-lg:            0 !default;
$border-radius-xl:            0 !default;
$border-radius-2xl:           0 !default;

$box-shadow:                  rgba(0, 0, 0, .1) 0 20px 25px -5px, rgba(0, 0, 0, .04) 0 10px 10px -5px;

$transition-duration:         .25s !default;

$transition-base:             all $transition-duration ease-in-out !default;
$transition-fade:             opacity .15s linear !default;
$transition-sticky:           top $transition-duration ease-out, height $transition-duration ease-out !default;

$component-active-bg:              $primary !default;
$component-active-color:           color-contrast($primary) !default;

// Display
//
$display-font-family: null !default;
$display-font-weight: 300 !default;

// Buttons + Forms
//
$border-color: rgba($secondary, .25) !default;

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

$input-btn-focus-width:           0 !default;

$input-padding-x:                 0 !default;
$input-padding-x-sm:              0 !default;
$input-padding-x-lg:              0 !default;

$input-box-shadow:                0 0 0 0 transparent;
$input-btn-focus-box-shadow:      0 0 0 0 transparent;

// Buttons
//
$btn-box-shadow:                  none !default;

$btn-link-inverse-color:          var(--#{$prefix}link-inverse-color) !default;
$btn-link-inverse-hover-color:    var(--#{$prefix}link-inverse-hover-color) !default;

$btn-active-box-shadow:           0 0 0 0 transparent;

$btn-transition:                  color $transition-duration ease-in-out, background-color $transition-duration ease-in-out, border-color $transition-duration ease-in-out, box-shadow $transition-duration ease-in-out, padding $transition-duration ease-in-out !default;


// Z-index master list

$zindex-levels: (
  n1: -1,
  0: 0,
  1: 1,
  2: 2,
  3: 3,
  10: 10,
  1k: 1000,
  2k: 2000
) !default;


// Nav


// $nav-link-color:                     var(--#{$prefix}link-color) !default;
$nav-link-hover-color:                  var(--#{$prefix}link-hover-color) !default;
$nav-link-active-color:                 $nav-link-hover-color !default;

$nav-tabs-border-color:                 var(--#{$prefix}primary) !default;
$nav-tabs-link-active-bg:               var(--#{$prefix}emphasis-bg);
$nav-tabs-link-active-color:            var(--#{$prefix}primary) !default;
$nav-tabs-link-hover-color:             var(--#{$prefix}dark) !default;
$nav-tabs-link-hover-border-color:      transparent !default;
$nav-tabs-link-active-color:            var(--#{$prefix}link-color) !default;
$nav-tabs-link-active-border-color:     $nav-tabs-border-color $nav-tabs-border-color transparent !default;

$nav-pills-link-active-color:           var(--#{$prefix}primary) !default;
$nav-pills-link-active-bg:              transparent !default;

$nav-underline-gap:                     .75rem !default;
$nav-underline-gap-xl:                  1.5rem !default;
$nav-underline-border-color:            var(--#{$prefix}primary) !default;
$nav-link-color:                        var(--#{$prefix}link-color) !default;
$nav-underline-link-active-color:       var(--#{$prefix}link-hover-color) !default;


// Navbar

$navbar-brand-padding-y:                0 !default;

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

$navbar-toggler-padding-x:              0 !default;

$navbar-light-color:                    var(--#{$prefix}link-color) !default;
$navbar-light-hover-color:              var(--#{$prefix}link-hover-color) !default;
$navbar-light-disabled-color:           var(--#{$prefix}tertiary-color) !default;
$navbar-light-active-color:             $navbar-light-hover-color !default;
$navbar-light-toggler-icon-bg:          none !default;
$navbar-light-toggler-border-color:     var(--#{$prefix}link-color) !default;
$navbar-light-bg-color:                 var(--#{$prefix}body-bg-rgb) !default;

$navbar-dark-color:                     var(--#{$prefix}link-color) !default;
$navbar-dark-hover-color:               var(--#{$prefix}link-hover-color) !default;
$navbar-dark-disabled-color:            $navbar-light-disabled-color !default;
$navbar-dark-active-color:              $navbar-dark-hover-color !default;
$navbar-dark-toggler-icon-bg:           none !default;
$navbar-dark-toggler-border-color:      var(--#{$prefix}link-color) !default;
$navbar-dark-bg-color:                  var(--#{$prefix}body-bg-rgb) !default;

$navbar-inverse-color:                  var(--#{$prefix}link-color-inverse) !default;
$navbar-inverse-hover-color:            var(--#{$prefix}link-hover-color-inverse) !default;
$navbar-inverse-disabled-color:         var(--#{$prefix}tertiary-color-inverse) !default;
$navbar-inverse-active-color:           var(--#{$prefix}link-hover-color-inverse) !default;
$navbar-inverse-toggler-icon-bg:        none !default;
$navbar-inverse-toggler-border-color:   var(--#{$prefix}link-color-inverse) !default;
$navbar-inverse-bg-color:               var(--#{$prefix}emphasis-bg-rgb-inverse) !default;


// Dropdown

$dropdown-min-width:                    230px !default;
$dropdown-padding-x:                    $grid-gutter-width !default;
$dropdown-padding-y:                    $grid-gutter-width !default;
$dropdown-spacer:                       0 default;
$dropdown-bg:                           var(--#{$prefix}secondary-bg) !default;

$dropdown-border-color:                 var(--#{$prefix}border-color-translucent) !default;
$dropdown-border-width:                 0 !default;
$dropdown-divider-margin-y:             calc(var(--#{$prefix}dropdown-padding-y) * .5) !default;
// $dropdown-box-shadow:                 rgba(0, 0, 0, .1) 0 10px 15px -3px, rgba(0, 0, 0, .05) 0 4px 6px -2px;
$dropdown-box-shadow:                   var(--#{$prefix}box-shadow);

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

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

$dropdown-item-padding-x:               0 !default;

$dropdown-header-padding-x:             ($spacer * .5) $dropdown-item-padding-x !default;
$dropdown-header-padding-y:             var(--#{$prefix}dropdown-item-padding-y) $dropdown-item-padding-x !default;


// Cards

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

$card-border-width:                     0 !default;

$card-padding-overlap-formula:          calc(var(--lx-ornament-padding) + var(--lx-card-cover-overlap)) !default;

$card-bg:                               transparent !default;

$card-body-spacer:                      1rem !default;
$card-body-spacer-lg:                   1.25rem !default;

$card-body-bg-color:                    var(--lx-ornament-bg-color) !default;
$card-body-border-color:                var(--lx-ornament-border-color) !default;
$card-body-border-style:                var(--lx-ornament-border-style) !default;
$card-body-border-width:                var(--lx-ornament-border-width) !default;

$card-cover-overlap:                    1rem !default;
$card-cover-overlap-lg:                 5rem !default;

$card-footer-bg-color:                  var(--lx-ornament-bg-color) !default;
$card-footer-border-color:              var(--lx-ornament-border-color) !default;
$card-footer-border-style:              var(--lx-ornament-border-style) !default;
$card-footer-border-width:              var(--lx-ornament-border-width) !default;

$card-h-body-cols:                      3 !default;
$card-h-body-cols-lg:                   null !default;

$card-lg-h-body-cols:                   5 !default;
$card-lg-h-body-cols-lg:                4 !default;

$card-h-footer-cols:                    2 !default;
$card-h-footer-cols-lg:                 null !default;


// Accordion

$accordion-padding-x:                     0 !default;
// $accordion-padding-y:                     0 !default;

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

$accordion-button-font-size:              null !default;
$accordion-button-font-weight:            null !default;
$accordion-button-text-decoration:        null !default;

$accordion-button-active-bg:              transparent !default;
$accordion-button-active-color:           var(--#{$prefix}body-color) !default;

$accordion-border-separator-width:        1px;
$accordion-border-separator-style:        solid;
$accordion-border-separator-color:        var(--#{$prefix}border-color);

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

$accordion-button-padding-y:              .85rem !default;


// Buttons

$btn-padding-x:                           1rem !default;
$btn-padding-x-sm:                        .75rem !default;
$btn-padding-x-lg:                        1.75rem !default;


// CLose

$btn-close-bg:                            none !default;
$btn-close-opacity:                       1 !default;
$btn-close-hover-opacity:                 1 !default;

$btn-close-color:                         var(--#{$prefix}secondary) !default;
$btn-close-hover-color:                   var(--#{$prefix}link-hover-color) !default;


// Luxize Utilities

$viewportwidths: (
  100: 100vw,
  75: 75vw,
  50: 50vw,
  25: 25vw
) !default;


$viewportheights: (
  100: 100vh,
  75: 75vh,
  50: 50vh,
  25: 25vh
) !default;


// Forms

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

$form-range-track-bg:                   $dropdown-bg !default;

$input-border-color:                    var(--#{$prefix}secondary) !default;
$input-padding-x:                       0;
$input-padding-x-sm:                    0;
$input-padding-x-lg:                    0;
$input-bg:                              transparent;

$input-focus-border-color:              var(--lx-ornament-border-color);

// Dropdown (navbar)


// Offcanvas

$offcanvas-bg-color:                    var(--#{$prefix}emphasis-bg) !default;


// Modal

// $modal-inner-padding:                   1.75rem;
// $modal-header-padding-x:                1.75rem;
// $modal-header-padding-y:                1rem;
$modal-backdrop-opacity:            .75 !default;

// Pagination
$pagination-bg:                     transparent !default;
// $pagination-margin-start:           calc($pagination-border-width * -1) !default; // stylelint-disable-line function-disallowed-list
$pagination-border-color:           transparent !default;

$pagination-focus-bg:               transparent !default;
// $pagination-focus-box-shadow:       $input-btn-focus-box-shadow !default;
// $pagination-focus-outline:          0 !default;

$pagination-hover-color:            var(--#{$prefix}link-hover-color) !default;
$pagination-hover-bg:               transparent !default;
$pagination-hover-border-color:     transparent !default; // Todo in v6: remove this?

$pagination-active-color:           var(--#{$prefix}link-hover-color) !default;
$pagination-active-bg:              transparent !default;
$pagination-active-border-color:    var(--#{$prefix}ornament-border-color) !default;

$pagination-disabled-color:         var(--#{$prefix}secondary-color) !default;
$pagination-disabled-bg:            var(--#{$prefix}secondary-bg) !default;
$pagination-disabled-border-color:  var(--#{$prefix}border-color) !default;


// Luxize Components

$main-breakpoint:                          lg !default;

// Ornaments

$ornament-color:                           var(--#{$prefix}emphasis-color) !default;
$ornament-border-style:                    solid !default;
$ornament-border-width:                    $border-width !default;
$ornament-border-color:                    var(--#{$prefix}primary) !default;
$ornament-bg-color:                        transparent !default;
$ornament-padding:                         $grid-gutter-width !default;


// Masthead

$masthead-box-shadow:                   var(--#{$prefix}box-shadow);

$masthead-navbar-logo-height:              50px !default;
$masthead-navbar-height:                   ($masthead-navbar-logo-height + 20px) !default;
$masthead-navbar-height-lg:                ($masthead-navbar-height + 30px) !default;
$masthead-navbar-nav-link-font-weight:     700 !default;

// $masthead-nav-item-spacer:                 1rem !default;
// $masthead-nav-item-spacer-lg:              1.2rem !default;


// Section

$section-spacer-y:                          2rem !default;
$section-spacer-y-lg:                       4rem !default;

$section-bg-pull-length:                    calc(var(--lx-section-spacer-y) + 3.8rem) !default;
$section-bg-pull-length-lg:                 calc(var(--lx-section-spacer-y) + 4.5rem) !default;

$section-bg-pull-reducer-t:                 calc($section-spacer-y - var(--lx-section-spacer-t)) !default;
$section-bg-pull-reducer-b:                 calc($section-spacer-y - var(--lx-section-spacer-b)) !default;

$section-header-mb:                         1.8rem !default;
$section-header-mb-lg:                      3.5rem !default;

$section-title-font-family:                 $display-font-family !default;
$section-title-font-size:                   2.5rem !default;
$section-title-font-style:                  null !default;
$section-title-font-weight:                 $display-font-weight !default;

$section-footer-mt:                         1.8rem !default;
$section-footer-mt-lg:                      3.5rem !default;


// Item

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

// $item-title-link-color:                  var(--#{$prefix}black) !default;
$item-title-link-color:                     var(--#{$prefix}heading-color) !default;
$item-title-link-hover-color:               var(--#{$prefix}link-hover-color) !default;

$item-text-transform:                       null !default;

$item-category-link-color:                  var(--#{$prefix}secondary) !default;
$item-category-link-hover-color:            var(--#{$prefix}link-hover-color) !default;

$item-meta-link-color:                      var(--#{$prefix}body-color) !default;
$item-meta-link-hover-color:                var(--#{$prefix}link-hover-color) !default;

$item-content-bg-color:                     var(--#{$prefix}emphasis-bg) !default;
$item-content-padding-y:                    1.5rem !default;
$item-content-padding-x:                    1.5rem !default;
$item-max-width:                            750px !default;


// Testimonial

$testimonial-avatar-dimention:               64px;


// Focusform

$focusform-color:                            var(--#{$prefix}body-color) !default;
$focusform-bg-color:                         var(--#{$prefix}body-bg) !default;
$focusform-heading-color:                    var(--#{$prefix}heading-color) !default;


// Datepicker

$datepicker-color:                           var(--#{$prefix}body-color) !default;
$datepicker-bg:                              var(--#{$prefix}secondary-bg) !default;
$datepicker-border-radius:                   var(--#{$prefix}border-radius) !default;
$datepicker-shadow:                          $dropdown-box-shadow !default;
$datepicker-title-bg:                        var(--#{$prefix}emphasis-bg) !default;
$datepicker-title-shadow:                    var(--#{$prefix}box-shadow-inset) !default;
$datepicker-footer-bg:                       var(--#{$prefix}emphasis-bg) !default;
$datepicker-footer-shadow:                   var(--#{$prefix}box-shadow-inset) !default;
$datepicker-week-color:                      var(--#{$prefix}body-color) !default;
// $datepicker-cell-hover-color:                var(--#{$prefix}primary-text-emphasis) !default;
// $datepicker-cell-hover-bg:                   var(--#{$prefix}primary) !default;
$datepicker-cell-hover-bg:                   var(--#{$prefix}primary) !default;
$datepicker-cell-hover-color:                var(--#{$prefix}primary-contrast) !default;
$datepicker-cell-focus-bg:                   $datepicker-cell-hover-bg !default;
$datepicker-cell-focus-color:                $datepicker-cell-hover-color !default;
// $datepicker-cell-highlight-bg:               rgba(var(--#{$prefix}primary-rgb), .4) !default;
$datepicker-cell-selected-bg:                $datepicker-cell-hover-bg !default;
$datepicker-cell-selected-color:             $datepicker-cell-hover-color !default;
$datepicker-cell-disabled-color:             rgba(var(--#{$prefix}body-color-rgb), .3) !default;
$datepicker-cell-siblings-color:             var(--#{$prefix}tertiary-color) !default;
$datepicker-cell-siblings-selected-color:    $datepicker-cell-hover-color !default;
$datepicker-cell-today-bg:                   var(--#{$prefix}secondary-bg) !default;
$datepicker-cell-today-color:                var(--#{$prefix}secondary-color) !default;
$datepicker-cell-today-focus-bg:             $datepicker-cell-today-bg !default;
$datepicker-cell-range-color:                $datepicker-cell-hover-color !default;
$datepicker-cell-range-bg:                   rgba(var(--#{$prefix}primary-rgb), .7) !default;
// $datepicker-cell-range-bg:                   #fc0 !default;
$datepicker-cell-range-between-bg:           rgba(var(--#{$prefix}primary-rgb), .4) !default;
// $datepicker-cell-range-hover-color:          $datepicker-cell-hover-color !default;
$datepicker-cell-range-hover-bg:             $datepicker-cell-hover-bg !default;
// $datepicker-cell-range-focus-color:          $datepicker-cell-range-hover-color !default;
$datepicker-cell-range-focus-bg:             $datepicker-cell-focus-bg !default;