// ----------------------------------------------
// Variables Style
// ----------------------------------------------

// colors
$white: #fff !default;
$gray-100: #e9edf2 !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #67757c !default;
$gray-600: #545b62 !default;
$gray-700: #4f5467 !default;
$gray-800: #263238 !default;
$gray-900: #212529 !default;
$black: #000 !default;
$body-color: #67757c !default;

// Color
$blue: #186dde !default;
$indigo: #7460ee !default;
$purple: #745af2 !default;
$pink: #e83e8c !default;
$red: #ef5350 !default;
$orange: #fb8c00 !default;
$yellow: #ffb22b !default;
$green: #0a8754 !default;
$teal: #20c997 !default;
$cyan: #26c6da !default;
$text-muted: $gray-500 !default;

// Main Colors
$primary: $blue !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $indigo !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$muted: $gray-500 !default;
$dark: #1d2228 !default;
$dark-light: $gray-600 !default;
$light-gray: $gray-100 !default;
$light-indigo: #ebf3fe;

// light colors
$primary-bg-subtle: #cbe2ff !default;
$secondary-bg-subtle: #dde1e4 !default;
$success-bg-subtle: #caf3e7 !default;
$info-bg-subtle: #e1dcff !default;
$warning-bg-subtle: #fbecd3 !default;
$danger-bg-subtle: #ffe6eb !default;
$light-bg-subtle: #f6f6f6 !default;
$dark-bg-subtle: $gray-600 !default;

// Theme Colorss
$theme-colors: (
  'primary': $primary,
  'secondary': $secondary,
  'success': $success,
  'info': $info,
  'warning': $warning,
  'danger': $danger,
  'light': $light,
  'dark': $dark,
  'muted': $muted,
  'indigo': $indigo,
  'light-indigo': $light-indigo,
) !default;

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

// Spacer
$spacer: 1.125rem;
$spacers: (
  0: 0,
  1: $spacer * 0.25,
  2: $spacer * 0.5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

$extend-spacers: (
  6: $spacer * 1.5,
  7: $spacer * 1.75,
  8: $spacer * 2,
  9: $spacer * 2.25,
  10: $spacer * 2.5,
  11: $spacer * 2.75,
  12: $spacer * 3,
  14: $spacer * 3.5,
  16: $spacer * 4,
  20: $spacer * 5,
  24: $spacer * 6,
  28: $spacer * 7,
  32: $spacer * 8,
  36: $spacer * 9,
  40: $spacer * 10,
  44: $spacer * 11,
  48: $spacer * 12,
  52: $spacer * 13,
  56: $spacer * 14,
  60: $spacer * 15,
  64: $spacer * 16,
  72: $spacer * 18,
  80: $spacer * 20,
  96: $spacer * 24,
);

$spacers: map-merge($spacers, $extend-spacers);

$utilities: () !default;
$utilities: (
  'width': (
    property: width,
    class: w,
    values: (
      20: 20%,
      25: 25%,
      30: 30%,
      40: 40%,
      50: 50%,
      60: 60%,
      70: 70%,
      75: 75%,
      85: 85%,
      100: 100%,
      auto: auto,
    ),
  ),
);

$border-radius: 3px !default;

// Common
$min-contrast-ratio: 1.7 !default;

// ======================================================
// Enable optional
// ======================================================
$enable-caret: true !default;
$enable-rounded: true !default;
$enable-shadows: false !default;
$enable-gradients: false !default;
$enable-transitions: true !default;
$enable-hover-media-query: false !default;
$enable-grid-classes: true !default;
$enable-print-styles: false !default;
$enable-negative-margins: true;

// Global
$text-muted: $muted !default;
$grid-gutter-width: 24px !default;

// Font Weight
$font-weight-lighter: 300 !default;
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-bold: 500 !default;
$font-weight-bolder: 700 !default;
$font-weight-base: 400 !default;

// Buttons
$btn-padding-y: 7px !default;
$btn-padding-x: 16px !default;
$btn-font-weight: 500 !default;
$btn-border-radius: 60px !default;
$btn-box-shadow: unset !default;
$btn-font-size: 14px !default;
$btn-border-radius-lg: 60px !default;

// ======================================================
// Typography
// ======================================================
$font-size-base: 0.875rem !default;
$font-weight-base: 300 !default;
$font-family-sans-serif: 'Poppins', sans-serif !default;
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-medium: 500 !default;
$font-weight-bold: 800 !default;
$h1-font-size: 36px !default;
$h2-font-size: 24px !default;
$h3-font-size: 21px !default;
$h4-font-size: 18px !default;
$h5-font-size: 16px !default;
$h6-font-size: 14px !default;
$headings-font-family: 'Open Sans', sans-serif !default;
$headings-margin-bottom: 8px !default;
$headings-font-weight: 400 !default;
$headings-color: #000000 !default;

// Font Sizes
$font-sizes: (
  1: 10px,
  2: 12px,
  3: 14px,
  4: 16px,
  5: 18px,
  6: 20px,
  7: 24px,
  8: 30px,
  9: 36px,
  10: 40px,
  11: 45px,
  12: 48px,
  13: 55px,
) !default;
//$font-size-base: 0.875rem !default;

// Line Heght
$line-height-base: 1.5 !default;
$line-height-sm: 1.25 !default;
$line-height-lg: 2 !default;

// Body
$body-bg: #f4f6f9 !default;
$body-color: #f7f7f8 !default;

// Heading
$headings-color: $dark !default;

// Border Color
$border-color: #dfe5ef !default;

// Box Shadow
$box-shadow: 0px 2px 9px 0px rgba(169, 184, 200, 0.2) !default;
$box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075) !default;
$box-shadow-lg: 0 1rem 3rem rgba($black, 0.175) !default;
$box-shadow-inset: unset !default;

// Card
$card-bg: $white !default;
$card-title-color: $dark !default;
$card-subtitle-color: $text-muted !default;
$card-spacer-y: 20px !default;
$card-spacer-x: 20px !default;
$card-border-width: 0px !default;
$card-border-color: #dfe5ef !default;
$card-border-radius: 8px;

// Border Radius
$border-radius: 0px !default;
$border-radius-sm: 5px !default;
$border-radius-lg: 15px !default;
$border-radius-xl: 12px !default;

// Badges
$badge-font-size: 12px !default;
$badge-font-weight: $font-weight-normal !default;
$badge-padding-y: 5px !default;
$badge-padding-x: 10px !default;
$badge-border-radius: $btn-border-radius;

// Progressbar
$progress-height: 7px !default;
$progress-bg: $body-bg !default;

// Table
$table-bg: transparent !default;
$table-color: $body-color;
$table-cell-padding-y: 16px !default;
$table-cell-padding-x: 16px !default;
$table-th-font-weight: 600 !default;
$table-striped-bg: #f9fdff !default;
$table-hover-bg: #f9fdff !default;
$table-border-color: $border-color !default;

// Tabs
$nav-link-color: $dark !default;
$nav-link-hover-color: $dark !default;
$nav-tabs-link-active-color: $white !default;
$nav-tabs-link-active-bg: $primary !default;
$nav-tabs-border-radius: 10px !default;
$nav-tabs-border-width: 0 !default;
$nav-link-font-size: 16px !default;
$nav-link-font-weight: $font-weight-normal !default;

// Tooltips
$tooltip-font-size: 12px !default;
$tooltip-bg: $dark;

// Input
$form-label-color: $gray-600;
$form-label-font-weight: 600;
$form-select-indicator-padding: 38px;
$form-select-border-radius: 8px !default;
$form-select-box-shadow: unset !default;
$input-btn-focus-box-shadow: unset !default;
$input-border-radius: 8px !default;
$input-group-addon-bg: $gray-200 !default;
$input-group-addon-border-color: $light !default;
$custom-select-indicator: url(../..//assets/images/custom-select.png) !default;
$form-select-bg-size: 12px 12px; // In pixels because image dimensions
$input-border-color: $border-color !default;
$input-bg: $white !default;
$input-color: $body-color !default;
$input-height: 3.625rem !default;
$input-padding-y: 8px;
$input-padding-x: 16px;
$form-check-input-width: 1.313em;
$form-check-min-height: 1.313em;
$form-check-input-border: 1px solid #ced4da;
$form-check-input-checked-bg-color: var(--bs-primary);
$input-group-addon-border-color: $input-border-color;

$list-group-bg: transparent !default;
$list-group-border-radius: 8px;
$list-group-color: $dark !default;

// Paganation
$pagination-bg: $white !default;
$pagination-hover-bg: $primary !default;
$pagination-hover-color: $white !default;
$pagination-hover-border-color: $primary !default;
$pagination-active-color: $white !default;
$pagination-active-bg: $primary !default;

// Dropdown
$dropdown-border-radius: 8px !default;
$dropdown-width: 360px !default;
$dropdown-border-width: 0 !default;
$dropdown-item-padding-y: 10px !default;
$dropdown-link-active-bg: #f9fdff;
$dropdown-link-active-color: $dark;
$dropdown-bg: $white;
$dropdown-link-color: $dark !default;
$dropdown-link-hover-bg: #f9fdff;
$dropdown-box-shadow:
  rgb(145 158 171 / 20%) 0px 0px 2px 0px,
  rgb(145 158 171 / 12%) 0px 12px 24px -4px;
$link-color: $dark !default;

$link-hover-color: $primary !default;

// Offcanvas
$offcanvas-border-width: 0 !default;
$offcanvas-horizontal-width: 330px !default;
$offcanvas-bg-color: $white !default;

// Modal
$modal-content-border-width: 0 !default;
$modal-content-bg: #fff !default;
$modal-content-border-radius: $card-border-radius !default;

// Breadcrumb
$breadcrumb-font-size: 14px;
$breadcrumb-padding-y: 0;
$breadcrumb-padding-x: 0;
$breadcrumb-item-padding-x: 0.5rem;
$breadcrumb-margin-bottom: 0;
$breadcrumb-divider-color: $gray-600;
$breadcrumb-active-color: $gray-500;
$breadcrumb-divider: quote('•');
$breadcrumb-divider-flipped: $breadcrumb-divider;

// Accordion
$accordion-padding-y: 1.25rem;
$accordion-padding-x: 2rem;
$accordion-button-color: $dark;
$accordion-button-bg: $white;
$accordion-bg: $white;
$accordion-body-padding-y: 1rem;
$accordion-border-color: $border-color;
$accordion-button-focus-border-color: transparent !default;
$accordion-button-focus-box-shadow: transparent !default;
$accordion-button-active-color: $dark;
$accordion-icon-color: #0000008a;
$accordion-icon-active-color: #0000008a;

// toast
$toast-border-width: 8px !default;

// display
$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem,
  7: 2rem,
  8: 1.75rem,
) !default;

// ======================================================
// Buttons
// ======================================================
$btn-secondary-border: $gray-300;

// ======================================================
// Checkbox
// ======================================================

$form-check-input-border: 0 !default;
$form-check-input-border-radius: 4px !default;
$form-check-input-width: 1.375em !default;
$form-check-input-height: 1.375em !default;
$form-check-input-focus-box-shadow: none !default;
$form-range-track-bg: $gray-300 !default;
$form-check-input-checked-bg-color: var(--bs-primary);

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1300px,
  xxl: 1400px,
) !default;

$hr-border-color: $border-color !default;
$hr-opacity: 1 !default;

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