//	================================================================================================
//	File Name: bootstrap-variables.scss
//	Description: Bootstrap extedned vaiables file
//	----------------------------------------------------------------------------------------------
//	Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
//	Author: PIXINVENT
//	Author URL: http://www.themeforest.net/user/pixinvent
//	================================================================================================

// ================================================================================================

// WARNING: THIS FILE WILL GET OVERWRITTEN WITH EACH MODERN TEMPLATE RELEASE.

// TIP: YOU CAN CUSTOMIZE BOOTSTRAP VARIABLE AS PER YOUR REQUIREMENTS, IT WILL AFFECT ONLY
//      FOR DEFAULT LAYOUTS. ALWAYS KEEP BACKUP IF YOU CHANGE THIS FILE.

// ================================================================================================

// Variables
//
// Variables should follow the `$component-state-property-size` formula for
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.

//
// Color system
//

$white: #fff;
$gray-100: #babfc7; // $gray-lightest
$gray-200: #98a4b8; // $gray-lighter
$gray-300: #626e82; // $gray-light
$gray-400: #6f7274;
$gray-500: #adb5bd;
$gray-600: #6b6f82; // $gray
$gray-700: #4e5154;
$gray-800: #464855; // $gray-dark
$gray-900: #2a2e30;
$black: #000;

$blue: #1e9ff2; //$info
// $indigo: #6610f2;
// $purple: #6f42c1;
// $pink: #e83e8c;
$red: #ff4961; //$danger
$orange: #ff9149; //$warning
// $yellow: #ffc107;
$green: #28d094; //$success
// $teal: #20c997;
$cyan: #666ee8; //$primary

$primary: $cyan;
// $secondary: $gray-600;
// $success: $green;
$info: $blue;
$warning: $orange;
// $danger: $red;
// $light: $gray-100; // $gray-100
// $dark: $gray-800; // $gray-dakr

// // Spacing
// //
// // Control the default styling of most Bootstrap elements by modifying these
// // variables. Mostly focused on spacing.
// // You can add more entries to the $spacers map, should you need more variation.

// stylelint-disable
$spacer: 1rem;
$spacers: ();
// stylelint-disable-next-line scss/dollar-variable-default
$spacers: map-merge((0: 0,
    25: ($spacer * .25),
    50: ($spacer * .5),
    75: ($spacer * .75),
    1: ($spacer),
    2: ($spacer * 1.5),
    3: ($spacer * 3),
    4: ($spacer * 3.5),
    5: ($spacer * 4)),
  $spacers);


// Body
//
// Settings for the `<body>` element.

$body-bg: #f4f5fa;
$body-color: $gray-600;

// // Links
// //
// // Style anchor elements.

$link-color: darken($primary, 5%);

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

$line-height-lg: 1.25;
$line-height-sm: 1;

$border-width: 1px;

$border-radius-lg: 0.35rem;
$border-radius-sm: 0.21rem;

$component-active-bg: $info;

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

// // stylelint-disable value-keyword-case
$font-family-sans-serif: "Open Sans",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
"Helvetica Neue",
Arial,
sans-serif;
$font-family-monospace: "Quicksand",
Georgia,
"Times New Roman",
Times,
serif;
$font-family-base: $font-family-sans-serif;

// // stylelint-enable value-keyword-case

$font-size-base: 1rem; // Assumes the browser default, typically `16px`

$font-size-sm: ($font-size-base * 0.875);

$line-height-base: 1.45;

$h1-font-size: $font-size-base * 2;
$h2-font-size: $font-size-base * 1.74;
$h3-font-size: $font-size-base * 1.51;
$h4-font-size: $font-size-base * 1.32;
$h5-font-size: $font-size-base * 1.14;

$headings-font-family: $font-family-monospace;
$headings-font-weight: 400;

$headings-color: $gray-800;

$display1-weight: 400;
$display2-weight: 400;
$display3-weight: 400;
$display4-weight: 400;

$lead-font-weight: 400;

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

// $table-bg: transparent;
$table-accent-bg: rgba(245, 247, 250, 0.5);
$table-hover-bg: rgba(245, 247, 250, 0.5);

// // Buttons + Forms
// //
// // Shared variables that are reassigned to `$input-` and `$btn-` specific variables.

$input-btn-padding-y: 0.75rem;
$input-btn-padding-x: 1rem;
$input-btn-line-height: $line-height-lg;

$input-btn-focus-box-shadow: none;

$input-btn-padding-y-sm: 0.5rem;
$input-btn-padding-x-sm: 0.75rem;
$input-btn-line-height-sm: $line-height-sm;

$input-btn-padding-y-lg: 1rem;
$input-btn-padding-x-lg: 1.25rem;

$input-btn-border-width: $border-width;

// // Forms

$input-border-color: $gray-100;
$input-border-width: $input-btn-border-width;

$input-focus-border-color: $info;

$input-placeholder-color: $gray-100;
$input-height-border: $input-border-width * 2;

$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm)+($input-btn-padding-y-sm * 2);
$input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border});

$input-group-addon-bg: $body-bg;

$custom-select-focus-border-color: $input-focus-border-color;

$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, 0.075),
0 0 5px rgba($custom-select-focus-border-color, 0.5);

// // Dropdowns
// //
// // Dropdown menu container and contents.

$dropdown-link-hover-bg: $body-bg;

// // 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.

$nav-tabs-border-color: $gray-100;

// // Navbar

$navbar-dark-color: rgba($white, 1);
$navbar-dark-hover-color: rgba($white, 0.9);

$navbar-dark-disabled-color: rgba($white, 0.5);

$navbar-light-color: $gray-600;
$navbar-light-hover-color: $gray-300;
$navbar-light-active-color: $gray-800;
$navbar-light-disabled-color: $body-bg;

$pagination-hover-bg: $body-bg;

// // Cards

$card-spacer-y: 1.5rem;
$card-spacer-x: 1.5rem;

$card-border-radius: $border-radius-lg;
$card-border-color: rgba($black, 0.06);

$card-cap-bg: $white;

$card-columns-count: 3;

// // Tooltips

$tooltip-opacity: 0.9;
$tooltip-margin: 0;

// // Popovers

// // Badges

$badge-font-size: 80%;

$badge-padding-y: 0.35em;

// // Modals

$modal-backdrop-opacity: 0.5;

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

$alert-padding-x: 1rem;
$alert-border-level: -9;
$alert-color-level: 6;

// // Progress bars

$progress-bg: #eee;
// // List group

$list-group-border-color: #e4e7ed;

$list-group-item-padding-y: 1.25rem;

$list-group-hover-bg: $body-bg;

// // Breadcrumbs
$breadcrumb-padding-x: 0rem;

// // Carousel

$carousel-control-opacity: 0.5;

// // Code
$code-color: #f74b5c;

$kbd-bg: lighten($gray-100, 20%);

$pre-color: $gray-600;

// Z-index
$zindex-fixed: 1038 !default;

// Overwrite material variable
