//  ================================================================================================
//  File Name: variables.scss
//  Description: Custom overrides of Bootstrap variables
//  ----------------------------------------------------------------------------------------------
//  Item Name: Frest HTML Admin Template
//  Version: 2.1
//  Author: PIXINVENT
//  Author URL: http://www.themeforest.net/user/pixinvent
//  ================================================================================================

// Color system

$white: #FFFFFF;
$gray-100: #A3AFBD; // $gray-lightest
$gray-200: #828D99; // 919FB0; // $gray-lighter
$gray-300: #7E8FA3; // $gray-light
$gray-400: #6C7f95;
$gray-500: #596F88;
$gray-600: #475F7B; // $gray
$gray-700: #40566F;
$gray-800: #394C62; // $gray-dark
$gray-900: #324356;
$black: #000;

$blue: #5A8DEE; //$primary
$red: #FF5B5C; //$danger
$yellow: #FDAC41; //$warning
$green: #39DA8A; //$success
$cyan: #00CFDD; //$info


$primary: $blue;


// 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: #F2F4F4;
$body-color: #727E8C;

// Links
//
// Style anchor elements.

$link-color: $primary;
// $link-hover-color: darken($link-color, 5%);
$link-hover-decoration: none;

// Grid columns
//
// Set the number of columns and specify the width of the gutters.

// $grid-gutter-width: 28px;

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

$line-height-lg: 1.4;
$line-height-sm: 1.1;
$border-width: 1px;
$border-color: #DFE3E7;
$border-radius: 0.267rem;
$border-radius-lg: 0.6rem;
$border-radius-sm: 0.25rem;

$box-shadow: 0 2px 4px 0 rgba($black, .2) !default;

// Typography

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

// stylelint-disable value-keyword-case
$font-family-sans-serif: "IBM Plex Sans",
Helvetica,
Arial,
serif;
$font-family-monospace: "Rubik",
Helvetica,
Arial,
serif;

// stylelint-enable value-keyword-case
$font-size-base: 1rem;
$font-size-sm: 0.8rem;
$font-size-lg: 1.2rem;

$font-weight-bold: 500;

$line-height-base: 1.4;

$h1-font-size: $font-size-base * 2.53;
$h2-font-size: $font-size-base * 2.13;
$h3-font-size: $font-size-base * 1.73;
$h4-font-size: $font-size-base * 1.47;
$h5-font-size: $font-size-base * 1.3;

$headings-font-family: $font-family-monospace;
$headings-font-weight: 500;
$headings-color: $gray-600;

$text-muted: $gray-200;

$blockquote-small-color: $gray-200;
$blockquote-small-font-size: $font-size-base;
$blockquote-font-size: $font-size-base;

$hr-border-color: $border-color;

// Tables

$table-cell-padding: 1.15rem 2rem;
$table-head-bg: #F2F4F4;
$table-head-color: $gray-600;
$table-hover-bg: #F2F4F4;
$table-accent-bg: #fafbfb;
$table-border-color: #DFE3E7;
$table-dark-border-color: $gray-700;
$table-dark-bg: $gray-600;

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

$input-btn-padding-y: .8rem;
$input-btn-padding-x: 1.6rem;
$input-btn-line-height: $line-height-lg;
$input-btn-font-size: $font-size-base;

$input-btn-padding-y-sm: 0.47rem;
$input-btn-padding-x-sm: 1.6rem;
$input-btn-font-size-sm: $font-size-sm;

$input-btn-padding-y-lg: 0.667rem;
$input-btn-padding-x-lg: 0.8rem;
$input-btn-font-size-lg: $font-size-lg;

// Buttons
//
// For each of Bootstrap's buttons, define text, background, and border color.

$btn-padding-y: .467rem;
$btn-padding-x: 1.5rem;
$btn-line-height: 1.6rem;

$btn-padding-y-sm: .467rem;
$btn-padding-x-sm: 1.2rem;
$btn-line-height-sm: 1.4;

$btn-padding-y-lg: .6rem;
$btn-padding-x-lg: 1.8rem;
$btn-line-height-lg: 1.7;

$btn-border-width: 0;

$btn-disabled-opacity: .45;

$btn-border-radius: $border-radius;
$btn-border-radius-lg: $border-radius;
$btn-border-radius-sm: $border-radius;

$btn-link-disabled-color: $gray-200;

// Forms

$label-margin-bottom: .2rem;
$input-padding-y: 0.47rem;
$input-padding-x: 0.8rem;
$input-line-height: $line-height-lg;

$input-padding-y-sm: .35rem;
$input-padding-x-sm: 0.7rem;

$input-padding-y-lg: $input-btn-padding-y-lg;
$input-padding-x-lg: $input-btn-padding-x-lg;

$input-disabled-bg: #F2F4F4;

$input-color: $headings-color;
$input-border-color: $border-color;
$input-border-width: $border-width;

$input-border-radius: $border-radius;
$input-border-radius-lg: $border-radius;
$input-border-radius-sm: $border-radius;

$input-focus-border-color: $primary;
$input-focus-box-shadow :0 3px 8px 0 rgba($black,.1);

$input-placeholder-color: $gray-200;
$input-plaintext-color: $body-color;

$input-height-border: $input-border-width * 3.7;

$input-height-inner: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2.7});

$custom-control-indicator-border-color: $border-color;

$custom-file-height: 38px;

$custom-file-padding-y: 0.65rem;

$input-group-addon-bg: #f0f4f7;

$custom-switch-width: 2.75rem;
$custom-switch-indicator-border-radius: .8rem;
$custom-switch-indicator-size: 18px;

$custom-select-focus-box-shadow: $input-focus-box-shadow;


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

$zindex-dropdown: 10;
$zindex-tooltip: 1070;

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

$dropdown-min-width: 9.65rem;
$dropdown-padding-y: .4rem;
$dropdown-spacer: .5rem;
$dropdown-font-size: 0.8rem;
$dropdown-border-color: $border-color;
$dropdown-border-radius: 5px;

$dropdown-divider-bg: $border-color;
$dropdown-link-color: $headings-color;
$dropdown-link-hover-color: $headings-color;
$dropdown-link-hover-bg: #F2F4F4;

$dropdown-link-active-color: $white;

$dropdown-link-disabled-color: $gray-200; //$gray-100;

$dropdown-item-padding-y: .8rem;//.434rem;
$dropdown-item-padding-x: 1.6rem; //1.25rem;

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

// Pagination

$pagination-padding-y: 0.47rem;
$pagination-padding-x: 0.73rem;
$pagination-padding-y-lg: .54rem;
$pagination-padding-x-lg: 1.2rem;
$pagination-padding-y-sm: .367rem;
$pagination-padding-x-sm: .6rem;

$pagination-active-border-color: #e7edf3;
$pagination-border-color: $border-color;

$pagination-color: #3F3356;
$pagination-border-width: 0;

$pagination-disabled-color: $gray-200;
$pagination-disabled-bg: $input-disabled-bg;

// Modals

// Padding applied to the modal body
$modal-inner-padding: 1.3rem 2.3rem;

$modal-content-border-width: none;
$modal-content-border-radius: $border-radius;
$modal-content-box-shadow-xs: -8px 12px 18px 0 rgba(25, 42, 70, 0.13);
$modal-content-box-shadow-sm-up: -8px 12px 18px 0 rgba(25, 42, 70, 0.13);
$modal-header-border-color:$border-color;
$modal-header-border-width:1px;
$modal-header-padding-y: 1.05rem ;
$modal-header-padding-x: 2.3rem ;
$modal-md: 540px ;


//Alerts

$alert-padding-y: 0.71rem;
$alert-padding-x: 0.71rem;

// Nav tabs

$nav-link-padding-y: 0.567rem ;
$nav-link-padding-x: 1.33rem;
$nav-tabs-border-radius: $border-radius;
$nav-tabs-link-active-color: $white;
$nav-tabs-link-active-bg: $primary;
$nav-tabs-link-hover-border-color: transparent;
$nav-tabs-link-active-border-color: transparent;
// nav-pills
$nav-pills-border-radius: $border-radius;

// Navbar
$navbar-brand-font-size: 1.46rem;
// Cards

$card-spacer-y: 1.4rem;
$card-spacer-x: 1.7rem;
$card-border-width: 0px;
$card-cap-bg: transparent;
$card-group-margin: 0.75rem;
$card-columns-gap: 1.6rem;
$card-border-color:#dfe3e7;
// Tooltips

$tooltip-bg: #475F7B;
$tooltip-border-radius: .267rem;
$tooltip-padding-y: .267rem;
$tooltip-padding-x: .867rem;
$tooltip-font-size: $font-size-base;
$tooltip-opacity: 1;

$tooltip-arrow-width: 1.07rem;
$tooltip-arrow-height: .53rem;

$form-feedback-tooltip-opacity: 0.2;
$form-feedback-tooltip-font-size: $font-size-sm;

// Popovers

$popover-font-size: $font-size-base;
$popover-border-color: $border-color;
$popover-border-radius: .267rem;
$popover-box-shadow: 0 0 10px 0 rgba(58,70,93,0.25);

$popover-header-bg: $white;
$popover-header-color: #304156;



// Toasts

$toast-max-width: 25.33rem;
$toast-padding-x: 1.4rem;
$toast-padding-y: .86rem;
$toast-font-size: $font-size-base;
$toast-background-color: $white;
$toast-background-color: rgba($white, .95);
$toast-border-color: #DFE3E7;
$toast-border-radius: $border-radius;
$toast-box-shadow: 0 4px 12px 0 rgba($black, .08);

$toast-header-color: $white;
$toast-header-background-color: $primary;
$toast-header-border-color: transparent;

// Badges

$badge-font-size: $font-size-sm;
$badge-font-weight: 400;
$badge-padding-y: .34rem;
$badge-padding-x: 1.11rem;
$badge-border-radius: .267rem;

$badge-pill-padding-x: 1.11rem;

$badge-pill-border-radius: 2rem;

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

$alert-padding-y: 1.1rem;
$alert-padding-x: 1.267rem;
$alert-margin-bottom: 2.67rem;
$alert-border-radius: $border-radius;
$alert-link-font-weight: $headings-font-weight;
$alert-border-width: 0;

// Progress

$progress-height: .357rem;
$progress-border-radius: 1.28rem;
$progress-box-shadow: 0 2px 6px 0 rgba($primary, 0.6);


// List group

$list-group-color: $gray-500;
$list-group-border-color: #DFE3E7;
$list-group-disabled-bg: #e7edf3;
$list-group-disabled-color: $gray-200;
$list-group-item-padding-y: 1rem;
$list-group-item-padding-x: 2rem;
$list-group-hover-bg: #F2F4F4;

// Image thumbnails

$thumbnail-box-shadow: 0 5px 25px 0 rgba($black, .4);

// Breadcrumbs

$breadcrumb-padding-y: 1.05rem;
$breadcrumb-padding-x: 1.67rem;
$breadcrumb-item-padding: .93rem;

$breadcrumb-bg: #F2F4F4;
$breadcrumb-active-color: $primary;
$breadcrumb-divider: quote("|");

$breadcrumb-border-radius: $border-radius;

// carousel

// $carousel-control-width: 14px;

$carousel-indicator-width: 24px;
$carousel-indicator-height: 6px;

$carousel-control-icon-width: 14px;

$carousel-caption-color: $white !default;


// Code

$code-font-size: 90% !default;
$kbd-bg: #eee;
