html, body {
	font-size: 16px;
}

// colors
$gray-900: #1F272E;
$gray-800: #333C44;
$gray-700: #505A62;
$gray-600: #687178;
$gray-500: #98A1A9;
$gray-400: #C0C6CC;
$gray-300: #DCE0E3;
$gray-200: #EBEEF0;
$gray-100: #F4F5F6;
$gray-50: #F9FAFA;

$primary: #2490EF;
$danger: #E24C4C;
$black: #000;
$white: #fff;
$light: $gray-50 !default;
$primary-light: lighten($primary, 42%) !default;
$light-yellow: #FEF4E2;

$card-box-shadow: 0px 0px 1px rgba(17, 43, 66, 0.16), 0px 1px 3px rgba(17, 43, 66, 0.1);

$border-color: var(--border-color);
$code-color: var(--purple-600);

$border-radius: var(--border-radius);
$border-radius-sm: var(--border-radius-sm);
$border-radius-lg: var(--border-radius-lg);

$nav-divider-margin-y: 4px;

$container-max-widths: (
  sm: 540px,
  md: 840px,
  lg: 1090px,
  xl: 1290px
);

$theme-colors: (
  "primary": $primary,
  "danger": $danger
);

$navbar-height: 60px;

$body-color: var(--text-light);
$component-active-color: var(--fg-color);
$component-active-bg: $gray-600;
$modal-content-bg: var(--modal-bg);
$modal-backdrop-bg: var(--gray-900);
$modal-content-box-shadow-sm-up: 0px 5px 10px rgba(0, 0, 0, 0.100661);
$modal-md: 575px;
$modal-sm: 450px;
$link-color: var(--text-color);

// input
$input-bg: var(--control-bg);
$input-placeholder-color: var(--gray-500);
$input-disabled-bg: var(--input-disabled-bg);
$input-color: var(--text-color);
$input-box-shadow: none;
$input-focus-border-color: var(--gray-500);
$input-border-radius: var(--border-radius);
$input-btn-focus-width: 2px;

// dropdown
$dropdown-color: var(--text-color);
$dropdown-bg: var(--fg-color);
$dropdown-border-color: var(--dark-border-color);
$dropdown-link-color: var(--text-color);
$dropdown-link-hover-color: var(--text-color);
$dropdown-link-hover-bg: var(--fg-hover-color);
$dropdown-link-disabled-color: var(--gray-600);
$dropdown-header-color: var(--gray-600);
$dropdown-divider-bg: var(--border-color);
$dropdown-min-width: 200px;

// button
$btn-padding-y-lg: 1rem !default;
$btn-padding-x-lg: 2.5rem !default;
$btn-font-size-lg: 1.125rem !default;
$btn-line-height-lg: 1 !default;
$btn-border-radius-lg: 0.5rem !default;
$btn-border-radius: 0.375rem !default;
$btn-padding-x: 1rem !default;
$btn-padding-y: 0.5rem !default;
$btn-font-weight: 400 !default;
$btn-active-box-shadow: var(--shadow-inset);

// mark
$mark-bg: #FDF9AF;
$mark-padding: 0;

// transitions
$btn-transition: none;
$input-transition: none;

// popover
$enable-shadows: true;
$popover-border-radius: var(--border-radius);
$popover-bg: var(--popover-bg);
$popover-box-shadow: 	0px 2px 6px rgba(17, 43, 66, 0.08), 0px 1px 4px rgba(17, 43, 66, 0.1);
$popover-body-padding-x: var(--padding-md);
$popover-body-padding-y: var(--padding-md);
$popover-border-color: var(--dark-border-color);
$popover-arrow-outer-color: var(--dark-border-color);
$popover-header-bg: white;

// custom toggle switch
$custom-switch-width: 1.625rem;
$custom-switch-indicator-border-radius: 1rem;
$custom-control-indicator-border-color: var(--fg-color);
$custom-control-label-color: var(--text-color);
$custom-switch-indicator-size: 8px;
$custom-control-indicator-border-width: 2px;

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

$navbar-nav-link-padding-x: 1rem !default;
$navbar-padding-y: 1rem !default;
$card-border-radius: 0.75rem !default;
$card-spacer-y: 0.5rem !default;

$link-hover-color: var(--text-color);

$dropdown-border-radius: 0.375rem !default;
$dropdown-item-padding-y: var(--padding-sm);
$dropdown-item-padding-x: var(--padding-sm);

$spacer: 14px;
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  2xl: 1440px
) !default;

@import 'typography';
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import "~bootstrap/scss/mixins";
@import 'css_variables';
@import 'dark';
