// Color system

$primary:   #4d6bb2;
$secondary: #6c757d;
$success:   #7dc67d;
$info:      #7ccde5;
$warning:   #f3bd71;
$danger:    #e17572;
$light:     #bbbbbb;
$dark:      #444444;


// Body

$body-bg:    #f3f3f3;
$body-color: #333333;


// The contrast ratio to reach against white, to determine if color changes from "light" to "dark".
$min-contrast-ratio: 1.7;

// Enable box shadows
$enable-shadows: true;

// Decrease default grid spacing
$grid-gutter-width: 1.25rem;


// Characters which are escaped by the escape-svg function
$escaped-characters: (
  ("<", "%3c"),
  (">", "%3e"),
  ("#", "%23"),
  ("(", "%28"),
  (")", "%29"),
) !default;


// Components

$box-shadow: soft-shadow(1rem, 1.5em, rgba(black, 0.25));
$box-shadow-sm: soft-shadow(0.5rem, 0.75em, rgba(black, 0.075), $layers: 4);


// Typography

$link-decoration: none;

$headings-font-weight:   400;
$headings-margin-bottom: 1rem;

$font-size-base: 0.875rem;

$h1-font-size: 1.75rem;
$h2-font-size: 1.5rem;
$h3-font-size: 1.25rem;
$h4-font-size: 1.125rem;
$h5-font-size: 0.95rem;
$h6-font-size: 0.875rem;

$hr-color: rgba(black, 0.375);
$hr-margin-y: 1.25rem;


// Navs

$nav-pills-link-active-bg: var(--primary);

$nav-tabs-border-radius: 0;
$nav-tabs-border-width:  0;

// (non-Bootstrap variables)
$nav-tabs-link-bg:          #eeeeee;
$nav-tabs-link-color:       #555555;
$nav-tabs-link-hover-bg:    #eaeaea;
$nav-tabs-link-hover-color: #505050;
$nav-tabs-link-transition:  color .1s ease-in-out, background-color .1s ease-in-out;

$nav-tabs-link-active-bg:    white;
$nav-tabs-link-active-color: $body-color;


// Navbar

$navbar-light-color: rgba(white, 0.75);
$navbar-dark-color:  rgba(white, 0.75);

$navbar-toggler-padding-x:   0.375rem;
$navbar-toggler-focus-width: 0.25rem;


// Breadcrumbs

$breadcrumb-padding-y:     0;
$breadcrumb-padding-x:     0;
$breadcrumb-active-color:  #777777;
$breadcrumb-divider-color: #cccccc;


// Tables

$table-cell-padding-x: 0.5rem;
$table-cell-padding-y: 0.375rem;

$table-bg:           transparent;
$table-striped-bg:   rgba(black, 0.02);
$table-hover-bg:     rgba(black, 0.04);
$table-border-color: rgba(black, 0.13);


// Alerts

$alert-padding-y:     1.25rem;
$alert-border-radius: 0.1rem;


// Progress bars

$progress-bar-bg: var(--primary);


// List group

$list-group-bg: white;
$list-group-active-bg: var(--primary);


// Close

$btn-close-color: white;
$btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");


// Badges

$badge-padding-y: 0.35em;
$badge-padding-x: 0.6em;


// Buttons

$btn-padding-x-sm: 0.625rem;
$btn-padding-y-sm: 0.25rem;


// Forms

$input-bg:           white;
$input-disabled-bg:  #fafafa;

$input-border-color: #cccccc;

$input-placeholder-color: #999999;

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

$form-feedback-invalid-color: shade-color($danger, 10%);

$form-feedback-margin-top: 0.5rem;
$form-feedback-font-size:  90%;

$form-label-font-weight: bold;

$form-text-color: #666666;

$form-check-input-width: 1.25em;
$form-check-padding-start: $form-check-input-width + 0.6em;

$form-switch-width: 2.25em;
$form-switch-focus-color: #aaaaaa;

$form-select-padding-x-sm: 0.625rem;
$form-select-padding-x-lg: 0.75rem;


// Dropdowns

$dropdown-bg:                white;
$dropdown-spacer:            0.5rem;
$dropdown-box-shadow:        $box-shadow-sm;
$dropdown-arrow-width:       7px;
$dropdown-arrow-outer-width: $dropdown-arrow-width + 1px;
$dropdown-header-color:      #111111;
$dropdown-font-size:         0.8125rem;

$dropdown-link-active-bg:    var(--primary);

$dropdown-dark-bg:           #222222;
$dropdown-dark-divider-bg:   rgba(white, 0.15);


// Pagination

$pagination-bg:          white;
$pagination-disabled-bg: white;


// Cards

$card-bg:            rgba(white, 0.5);
$card-border-radius: 0;


// Accordion

$accordion-bg:                white;
$accordion-icon-active-color: #111111;


// Tooltips

$tooltip-color: white;


// Popovers

$popover-font-size:      0.75rem;
$popover-box-shadow:     $dropdown-box-shadow;

$popover-header-bg:      #f7f7f7;
$popover-header-border:  #ebebeb;

$popover-header-padding-x: 0.625rem;
$popover-header-padding-y: 0.375rem;

$popover-body-padding-x: 0.625rem;
$popover-body-padding-y: 0.5rem;

$popover-arrow-width:    $dropdown-arrow-width;


// Modals

$modal-inner-padding:    1.25rem;

$modal-header-padding-x: 1.25rem;
$modal-header-padding-y: 1rem;

$modal-content-bg: white;
$modal-content-border-radius: 0;
$modal-content-border-width:  0;

$modal-footer-border-width: 1px;
$modal-footer-border-color: rgba(black, 0.1);

$modal-md: 600px;
$modal-lg: 900px;


// Select2 Bootstrap Theme

$s2bs5-border-color: #ced4da;

$s2bs5-item-active-bg: tint-color($primary, 90%);

$s2b25-clear-width: 0.5rem;
$s2b25-clear-height: 0.5rem;
$s2b25-clear-height-sm: 0.5rem;
$s2b25-clear-height-lg: 1rem;

$s2bs5-clear-icon:        str-replace($btn-close-bg, #{$btn-close-color}, #{shade-color($s2bs5-border-color, 50%)});
$s2bs5-clear-bg:          transparent escape-svg($s2bs5-clear-icon) center / $s2b25-clear-height auto no-repeat;
$s2bs5-clear-hover-bg:    $s2bs5-clear-bg;

$s2bs5-clear-bg-sm:       transparent escape-svg($s2bs5-clear-icon) center / $s2b25-clear-height-sm auto no-repeat;
$s2bs5-clear-hover-bg-sm: $s2bs5-clear-bg-sm;

$s2bs5-clear-bg-lg:       transparent escape-svg($s2bs5-clear-icon) center / $s2b25-clear-height-lg auto no-repeat;
$s2bs5-clear-hover-bg-lg: $s2bs5-clear-bg-lg;

$s2bs5-clear-tag-icon:    $btn-close-bg;
$s2bs5-clear-tag-bg:      transparent escape-svg($s2bs5-clear-tag-icon) center / $s2b25-clear-height-sm auto no-repeat;

$s2bs5-padding-x: 0.625rem;
$s2bs5-padding-y: 0.375rem;

$s2bs5-multi-item-padding-x: 0.375rem;
$s2bs5-multi-item-padding-y: 0;