//
// These variables are used when Jasny Bootstrap is built
// without importing vanilla Bootstrap.
// --------------------------------------------------------

//-- Colors
//
//## Gray colors for use across Bootstrap.

$gray-darker:            lighten(#000, 13.5%); // #222
$gray-dark:              lighten(#000, 20%);   // #333
$gray:                   lighten(#000, 33.5%); // #555
$gray-light:             lighten(#000, 60%);   // #999
$gray-lighter:           lighten(#000, 93.5%); // #eee

//-- Typography
//
//## Font size and line-height.

$font-size-base:          14px;
$font-size-large:         ceil(($font-size-base * 1.25)); // ~18px
$font-size-small:         ceil(($font-size-base * 0.85)); // ~12px

//** Unit-less `line-height` for use in components like buttons.
$line-height-base:        1.428571429; // 20/14
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
$line-height-computed:    floor(($font-size-base * $line-height-base)); // ~20px


//== Components
//
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).

$padding-base-vertical:     6px;
$padding-base-horizontal:   12px;

$padding-large-vertical:    10px;
$padding-large-horizontal:  16px;

$padding-small-vertical:    5px;
$padding-small-horizontal:  10px;

$padding-xs-vertical:       1px;
$padding-xs-horizontal:     5px;

$line-height-large:         1.33;
$line-height-small:         1.5;

$border-radius-base:        4px;
$border-radius-large:       6px;
$border-radius-small:       3px;


//== Tables
//
//## Customizes the `.table` component with basic values, each used across all table variations.

//** Background color used for `.table-hover`.
$table-bg-hover:                #f5f5f5;


//-- Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.
//
// Note: These variables are not generated into the Customizer.

$zindex-navmenu-fixed:     1030;
$zindex-alert-fixed:       1035;

$zindex-modal:             1050;


//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra small screen / phone
$screen-xs:              480px;

// Small screen / tablet
$screen-sm:              768px;

// Medium screen / desktop
$screen-md:              992px;

// Large screen / wide desktop
$screen-lg:              1200px;

//-- So media queries don't overlap when required, provide a maximum
//
// Note: These variables are not generated into the Customizer.
$screen-xs-min:              $screen-xs;
$screen-sm-min:              $screen-sm;
$screen-md-min:              $screen-md;
$screen-lg-min:              $screen-lg;

$screen-xs-max:              ($screen-sm-min - 1);
$screen-sm-max:              ($screen-md-min - 1);
$screen-md-max:              ($screen-lg-min - 1);

//== Grid system
//
//## Define your custom responsive grid.

//** Padding between columns. Gets divided in half for the left and right.
$grid-gutter-width:         30px;
//** Point at which the navbar becomes uncollapsed.
$grid-float-breakpoint:     768px;
 
//--
$container-lg:              ((1140px + $grid-gutter-width));
//** Maximum with of a smooth container.
$container-smooth:          $container-lg;

//== Navbar
//
//##

// Basics of a navbar
$navbar-height:                    50px;
$navbar-padding-horizontal:        floor(($grid-gutter-width / 2));
$navbar-padding-vertical:          (($navbar-height - $line-height-computed) / 2);


//== Navmenu
//
//##

// Basics of a navmenu
$navmenu-width:                     300px;
$navmenu-margin-vertical:           (0.5 * $line-height-computed);
$navmenu-default-color:             #777;
$navmenu-default-bg:                #f8f8f8;
$navmenu-default-border:            darken($navmenu-default-bg, 6.5%);

// Navmenu links
$navmenu-default-link-color:                #777;
$navmenu-default-link-hover-color:          #333;
$navmenu-default-link-hover-bg:             transparent;
$navmenu-default-link-active-color:         #555;
$navmenu-default-link-active-bg:            darken($navmenu-default-bg, 6.5%);
$navmenu-default-link-disabled-color:       #ccc;
$navmenu-default-link-disabled-bg:          transparent;

// Navmenu brand label
$navmenu-default-brand-color:               $navmenu-default-link-color;
$navmenu-default-brand-hover-color:         darken($navmenu-default-link-color, 10%);
$navmenu-default-brand-hover-bg:            transparent;


// Inverted navmenu
//
// Reset inverted navmenu basics
$navmenu-inverse-color:                      $gray-light;
$navmenu-inverse-bg:                         #222;
$navmenu-inverse-border:                     darken($navmenu-inverse-bg, 10%);

// Inverted navmenu links
$navmenu-inverse-link-color:                 $gray-light;
$navmenu-inverse-link-hover-color:           #fff;
$navmenu-inverse-link-hover-bg:              transparent;
$navmenu-inverse-link-active-color:          $navmenu-inverse-link-hover-color;
$navmenu-inverse-link-active-bg:             darken($navmenu-inverse-bg, 10%);
$navmenu-inverse-link-disabled-color:        #444;
$navmenu-inverse-link-disabled-bg:           transparent;

// Inverted navmenu brand label
$navmenu-inverse-brand-color:                $navmenu-inverse-link-color;
$navmenu-inverse-brand-hover-color:          #fff;
$navmenu-inverse-brand-hover-bg:             transparent;

// Inverted navmenu search
// Normal navmenu needs no special styles or vars
$navmenu-inverse-search-bg:                  lighten($navmenu-inverse-bg, 25%);
$navmenu-inverse-search-bg-focus:            #fff;
$navmenu-inverse-search-border:              $navmenu-inverse-bg;
$navmenu-inverse-search-placeholder-color:   #ccc;


//== Navs
//
//##

$nav-link-padding:                          10px 15px;
$nav-tabs-active-link-hover-border-color:   #ddd;
$nav-tabs-border-color:                     #ddd;


//== Form states and alerts
//
//## Define colors for form feedback states and, by default, alerts.

$state-success-text:             #3c763d;
$state-success-bg:               #dff0d8;
$state-success-border:           darken(adjust-hue($state-success-bg, -10), 5%);

$state-info-text:                #31708f;
$state-info-bg:                  #d9edf7;
$state-info-border:              darken(adjust-hue($state-info-bg, -10), 7%);

$state-warning-text:             #8a6d3b;
$state-warning-bg:               #fcf8e3;
$state-warning-border:           darken(adjust-hue($state-warning-bg, -10), 5%);

$state-danger-text:              #a94442;
$state-danger-bg:                #f2dede;
$state-danger-border:            darken(adjust-hue($state-danger-bg, -10), 5%);


//== Alerts
//
//## Define alert colors, border radius, and padding.

$alert-border-radius:         $border-radius-base;
$alert-fixed-width:           $screen-md;