//
// Custom Variables
//
// Here you can add your own variables overrides
//
// The file is included before any other variable file,
// so you can override them because they all use !default
// --------------------------------------------------

// For example, changing the primary color
$primary: #3b5998;
$secondary: #257bb9;
$success: #6bbb18;
$info: #34a7dc;
$warning: #e7a431;
$danger: #e33f3c;
$light: #f5f5f5;
$dark: #332d2d;

$white: #fff;
$black: #000;

$gray-50: #fbfbfb !default;
$gray-100: #f5f5f5 !default;
$gray-200: #eeeeee !default;
$gray-300: #e0e0e0 !default;
$gray-400: #bdbdbd !default;
$gray-500: #9e9e9e !default;
$gray-600: #757575 !default;
$gray-700: #616161 !default;
$gray-800: #4f4f4f !default;
$gray-900: #262626 !default;
$grays: (
    'gray-50': $gray-50,
    'gray-100': $gray-100,
    'gray-200': $gray-200,
    'gray-300': $gray-300,
    'gray-400': $gray-400,
    'gray-500': $gray-500,
    'gray-600': $gray-600,
    'gray-700': $gray-700,
    'gray-800': $gray-800,
    'gray-900': $gray-900,
) !default;

$brown-50: #efebe9 !default;
$brown-100: #d7ccc8 !default;
$brown-200: #bcaaa4 !default;
$brown-300: #a1887f !default;
$brown-400: #8d6e63 !default;
$brown-500: #795548 !default;
$brown-600: #6d4c41 !default;
$brown-700: #5d4037 !default;
$brown-800: #4e342e !default;
$brown-900: #3e2723 !default;
$browns: (
    'brown-50': $brown-50,
    'brown-100': $brown-100,
    'brown-200': $brown-200,
    'brown-300': $brown-300,
    'brown-400': $brown-400,
    'brown-500': $brown-500,
    'brown-600': $brown-600,
    'brown-700': $brown-700,
    'brown-800': $brown-800,
    'brown-900': $brown-900,
) !default;

$blue-gray-50: #eceff1 !default;
$blue-gray-100: #cfd8dc !default;
$blue-gray-200: #b0bec5 !default;
$blue-gray-300: #90a4ae !default;
$blue-gray-400: #78909c !default;
$blue-gray-500: #607d8b !default;
$blue-gray-600: #546e7a !default;
$blue-gray-700: #455a64 !default;
$blue-gray-800: #37474f !default;
$blue-gray-900: #263238 !default;
$blue-grays: (
    'blue-gray-50': $blue-gray-50,
    'blue-gray-100': $blue-gray-100,
    'blue-gray-200': $blue-gray-200,
    'blue-gray-300': $blue-gray-300,
    'blue-gray-400': $blue-gray-400,
    'blue-gray-500': $blue-gray-500,
    'blue-gray-600': $blue-gray-600,
    'blue-gray-700': $blue-gray-700,
    'blue-gray-800': $blue-gray-800,
    'blue-gray-900': $blue-gray-900,
) !default;

$theme-colors: (
    'primary': $primary,
    'secondary': $secondary,
    'success': $success,
    'danger': $danger,
    'warning': $warning,
    'info': $info,
    'light': $light,
    'dark': $dark,
    'gray': $gray-500,
) !default;

$primary-light: tint-color($primary, 45%);
$primary-lighter: tint-color($primary, 68%);
$primary-dark: darken($primary, 5%);
$primary-darker: darken($primary, 15%);

$secondary-light: tint-color($secondary, 45%);
$secondary-lighter: tint-color($secondary, 68%);
$secondary-dark: darken($secondary, 5%);
$secondary-darker: darken($secondary, 15%);

$success-light: tint-color($success, 45%);
$success-lighter: tint-color($success, 68%);
$success-dark: darken($success, 5%);
$success-darker: darken($success, 15%);

$info-light: tint-color($info, 45%);
$info-lighter: tint-color($info, 68%);
$info-dark: darken($info, 5%);
$info-darker: darken($info, 15%);

$warning-light: tint-color($warning, 45%);
$warning-lighter: tint-color($warning, 68%);
$warning-dark: darken($warning, 5%);
$warning-darker: darken($warning, 15%);

$danger-light: tint-color($danger, 45%);
$danger-lighter: tint-color($danger, 68%);
$danger-dark: darken($danger, 5%);
$danger-darker: darken($danger, 15%);

$primary-text-emphasis:   shade-color($primary, 25%) !default;
$secondary-text-emphasis: shade-color($secondary, 25%) !default;
$success-text-emphasis:   shade-color($success, 25%) !default;
$info-text-emphasis:      shade-color($info, 25%) !default;
$warning-text-emphasis:   shade-color($warning, 25%) !default;
$danger-text-emphasis:    shade-color($danger, 25%) !default;
$light-text-emphasis:     shade-color($light, 25%) !default;
$dark-text-emphasis:      shade-color($dark, 25%) !default;

$input-placeholder-color: $gray-400 !default;
$input-btn-padding-y: .4rem !default;
$input-btn-padding-x: .75rem !default;

$min-contrast-ratio: 2.1 !default;

$btn-padding-top: 0.6rem;
$btn-padding-top-sm: 0.363rem !default;
$btn-padding-top-lg: 0.73rem !default;
$btn-padding-bottom: 0.5rem;
$btn-padding-bottom-sm: 0.3rem !default;
$btn-padding-bottom-lg: 0.65rem !default;
$btn-padding-x: 1rem !default;
$btn-padding-x-sm: 0.875rem !default;
$btn-padding-x-lg: 1.25rem !default;

$btn-outline-padding-top: 0.6rem;
$btn-outline-padding-top-sm: 0.363rem;
$btn-outline-padding-top-lg: 0.73rem;
$btn-outline-padding-bottom: 0.5rem;
$btn-outline-padding-bottom-sm: 0.3rem !default;
$btn-outline-padding-bottom-lg: 0.65rem !default;
$btn-outline-padding-x: 1rem !default;
$btn-outline-padding-x-sm: 0.875rem !default;
$btn-outline-padding-x-lg: 1.25rem !default;

$border-width-alternate: 2px !default;
$btn-outline-border-width: 0 !default;

$buttons: () !default;
$buttons: map-merge(
        (
            'secondary': (
                'background-color': $secondary,
                'text-color': $white,
                'shadow-color': $secondary,
            ),
            'success': (
                'background-color': $success,
                'text-color': $white,
                'shadow-color': $success,
            ),
            'light': (
                'background-color': $light,
                'text-color': $gray-500,
                'shadow-color': $light,
            ),
            'gray': (
                'background-color': $gray-500,
                'text-color': $white,
                'shadow-color': $gray-500,
            ),
        ),
        $buttons
);

$ripple: (
    'primary': $primary,
    'secondary': $secondary,
    'success': $success,
    'danger': $danger,
    'warning': $warning,
    'info': $info,
    'light': $light,
    'dark': $dark,
    'gray': $gray-500,
) !default;

$border-color: $gray-300;
$border-width: 1px;

$font-size-base: 1rem;
$font-size-sm: $font-size-base * .875;
$font-size-xs: $font-size-base * .6;

$popover-max-width: auto;
$popover-border-color: $primary;

$modal-content-bg: $white;
$modal-sm: 350px !default;
$modal-md: 700px !default;
$modal-lg: 850px !default;
$modal-xl: 1140px !default;

$modal-header-bg: $light !default;
$modal-header-border-color: $border-color;
$modal-header-border-width: $border-width;

$modal-footer-bg: $light !default;
$modal-footer-border-color: $border-color;
$modal-footer-border-width: $border-width;

$form-outline-select-dropdown-min-width: 320px !default;

$input-disabled-color: $gray-100 !default;
$input-border-color: lighten($gray-500, 5%) !default;
$input-focus-border-color: darken($primary, 10%) !default;
$form-check-input-border: 1px solid lighten($gray-500, 5%) !default;

$header-height: 3.5rem !default;