// ----------------------------------------------------------------------------
// This file defines Sass variables used to customize the Bootstrap design.
// Most of the times you don't need to customize any of these variables and it's
// enough to override the CSS variables defined in bootstrap-variables.scss. However,
// Bootstrap doesn't allow to customize all styles using CSS variables and
// that's when you'll need to override some of the variables of this file.
// ----------------------------------------------------------------------------
$enable-print-styles: false !default;
$enable-gradients: false !default;

$body-bg: hsl(220, 20%, 91%) !default;
$body-color: hsl(225, 15%, 35%) !default;
$text-color: hsl(225, 15%, 35%) !default;
$headings-color: var(--text-color-dark) !default;

$primary: hsl(230, 55%, 60%) !default;
$secondary: $body-bg !default;
$success: hsl(157, 69%, 38%) !default;
$info: hsl(201, 94%, 37%) !default;
$warning: hsl(30, 81%, 47%) !default;
$danger: hsl(344, 59%, 52%) !default;

$font-size-base: 0.875rem !default; // 14px;
$font-size-lg: 1rem !default; // 16px;
$font-size-sm: 0.8125rem !default; // 13px;

$gray-base: var(--black) !default;
$gray-darker: var(--gray-900) !default;
$gray-dark: var(--gray-800) !default;
$gray: var(--gray-700) !default;
$gray-light: var(--gray-600) !default;
$gray-lighter: var(--gray-200) !default;

$link-decoration: none !default;
$link-color: var(--link-color) !default;
$link-hover-color: var(--link-hover-color) !default;
$link-hover-decoration: var(--link-hover-decoration) !default;
$text-muted: var(--text-muted) !default;

$font-family-sans-serif: var(--font-family-sans-serif) !default;
$font-family-monospace: var(--font-family-monospace) !default;
$font-family-base: var(--font-family-base) !default;

$font-size-h1: calc(var(--font-size-base) * 2.6) !default;
$font-size-h2: calc(var(--font-size-base) * 2.15) !default;
$font-size-h3: calc(var(--font-size-base) * 1.7) !default;
$font-size-h4: calc(var(--font-size-base) * 1.25) !default;
$font-size-h5: var(--font-size-base) !default;
$font-size-h6: calc(var(--font-size-base) * 0.85) !default;

$input-bg: var(--white) !default;
$input-bg-disabled: var(--gray-100) !default;
$input-color: var(--text-color-dark) !default;
$input-border: var(--border-color) !default;
$input-border-radius: var(--border-radius) !default;
$input-border-focus: hsla(201, 94%, 37%, 0.2) !default;
$input-color-placeholder: var(--gray-600) !default;
$input-height-base: 30px !default;
$form-check-input-checked-bg-color: $primary !default;
$form-check-input-border-radius: var(--border-radius) !default;
$form-check-input-border: 1px solid var(--gray-400) !default;
$form-group-margin-bottom: 0 !default;
$input-group-addon-bg: hsl(210, 45%, 98%) !default; // var(--form-input-group-bg);
$legend-color: var(--gray-800) !default;
$legend-border-color: #e5e5e5 !default;

$border-radius-base: var(--border-radius) !default;
$border-radius-large: var(--border-radius) !default;
$btn-border-radius-base: var(--border-radius) !default;

$state-success-text: hsl(159, 75%, 22%) !default;
$state-success-bg: hsl(117, 66%, 87%) !default;
$state-success-border: transparent !default;
$state-info-text: hsl(238, 41%, 48%) !default;
$state-info-bg: hsl(208, 100%, 92%) !default;
$state-info-border: transparent !default;
$state-warning-text: hsl(20, 94%, 31%) !default;
$state-warning-bg: hsl(42, 82%, 85%) !default;
$state-warning-border: transparent !default;
$state-danger-text: hsl(338, 71%, 38%) !default;
$state-danger-bg: hsl(9, 89%, 93%) !default;
$state-danger-border: transparent !default;

$label-default-bg: $body-bg !default;
$label-primary-bg: $primary !default;
$label-success-bg: $success !default;
$label-info-bg: $info !default;
$label-warning-bg: $warning !default;
$label-danger-bg: $danger !default;
$label-color: $text-color !default;
$label-link-hover-color: $text-color !default;

$alert-padding: 15px 20px !default;
$alert-border-radius: var(--border-radius) !default;
$alert-link-font-weight: 500 !default;

$badge-font-size: var(--font-size-sm) !default;
$badge-font-weight: 500 !default;
$badge-border-radius: var(--border-radius) !default;
$badge-pill-padding-x: 8px !default;
$badge-pill-border-radius: 20px !default;

$dropdown-link-hover-color: var(--gray-900) !default;
$navbar-inverse-color: var(--gray-400) !default;
$navbar-inverse-link-color: var(--gray-400) !default;
$dropdown-border-color: var(--border-color) !default;
$dropdown-border-width: var(--border-width) !default;
$dropdown-box-shadow: var(--box-shadow-lg) !default;
$zindex-dropdown: 1000 !default;

$nav-tabs-border-color: var(--border-color) !default;
$nav-tabs-border-width: var(--border-width) !default;
$nav-tabs-border-radius: var(--border-radius) !default;
$nav-tabs-link-hover-border-color: transparent !default;
$nav-tabs-link-active-color: var(--gray-800) !default;
$nav-tabs-link-active-bg: transparent !default;
$nav-tabs-link-active-border-color: var(--border-color) var(--border-color) transparent var(--border-color) !default;

$modal-header-padding-y: 15px !default;
$modal-header-padding-x: 20px !default;
$modal-inner-padding: 15px 20px !default;
$modal-title-padding: 15px 20px !default;
$modal-content-bg: var(--modal-bg) !default;
$modal-content-border-color: var(--border-color) !default;
$modal-content-fallback-border-color: var(--border-color) !default;
$modal-backdrop-bg: var(--black) !default;
$modal-backdrop-opacity: .6 !default;
$modal-header-border-color: var(--modal-header-border-color) !default;
$modal-footer-border-color: $modal-header-border-color !default;
$modal-lg: 900px !default;
$modal-md: 500px !default;
$modal-sm: 300px !default;
$zindex-modal-backdrop: 2020 !default;
$zindex-modal: 2040 !default;

$offcanvas-padding-y: 15px !default;
$offcanvas-padding-x: 20px !default;

$pagination-padding-y: 4px !default;
$pagination-padding-x: 10px !default;
$pagination-color: var(--pagination-color) !default;
$pagination-line-height: 1.5 !default;
$pagination-bg: var(--white) !default;
$pagination-border-width: 1px !default;
$pagination-border-color: var(--gray-400) !default;
$pagination-focus-box-shadow: none !default;
$pagination-focus-outline: 0 !default;
$pagination-hover-color: var(--text-color) !default;
$pagination-hover-bg: var(--white) !default;
$pagination-hover-border-color: var(--gray-500) !default;
$pagination-disabled-color: var(--text-muted) !default;
$pagination-disabled-bg: var(--white) !default;
$pagination-disabled-border-color: transparent !default;

$custom-control-indicator-border-color: var(--gray-600) !default;
