mdb-ui-kit/src/scss/free/_variables.scss

// Variables

$enable-negative-margins: true;

// Grays
$white: #fff;
$gray-50: #fbfbfb;
$gray-100: #f5f5f5;
$gray-200: #eeeeee;
$gray-300: #e0e0e0;
$gray-400: #bdbdbd;
$gray-500: #9e9e9e;
$gray-600: #757575;
$gray-700: #616161;
$gray-800: #4f4f4f;
$gray-900: #262626;
$black: #000;

// Material Design Color System - start
$blue-50: #e3f2fd;
$blue-100: #bbdefb;
$blue-200: #90caf9;
$blue-300: #64b5f6;
$blue-400: #42a5f5;
$blue-500: #2196f3;
$blue-600: #1e88e5;
$blue-700: #1976d2;
$blue-800: #1565c0;
$blue-900: #0d47a1;
$blue-accent-100: #82b1ff;
$blue-accent-200: #448aff;
$blue-accent-400: #2979ff;
$blue-accent-700: #2962ff;

$indigo-50: #e8eaf6;
$indigo-100: #c5cae9;
$indigo-200: #9fa8da;
$indigo-300: #7986cb;
$indigo-400: #5c6bc0;
$indigo-500: #3f51b5;
$indigo-600: #3949ab;
$indigo-700: #303f9f;
$indigo-800: #283593;
$indigo-900: #1a237e;
$indigo-accent-100: #8c9eff;
$indigo-accent-200: #536dfe;
$indigo-accent-400: #3d5afe;
$indigo-accent-700: #304ffe;

$purple-50: #f3e5f5;
$purple-100: #e1bee7;
$purple-200: #ce93d8;
$purple-300: #ba68c8;
$purple-400: #ab47bc;
$purple-500: #9c27b0;
$purple-600: #8e24aa;
$purple-700: #7b1fa2;
$purple-800: #6a1b9a;
$purple-900: #4a148c;
$purple-accent-100: #ea80fc;
$purple-accent-200: #e040fb;
$purple-accent-400: #d500f9;
$purple-accent-700: #aa00ff;

$pink-50: #fce4ec;
$pink-100: #f8bbd0;
$pink-200: #f48fb1;
$pink-300: #f06292;
$pink-400: #ec407a;
$pink-500: #e91e63;
$pink-600: #d81b60;
$pink-700: #c2185b;
$pink-800: #ad1457;
$pink-900: #880e4f;
$pink-accent-100: #ff80ab;
$pink-accent-200: #ff4081;
$pink-accent-400: #f50057;
$pink-accent-700: #c51162;

$red-50: #ffebee;
$red-100: #ffcdd2;
$red-200: #ef9a9a;
$red-300: #e57373;
$red-400: #ef5350;
$red-500: #f44336;
$red-600: #e53935;
$red-700: #d32f2f;
$red-800: #c62828;
$red-900: #b71c1c;
$red-accent-100: #ff8a80;
$red-accent-200: #ff5252;
$red-accent-400: #ff1744;
$red-accent-700: #d50000;

$orange-50: #fff3e0;
$orange-100: #ffe0b2;
$orange-200: #ffcc80;
$orange-300: #ffb74d;
$orange-400: #ffa726;
$orange-500: #ff9800;
$orange-600: #fb8c00;
$orange-700: #f57c00;
$orange-800: #ef6c00;
$orange-900: #e65100;
$orange-accent-100: #ffd180;
$orange-accent-200: #ffab40;
$orange-accent-400: #ff9100;
$orange-accent-700: #ff6d00;

$yellow-50: #fffde7;
$yellow-100: #fff9c4;
$yellow-200: #fff59d;
$yellow-300: #fff176;
$yellow-400: #ffee58;
$yellow-500: #ffeb3b;
$yellow-600: #fdd835;
$yellow-700: #fbc02d;
$yellow-800: #f9a825;
$yellow-900: #f57f17;
$yellow-accent-100: #ffff8d;
$yellow-accent-200: #ffff00;
$yellow-accent-400: #ffea00;
$yellow-accent-700: #ffd600;

$green-50: #e8f5e9;
$green-100: #c8e6c9;
$green-200: #a5d6a7;
$green-300: #81c784;
$green-400: #66bb6a;
$green-500: #4caf50;
$green-600: #43a047;
$green-700: #388e3c;
$green-800: #2e7d32;
$green-900: #1b5e20;
$green-accent-100: #b9f6ca;
$green-accent-200: #69f0ae;
$green-accent-400: #00e676;
$green-accent-700: #00c853;

$teal-50: #e0f2f1;
$teal-100: #b2dfdb;
$teal-200: #80cbc4;
$teal-300: #4db6ac;
$teal-400: #26a69a;
$teal-500: #009688;
$teal-600: #00897b;
$teal-700: #00796b;
$teal-800: #00695c;
$teal-900: #004d40;
$teal-accent-100: #a7ffeb;
$teal-accent-200: #64ffda;
$teal-accent-400: #1de9b6;
$teal-accent-700: #00bfa5;

$cyan-50: #e0f7fa;
$cyan-100: #b2ebf2;
$cyan-200: #80deea;
$cyan-300: #4dd0e1;
$cyan-400: #26c6da;
$cyan-500: #00bcd4;
$cyan-600: #00acc1;
$cyan-700: #0097a7;
$cyan-800: #00838f;
$cyan-900: #006064;
$cyan-accent-100: #84ffff;
$cyan-accent-200: #18ffff;
$cyan-accent-400: #00e5ff;
$cyan-accent-700: #00b8d4;

$deep-purple-50: #ede7f6;
$deep-purple-100: #d1c4e9;
$deep-purple-200: #b39ddb;
$deep-purple-300: #9575cd;
$deep-purple-400: #7e57c2;
$deep-purple-500: #673ab7;
$deep-purple-600: #5e35b1;
$deep-purple-700: #512da8;
$deep-purple-800: #4527a0;
$deep-purple-900: #311b92;
$deep-purple-accent-100: #b388ff;
$deep-purple-accent-200: #7c4dff;
$deep-purple-accent-400: #651fff;
$deep-purple-accent-700: #6200ea;

$light-blue-50: #e1f5fe;
$light-blue-100: #b3e5fc;
$light-blue-200: #81d4fa;
$light-blue-300: #4fc3f7;
$light-blue-400: #29b6f6;
$light-blue-500: #03a9f4;
$light-blue-600: #039be5;
$light-blue-700: #0288d1;
$light-blue-800: #0277bd;
$light-blue-900: #01579b;
$light-blue-accent-100: #80d8ff;
$light-blue-accent-200: #40c4ff;
$light-blue-accent-400: #00b0ff;
$light-blue-accent-700: #0091ea;

$light-green-50: #f1f8e9;
$light-green-100: #dcedc8;
$light-green-200: #c5e1a5;
$light-green-300: #aed581;
$light-green-400: #9ccc65;
$light-green-500: #8bc34a;
$light-green-600: #7cb342;
$light-green-700: #689f38;
$light-green-800: #558b2f;
$light-green-900: #33691e;
$light-green-accent-100: #ccff90;
$light-green-accent-200: #b2ff59;
$light-green-accent-400: #76ff03;
$light-green-accent-700: #64dd17;

$lime-50: #f9fbe7;
$lime-100: #f0f4c3;
$lime-200: #e6ee9c;
$lime-300: #dce775;
$lime-400: #d4e157;
$lime-500: #cddc39;
$lime-600: #c0ca33;
$lime-700: #afb42b;
$lime-800: #9e9d24;
$lime-900: #827717;
$lime-accent-100: #f4ff81;
$lime-accent-200: #eeff41;
$lime-accent-400: #c6ff00;
$lime-accent-700: #aeea00;

$amber-50: #fff8e1;
$amber-100: #ffecb3;
$amber-200: #ffe082;
$amber-300: #ffd54f;
$amber-400: #ffca28;
$amber-500: #ffc107;
$amber-600: #ffb300;
$amber-700: #ffa000;
$amber-800: #ff8f00;
$amber-900: #ff6f00;
$amber-accent-100: #ffe57f;
$amber-accent-200: #ffd740;
$amber-accent-400: #ffc400;
$amber-accent-700: #ffab00;

$deep-orange-50: #fbe9e7;
$deep-orange-100: #ffccbc;
$deep-orange-200: #ffab91;
$deep-orange-300: #ff8a65;
$deep-orange-400: #ff7043;
$deep-orange-500: #ff5722;
$deep-orange-600: #f4511e;
$deep-orange-700: #e64a19;
$deep-orange-800: #d84315;
$deep-orange-900: #bf360c;
$deep-orange-accent-100: #ff9e80;
$deep-orange-accent-200: #ff6e40;
$deep-orange-accent-400: #ff3d00;
$deep-orange-accent-700: #dd2c00;

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

$blue-gray-50: #eceff1;
$blue-gray-100: #cfd8dc;
$blue-gray-200: #b0bec5;
$blue-gray-300: #90a4ae;
$blue-gray-400: #78909c;
$blue-gray-500: #607d8b;
$blue-gray-600: #546e7a;
$blue-gray-700: #455a64;
$blue-gray-800: #37474f;
$blue-gray-900: #263238;
// Material Design Color System - end

// Theme colors
$primary: #1266f1;
$secondary: #b23cfd;
$success: #00b74a;
$info: #39c0ed;
$warning: #ffa900;
$danger: #f93154;
$light: $gray-50;
$dark: $gray-900;

// scss-docs-start theme-colors-map
$theme-colors: (
  'primary': $primary,
  'secondary': $secondary,
  'success': $success,
  'info': $info,
  'warning': $warning,
  'danger': $danger,
  'light': $light,
  'dark': $dark,
  'white': $white,
  'black': $black,
);
// scss-docs-end theme-colors-map

// scss-docs-start note-colors-map
$note: ();
$note: map-merge(
  (
    'primary': (
      'bgc': lighten($primary, 43%),
      'border-color': $primary,
    ),
    'secondary': (
      'bgc': lighten($secondary, 33%),
      'border-color': $secondary,
    ),
    'success': (
      'bgc': lighten($success, 53%),
      'border-color': $success,
    ),
    'danger': (
      'bgc': lighten($danger, 36%),
      'border-color': $danger,
    ),
    'warning': (
      'bgc': lighten($warning, 42%),
      'border-color': $warning,
    ),
    'info': (
      'bgc': lighten($info, 36%),
      'border-color': $info,
    ),
    'light': (
      'bgc': $light,
      'border-color': $dark,
    ),
  ),
  $note
);
// scss-docs-end note-colors-map

// Body
//
// Settings for the `<body>` element.

$body-color: $gray-800;

// Components
//
// Shadows offset, blur, spread and color

$box-shadow-0: none;
$box-shadow-1: 0 2px 10px 0 rgba(0, 0, 0, 0.05);
$box-shadow-2: 0 5px 15px 0 rgba(0, 0, 0, 0.05);
$box-shadow-3: 0 10px 20px 0 rgba(0, 0, 0, 0.05);
$box-shadow-4: 0 15px 30px 0 rgba(0, 0, 0, 0.05);
$box-shadow-5: 0 20px 40px 0 rgba(0, 0, 0, 0.05);

$box-shadow-1-strong: 0px 2px 5px 0px rgba(0, 0, 0, 0.25), 0px 3px 10px 0px rgba(0, 0, 0, 0.2);
$box-shadow-2-strong: 0px 4px 8px 0px rgba(0, 0, 0, 0.25), 0px 5px 15px 2px rgba(0, 0, 0, 0.2);
$box-shadow-3-strong: 0px 6px 11px 0px rgba(0, 0, 0, 0.25), 0px 7px 20px 3px rgba(0, 0, 0, 0.2);
$box-shadow-4-strong: 0px 6px 14px 0px rgba(0, 0, 0, 0.25), 0px 10px 30px 4px rgba(0, 0, 0, 0.2);
$box-shadow-5-strong: 0px 6px 20px 0px rgba(0, 0, 0, 0.25), 0px 12px 40px 5px rgba(0, 0, 0, 0.2);

// scss-docs-start light-shadows-values
$shadows-light: (
  '0': $box-shadow-0,
  '1': $box-shadow-1,
  '2': $box-shadow-2,
  '3': $box-shadow-3,
  '4': $box-shadow-4,
  '5': $box-shadow-5,
);
// scss-docs-end light-shadows-values

// scss-docs-start strong-shadows-values
$shadows-strong: (
  '1': $box-shadow-1-strong,
  '2': $box-shadow-2-strong,
  '3': $box-shadow-3-strong,
  '4': $box-shadow-4-strong,
  '5': $box-shadow-5-strong,
);
// scss-docs-end strong-shadows-values

// Typography
//
// Font, line-height, and color for body text, headings, and more.

$font-family-roboto: 'Roboto', sans-serif;
$font-family-base: var(--mdb-font-roboto);

$line-height-base: 1.6;

// Buttons
//
// For each of MDB's buttons, define text, background, and border color.

$btn-line-height: 1.5;
$btn-padding-top: 0.625rem;
$btn-padding-bottom: 0.5rem;
$btn-font-size: 0.75rem;
$btn-padding-left: 1.5rem;
$btn-padding-right: 1.5rem;
$btn-font-weight: 500;
$btn-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.1);
$btn-hover-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.1);
$btn-focus-box-shadow: $btn-hover-box-shadow;
$btn-active-box-shadow: $btn-hover-box-shadow;
$btn-border-width: 0.125rem;

$btn-outline-padding-top: 0.5rem;
$btn-outline-padding-bottom: 0.375rem;
$btn-outline-padding-left: 1.375rem;
$btn-outline-padding-right: 1.375rem;

$btn-outline-padding-top-sm: 0.25rem;
$btn-outline-padding-bottom-sm: 0.1875rem;
$btn-outline-padding-right-sm: 0.875rem;
$btn-outline-padding-left-sm: 0.875rem;

$btn-outline-padding-top-lg: 0.625rem;
$btn-outline-padding-bottom-lg: 0.5625rem;
$btn-outline-padding-right-lg: 1.5625rem;
$btn-outline-padding-left-lg: 1.5625rem;

$btn-line-height-lg: 1.6;
$btn-font-size-lg: 0.875rem;
$btn-padding-top-lg: 0.75rem;
$btn-padding-bottom-lg: 0.6875rem;
$btn-padding-right-lg: 1.6875rem;
$btn-padding-left-lg: 1.6875rem;

$btn-line-height-sm: $btn-line-height;
$btn-font-size-sm: 0.75rem;
$btn-padding-top-sm: 0.375rem;
$btn-padding-bottom-sm: 0.3125rem;
$btn-padding-right-sm: 1rem;
$btn-padding-left-sm: 1rem;

$btn-link-bgc: #f5f5f5;
$btn-rounded-border-radius: 10rem;

$btn-floating-border-radius: 50%;

$btn-floating-width: 2.3125rem;
$btn-floating-height: 2.3125rem;
$btn-floating-icon-width: 2.3125rem;
$btn-floating-icon-line-height: 2.3125rem;

$btn-floating-width-lg: 2.8125rem;
$btn-floating-height-lg: 2.8125rem;
$btn-floating-icon-width-lg: 2.8125rem;
$btn-floating-icon-line-height-lg: 2.8125rem;

$btn-floating-width-sm: 1.8125rem;
$btn-floating-height-sm: 1.8125rem;
$btn-floating-icon-width-sm: 1.8125rem;
$btn-floating-icon-line-height-sm: 1.8125rem;

$btn-outline-floating-icon-width: 2.0625rem;
$btn-outline-floating-icon-line-height: 2.0625rem;

$btn-outline-floating-icon-width-lg: 2.5625rem;
$btn-outline-floating-icon-line-height-lg: 2.5625rem;

$btn-outline-floating-icon-width-sm: 1.5625rem;
$btn-outline-floating-icon-line-height-sm: 1.5625rem;

$btn-floating-border-radius: 50%;

// Button group
//
// Material styling for group of buttons

$btn-group-border-radius: calc(4px - 1px);
$btn-group-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
  border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

// Forms
//
// Material styling for outline forms border, label, size

$input-padding-top: 0.33em;
$input-padding-bottom: $input-padding-top;
$input-transition: all 0.2s linear;

$form-label-left: 0.75rem;
$form-label-padding-top: 0.37rem;
$form-label-transition: all 0.2s ease-out;
$form-label-color: rgba(0, 0, 0, 0.6);

$input-focus-active-label-transform: translateY(-1rem) translateY(0.1rem) scale(0.8);
$input-focus-label-color: $primary;
$input-focus-border-width: 0.125rem;
$input-focus-border-color: $primary;
$input-disabled-background-color: #e9ecef;

$input-font-size-lg: 1rem;
$input-line-height-lg: 2.15;
$input-focus-active-label-transform-lg: translateY(-1.25rem) translateY(0.1rem) scale(0.8);

$input-font-size-sm: 0.775rem;
$input-line-height-sm: 1.5;
$input-focus-active-label-transform-sm: translateY(-0.83rem) translateY(0.1rem) scale(0.8);

$form-notch-div-border-color: #bdbdbd;
$form-notch-leading-width: 0.5rem;
$form-notch-leading-border-radius: 0.25rem;
$form-notch-middle-max-width: 1rem;
$form-notch-trailing-border-radius: $form-notch-leading-border-radius;

$form-label-padding-top-lg: 0.7rem;
$form-label-padding-top-sm: 0.33rem;
$form-label-font-size-sm: 0.775rem;

$form-white-input-color: $white;
$form-white-label-color: $gray-50;
$form-white-notch-div-border-color: $gray-50;
$form-white-input-focus-label-color: $white;
$form-white-input-focus-border-color: $white;

$form-check-input-margin-left: 1.79rem;
$form-check-input-radio-margin-left: 1.85rem;
$form-check-input-width-md: 1.125rem;
$form-check-input-height: $form-check-input-width-md;
$form-check-input-background-color: $white;
$form-check-input-border-width: 0.125rem;
$form-check-input-border-color: rgb(117, 117, 117);

$form-check-input-before-box-shadow: 0px 0px 0px 13px transparent;
$form-check-input-before-border-radius: 50%;
$form-check-input-before-width: 0.875rem;
$form-check-input-before-height: $form-check-input-before-width;
$form-check-input-before-transform: scale(0);

$form-check-input-hover-before-opacity: 0.04;
$form-check-input-hover-before-box-shadow: 0px 0px 0px 13px rgba(0, 0, 0, 0.6);

$form-check-input-focus-border-color: $form-check-input-border-color;
$form-check-input-focus-transition: border-color 0.2s;

$form-check-input-focus-before-opacity: 0.12;
$form-check-input-focus-before-box-shadow: $form-check-input-hover-before-box-shadow;
$form-check-input-focus-before-transform: scale(1);
$form-check-input-focus-before-transition: box-shadow 0.2s, transform 0.2s;

$form-check-input-checked-border-color: $primary;
$form-check-input-checked-before-opacity: 0.16;
$form-check-input-checked-focus-border-color: $primary;
$form-check-input-checked-focus-before-box-shadow: 0px 0px 0px 13px $primary;
$form-check-input-checked-focus-before-transform: $form-check-input-focus-before-transform;
$form-check-input-checked-focus-before-transition: $form-check-input-focus-before-transition;

$form-check-input-checkbox-border-radius: 0.125rem;
$form-check-input-checkbox-focus-after-width: 0.875rem;
$form-check-input-checkbox-focus-after-height: $form-check-input-checkbox-focus-after-width;
$form-check-input-checkbox-focus-after-background-color: $white;
$form-check-input-checkbox-checked-background-color: $primary;
$form-check-input-checkbox-checked-focus-background-color: $primary;

$form-check-input-checkbox-checked-after-transform: rotate(45deg);
$form-check-input-checkbox-checked-after-border-width: 0.125rem;
$form-check-input-checkbox-checked-after-border-color: $white;
$form-check-input-checkbox-checked-after-width: 0.375rem;
$form-check-input-checkbox-checked-after-height: 0.8125rem;
$form-check-input-checkbox-checked-after-margin-left: 0.25rem;
$form-check-input-checkbox-checked-after-margin-top: -1px;

$form-check-input-indeterminate-focus-before-box-shadow: 0px 0px 0px 13px $primary;
$form-check-input-indeterminate-checked-background-color: $primary;
$form-check-input-indeterminate-checked-after-transform: rotate(90deg);
$form-check-input-indeterminate-checked-after-border-width: 0.125rem;
$form-check-input-indeterminate-checked-after-border-color: $white;
$form-check-input-indeterminate-checked-after-width: 0.125rem;
$form-check-input-indeterminate-checked-after-height: 0.875rem;
$form-check-input-indeterminate-checked-after-margin-left: 0.375rem;
$form-check-input-indeterminate-focus-background-color: $primary;

$form-check-input-radio-border-radius: 50%;
$form-check-input-radio-width: 1.25rem;
$form-check-input-radio-height: $form-check-input-radio-width;

$form-check-input-radio-before-width: 1rem;
$form-check-input-radio-before-height: $form-check-input-radio-before-width;

$form-check-input-radio-after-width: $form-check-input-radio-before-width;
$form-check-input-radio-after-height: $form-check-input-radio-after-width;
$form-check-input-radio-after-border-radius: $form-check-input-radio-border-radius;
$form-check-input-radio-after-background-color: $white;

$form-check-input-radio-checked-background-color: $white;
$form-check-input-radio-checked-after-border-radius: $form-check-input-radio-border-radius;
$form-check-input-radio-checked-after-width: 0.625rem;
$form-check-input-radio-checked-after-height: $form-check-input-radio-checked-after-width;
$form-check-input-radio-checked-after-border-color: $primary;
$form-check-input-radio-checked-after-background-color: $primary;
$form-check-input-radio-checked-after-margin-top: 0.1875rem;
$form-check-input-radio-checked-after-margin-left: 0.1875rem;
$form-check-input-radio-checked-after-transition: border-color;
$form-check-input-radio-checked-focus-background-color: $white;

$form-switch-padding-left: 1.85rem;
$form-switch-form-check-input-border-radius: 0.4375rem;
$form-switch-form-check-input-width: 2.25rem;
$form-switch-form-check-input-height: 0.875rem;
$form-switch-form-check-input-background-color: rgba(0, 0, 0, 0.38);
$form-switch-form-check-input-margin-top: 0.35rem;
$form-switch-form-check-input-margin-right: 0.7rem;

$form-switch-form-check-input-after-border-radius: 50%;
$form-switch-form-check-input-after-width: 1.25rem;
$form-switch-form-check-input-after-height: $form-switch-form-check-input-after-width;
$form-switch-form-check-input-after-background-color: $white;
$form-switch-form-check-input-after-margin-top: -0.1875rem;
$form-switch-form-check-input-after-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
  0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
$form-switch-form-check-input-after-transition: background-color 0.2s, transform 0.2s;

$form-switch-form-check-input-focus-before-box-shadow: 3px -1px 0px 13px rgba(0, 0, 0, 0.6);
$form-switch-form-check-input-focus-before-transform: scale(1);
$form-switch-form-check-input-focus-before-transition: box-shadow 0.2s, transform 0.2s;

$form-switch-form-check-input-focus-after-border-radius: $form-switch-form-check-input-after-border-radius;
$form-switch-form-check-input-focus-after-width: 1.25rem;
$form-switch-form-check-input-focus-after-height: $form-switch-form-check-input-focus-after-width;

$form-switch-form-check-input-checked-focus-before-margin-left: 1.0625rem;
$form-switch-form-check-input-checked-focus-before-box-shadow: 3px -1px 0px 13px $primary;
$form-switch-form-check-input-checked-focus-before-transform: scale(1);
$form-switch-form-check-input-checked-focus-before-transition: box-shadow 0.2s, transform 0.2s;

$form-switch-form-check-input-checked-checkbox-after-border-radius: 50%;
$form-switch-form-check-input-checked-checkbox-after-width: 1.25rem;
$form-switch-form-check-input-checked-checkbox-after-height: 1.25rem;
$form-switch-form-check-input-checked-checkbox-after-background-color: $primary;
$form-switch-form-check-input-checked-checkbox-after-margin-top: -3px;
$form-switch-form-check-input-checked-checkbox-after-margin-left: 1.0625rem;
$form-switch-form-check-input-checked-checkbox-after-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
  0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
$form-switch-form-check-input-checked-checkbox-after-transition: background-color 0.2s,
  transform 0.2s;

$form-file-height: calc(1.8rem + 0.33rem + 2px);

$form-file-label-focus-border-color: $primary;
$form-file-label-focus-transition: all 0.2s linear;
$form-file-label-focus-text-border-width: 2px 1px 2px 2px;
$form-file-label-focus-button-border-width: 2px 2px 2px 1px;
$form-file-label-disabled-background-color: #e9ecef;
$form-file-label-height: $form-file-height;
$form-file-label-border-color: #bdbdbd;
$form-file-label-border-radius: 0.2rem;

$form-file-text-padding-y: 0.33rem;
$form-file-text-border-color: #bdbdbd;

$form-file-button-line-height: 1.5;
$form-file-button-background-color: #fff;
$form-file-button-border-color: $form-file-text-border-color;

$form-file-sm-height: calc(1.2rem + 0.33rem + 2px);
$form-file-sm-font-size: 0.775rem;
$form-file-sm-line-height: 1.3;
$form-file-sm-padding-y: $form-file-text-padding-y;

$form-file-lg-height: calc(2.315rem + 0.33rem + 2px);
$form-file-lg-font-size: 1rem;
$form-file-lg-line-height: 2.15;
$form-file-lg-padding-y: $form-file-text-padding-y;

$form-range-webkit-slider-thumb-margin-top: -6px;
$form-range-webkit-slider-runnable-track-height: 4px;

$input-group-min-height: calc(1.5rem + 0.33rem + 2px);
$input-group-padding-y: 0.27rem;
$input-group-transition: all 0.2s linear;

$input-group-focus-transition: $input-group-transition;
$input-group-focus-border-color: $primary;
$input-group-focus-box-shadow: inset 0 0 0 1px $primary;

$input-group-text-padding-y: 0.27rem;

$input-group-lg-height: calc(2.315rem + 0.33rem + 2px);
$input-group-lg-font-size: 1rem;
$input-group-lg-padding-y: 0.33rem;
$input-group-lg-text-font-size: $input-group-lg-font-size;

$input-group-sm-height-height: calc(1.7rem + 0.33rem + 2px);
$input-group-sm-font-size: 0.775rem;
$input-group-sm-padding-y: $input-group-lg-padding-y;
$input-group-sm-text-font-size: $input-group-sm-font-size;
$input-group-sm-text-line-height: 1.5;

$input-group-form-outline-border-left-width: 1px;
$input-group-form-outline-border-left-color: #bdbdbd;

// Form validation

$form-feedback-valid-tooltip-color: $white;
$form-feedback-valid-color: $success;
$form-feedback-invalid-color: $danger;

// scss-docs-start form-validation-states
$form-validation-states-mdb: (
  'valid': (
    'color': $form-feedback-valid-color,
  ),
  'invalid': (
    'color': $form-feedback-invalid-color,
  ),
);
// scss-docs-end form-validation-states

// scss-docs-start zindex-stack
$zindex-toast: 1060;
$zindex-alert: 1070;
$zindex-popover: 1080;
$zindex-tooltip: 1090;
// scss-docs-end zindex-stack

// Navs

$nav-tabs-link-border-width: 0 0 2px 0;
$nav-tabs-link-font-weight: 500;
$nav-tabs-link-font-size: 12px;
$nav-tabs-link-color: rgba(0, 0, 0, 0.6);
$nav-tabs-link-padding-top: 17px;
$nav-tabs-link-padding-bottom: 16px;
$nav-tabs-link-padding-x: 29px;
$nav-tabs-link-hover-background-color: #f5f5f5;

$nav-pills-margin: 0.5rem;
$nav-pills-link-border-radius: 0.25rem;
$nav-pills-link-font-size: $nav-tabs-link-font-size;
$nav-pills-link-padding-top: $nav-tabs-link-padding-top;
$nav-pills-link-padding-bottom: $nav-tabs-link-padding-bottom;
$nav-pills-link-padding-x: $nav-tabs-link-padding-x;
$nav-pills-link-line-height: 1;
$nav-pills-link-background-color: $nav-tabs-link-hover-background-color;
$nav-pills-link-font-weight: $nav-tabs-link-font-weight;
$nav-pills-link-color: $nav-tabs-link-color;

// Navbar

$navbar-box-shadow: $box-shadow-3;
$navbar-padding-top: 0.5625rem;
$navbar-brand-img-margin-right: 0.25rem;

// Dropdowns
//
// Dropdown menu container and content;

$dropdown-color: #212529;
$dropdown-margin-top: 0.125rem;
$dropdown-box-shadow: $box-shadow-2;
$dropdown-font-size: 0.875rem;
$dropdown-item-border-radius: 0.25rem;
$dropdown-padding-y: 0.5rem;
$dropdown-padding-x: 1rem;

$dropdown-state-color: #16181b;
$dropdown-state-background-color: #eee;

$dropdown-menu-animated-animation-duration: 0.55s;
$dropdown-menu-animated-animation-timing-function: ease;

// Pagination

$pagination-font-size: 0.9rem;
$pagination-color: #212529;
$pagination-transition: all 0.3s linear;
$pagination-border-radius: 0.125rem;

$pagination-hover-color: $pagination-color;
$pagination-active-box-shadow: $btn-box-shadow;
$pagination-active-transition: all 0.2s linear;

$pagination-circle-border-radius: 50%;
$pagination-circle-padding-x: 0.841rem;

$pagination-circle-lg-padding-left: 1.399414rem;
$pagination-circle-lg-padding-right: 1.399415rem;

$pagination-circle-sm-padding-left: 0.696rem;
$pagination-circle-sm-padding-right: 0.688rem;

// Cards

$card-box-shadow: $box-shadow-3;
$card-header-background-color: rgba(255, 255, 255, 0);
$card-footer-background-color: rgba(255, 255, 255, 0);
$card-border-radius: 0.25rem;

// Tooltips

$tooltip-inner-color: #fff;
$tooltip-inner-padding-y: 6px;
$tooltip-inner-padding-x: 16px;
$tooltip-inner-font-size: 14px;
$tooltip-inner-background-color: #6d6d6d;
$tooltip-inner-border-radius: 0.25rem;

// Popovers

$popover-box-shadow: $box-shadow-2;
$popover-background-color: #fff;

// Toasts

$toast-background-color: #fff;
$toast-box-shadow: $box-shadow-2;
$toast-header-background-color: #fff;

// Badges

$badge-dot-border-radius: 4.5px;
$badge-dot-height: 9px;
$badge-dot-width: $badge-dot-height;
$badge-dot-margin-left: -0.3125rem;

$badge-notification-font-size: 0.6rem;
$badge-notification-margin-top: -0.1rem;
$badge-notification-margin-left: -0.5rem;
$badge-notification-padding-y: 0.2em;
$badge-notification-padding-x: 0.45em;

// Modals

$modal-box-shadow: $box-shadow-3;

// Progress bars

$progress-height: 4px;

// Breadcrumbs

$breadcrumb-item-color: rgba(0, 0, 0, 0.55);
$breadcrumb-item-transition: color 0.15s ease-in-out;
$breadcrumb-item-hover-color: rgba(0, 0, 0, 0.7);
$breadcrumb-item-before-color: $breadcrumb-item-color;

// Images

$image-hover-overlay-transition: all 0.3s ease-in-out;

$image-hover-zoom-transition: all 0.3s linear;
$image-hover-zoom-transform: scale(1.1);

$image-hover-shadow-transition: $image-hover-overlay-transition;
$image-hover-shadow-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

// Scrollspy

$scrollspy-menu-sidebar-font-size: 0.8rem;
$scrollspy-menu-sidebar-color: #262626;
$scrollspy-menu-sidebar-line-height: 1.1rem;
$scrollspy-menu-sidebar-padding-x: 5px;
$scrollspy-menu-sidebar-font-weight: 400;
$scrollspy-menu-sidebar-transition: all 0.2s ease-in-out;
$scrollspy-menu-sidebar-margin-y: 3px;

$scrollspy-menu-sidebar-active-color: $primary;
$scrollspy-menu-sidebar-active-font-weight: 600;
$scrollspy-menu-sidebar-active-border-width: 0.125rem;
$scrollspy-menu-sidebar-active-border-color: $primary;

// Breadcrumbs

$breadcrumb-item-color: rgba(0, 0, 0, 0.55);
$breadcrumb-item-transition: color 0.15s ease-in-out;
$breadcrumb-item-hover-color: rgba(0, 0, 0, 0.7);
$breadcrumb-item-before-color: $breadcrumb-item-color;

// Images

$image-hover-overlay-transition: all 0.3s ease-in-out;

$image-hover-zoom-transition: all 0.3s linear;
$image-hover-zoom-transform: scale(1.1);

$image-hover-shadow-transition: $image-hover-overlay-transition;
$image-hover-shadow-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

// Scrollspy

$scrollspy-menu-sidebar-font-size: 0.8rem;
$scrollspy-menu-sidebar-color: #262626;
$scrollspy-menu-sidebar-line-height: 1.1rem;
$scrollspy-menu-sidebar-padding-x: 5px;
$scrollspy-menu-sidebar-font-weight: 400;
$scrollspy-menu-sidebar-transition: all 0.2s ease-in-out;
$scrollspy-menu-sidebar-margin-y: 3px;

$scrollspy-menu-sidebar-active-color: $primary;
$scrollspy-menu-sidebar-active-font-weight: 600;
$scrollspy-menu-sidebar-active-border-width: 0.125rem;
$scrollspy-menu-sidebar-active-border-color: $primary;

// Type

$note-padding: 10px;
$note-border-width: 6px;
$note-border-radius: 5px;
$note-strong-font-weight: 600;
$note-paragraph-font-weight: 500;