@use 'sass:string';
@use 'sass:math';
@use 'sass:map';
@use 'settings' as *;
@use 'mixins/functions' as *;

// Assets Base
$assets-base: '..' !default;

// Base Config
$enable-extra-colors: true !default;
$enable-gradients: false !default;
$enable-shadows: true !default;
$enable-navbar-vertical: true !default;
$enable-dark-mode: true !default;
$enable-negative-margins: true !default;
// $enable-rfs is declared in `_mixins.scss` (forwarded from rfs with `false !default`)
$enable-cssgrid: true !default;
$enable-rounded: true !default;
$enable-transitions: true !default;
$enable-reduced-motion: true !default;
$enable-smooth-scroll: true !default;
$enable-grid-classes: true !default;
$enable-container-classes: true !default;
$enable-button-pointers: true !default;
$enable-validation-icons: true !default;
$enable-deprecation-messages: true !default;
$enable-deprecated: true !default;
$enable-important-utilities: true !default;

// Escaped Characters
// $escaped-characters moved to `_settings.scss`

// Dark Mode
$color-mode-type: data !default;

// Colors
$gray-50: oklch(98.51% 0 0deg) !default; // #fafafa
$gray-100: oklch(97.02% 0 0deg) !default; // #f5f5f5
$gray-200: oklch(92.19% 0 0deg) !default; // #e5e5e5
$gray-300: oklch(86.99% 0 0deg) !default; // #d4d4d4
$gray-400: oklch(71.55% 0 0deg) !default; // #a3a3a3
$gray-500: oklch(55.55% 0 0deg) !default; // #737373
$gray-600: oklch(43.86% 0 0deg) !default; // #525252
$gray-700: oklch(37.15% 0 0deg) !default; // #404040
$gray-800: oklch(26.86% 0 0deg) !default; // #262626
$gray-900: oklch(20.46% 0 0deg) !default; // #171717
$gray-950: oklch(14.48% 0 0deg) !default; // #0a0a0a

// $black and $white moved to `_settings.scss`

$light: $gray-50 !default;
$dark: $gray-800 !default;

$grays: (
  '100': $gray-100,
  '200': $gray-200,
  '300': $gray-300,
  '400': $gray-400,
  '500': $gray-500,
  '600': $gray-600,
  '700': $gray-700,
  '800': $gray-800,
  '900': $gray-900,
) !default;

$blue: oklch(54.6% 0.1724 254.2deg) !default; // #066fd1
$azure: oklch(66.26% 0.1358 246.81deg) !default; // #4299e1
$indigo: oklch(55.66% 0.2082 268.35deg) !default; // #4263eb
$purple: oklch(57.83% 0.2186 319.15deg) !default; // #ae3ec9
$pink: oklch(58.81% 0.201 5.25deg) !default; // #d6336c
$red: oklch(58.29% 0.1941 25.59deg) !default; // #d63939
$orange: oklch(68.51% 0.1954 44.57deg) !default; // #f76707
$yellow: oklch(77.02% 0.1658 71.02deg) !default; // #f59f00
$lime: oklch(70.99% 0.1897 131.53deg) !default; // #74b816
$green: oklch(67.38% 0.1885 145.43deg) !default; // #2fb344
$teal: oklch(64.32% 0.1338 164.7deg) !default; // #0ca678
$cyan: oklch(65.52% 0.1105 212.17deg) !default; // #17a2b8

$colors: (
  'blue': $blue,
  'azure': $azure,
  'indigo': $indigo,
  'purple': $purple,
  'pink': $pink,
  'red': $red,
  'orange': $orange,
  'yellow': $yellow,
  'lime': $lime,
  'green': $green,
  'teal': $teal,
  'cyan': $cyan,
  'black': $black,
  'white': $white,
  'gray': $gray-600,
  'gray-dark': $gray-800,
) !default;

// $min-contrast-ratio, $color-contrast-dark and $color-contrast-light moved to `_settings.scss`

// Color shade ladders and per-color maps (Bootstrap parity). Nothing in the
// build consumes them yet, but they are kept as configurable API — hence
// excluded from the unused-variable lint.
// fusv-disable
$blue-100: tint-color($blue, 80%) !default;
$blue-200: tint-color($blue, 60%) !default;
$blue-300: tint-color($blue, 40%) !default;
$blue-400: tint-color($blue, 20%) !default;
$blue-500: $blue !default;
$blue-600: shade-color($blue, 20%) !default;
$blue-700: shade-color($blue, 40%) !default;
$blue-800: shade-color($blue, 60%) !default;
$blue-900: shade-color($blue, 80%) !default;

$indigo-100: tint-color($indigo, 80%) !default;
$indigo-200: tint-color($indigo, 60%) !default;
$indigo-300: tint-color($indigo, 40%) !default;
$indigo-400: tint-color($indigo, 20%) !default;
$indigo-500: $indigo !default;
$indigo-600: shade-color($indigo, 20%) !default;
$indigo-700: shade-color($indigo, 40%) !default;
$indigo-800: shade-color($indigo, 60%) !default;
$indigo-900: shade-color($indigo, 80%) !default;

$purple-100: tint-color($purple, 80%) !default;
$purple-200: tint-color($purple, 60%) !default;
$purple-300: tint-color($purple, 40%) !default;
$purple-400: tint-color($purple, 20%) !default;
$purple-500: $purple !default;
$purple-600: shade-color($purple, 20%) !default;
$purple-700: shade-color($purple, 40%) !default;
$purple-800: shade-color($purple, 60%) !default;
$purple-900: shade-color($purple, 80%) !default;

$pink-100: tint-color($pink, 80%) !default;
$pink-200: tint-color($pink, 60%) !default;
$pink-300: tint-color($pink, 40%) !default;
$pink-400: tint-color($pink, 20%) !default;
$pink-500: $pink !default;
$pink-600: shade-color($pink, 20%) !default;
$pink-700: shade-color($pink, 40%) !default;
$pink-800: shade-color($pink, 60%) !default;
$pink-900: shade-color($pink, 80%) !default;

$red-100: tint-color($red, 80%) !default;
$red-200: tint-color($red, 60%) !default;
$red-300: tint-color($red, 40%) !default;
$red-400: tint-color($red, 20%) !default;
$red-500: $red !default;
$red-600: shade-color($red, 20%) !default;
$red-700: shade-color($red, 40%) !default;
$red-800: shade-color($red, 60%) !default;
$red-900: shade-color($red, 80%) !default;

$orange-100: tint-color($orange, 80%) !default;
$orange-200: tint-color($orange, 60%) !default;
$orange-300: tint-color($orange, 40%) !default;
$orange-400: tint-color($orange, 20%) !default;
$orange-500: $orange !default;
$orange-600: shade-color($orange, 20%) !default;
$orange-700: shade-color($orange, 40%) !default;
$orange-800: shade-color($orange, 60%) !default;
$orange-900: shade-color($orange, 80%) !default;

$yellow-100: tint-color($yellow, 80%) !default;
$yellow-200: tint-color($yellow, 60%) !default;
$yellow-300: tint-color($yellow, 40%) !default;
$yellow-400: tint-color($yellow, 20%) !default;
$yellow-500: $yellow !default;
$yellow-600: shade-color($yellow, 20%) !default;
$yellow-700: shade-color($yellow, 40%) !default;
$yellow-800: shade-color($yellow, 60%) !default;
$yellow-900: shade-color($yellow, 80%) !default;

$green-100: tint-color($green, 80%) !default;
$green-200: tint-color($green, 60%) !default;
$green-300: tint-color($green, 40%) !default;
$green-400: tint-color($green, 20%) !default;
$green-500: $green !default;
$green-600: shade-color($green, 20%) !default;
$green-700: shade-color($green, 40%) !default;
$green-800: shade-color($green, 60%) !default;
$green-900: shade-color($green, 80%) !default;

$teal-100: tint-color($teal, 80%) !default;
$teal-200: tint-color($teal, 60%) !default;
$teal-300: tint-color($teal, 40%) !default;
$teal-400: tint-color($teal, 20%) !default;
$teal-500: $teal !default;
$teal-600: shade-color($teal, 20%) !default;
$teal-700: shade-color($teal, 40%) !default;
$teal-800: shade-color($teal, 60%) !default;
$teal-900: shade-color($teal, 80%) !default;

$cyan-100: tint-color($cyan, 80%) !default;
$cyan-200: tint-color($cyan, 60%) !default;
$cyan-300: tint-color($cyan, 40%) !default;
$cyan-400: tint-color($cyan, 20%) !default;
$cyan-500: $cyan !default;
$cyan-600: shade-color($cyan, 20%) !default;
$cyan-700: shade-color($cyan, 40%) !default;
$cyan-800: shade-color($cyan, 60%) !default;
$cyan-900: shade-color($cyan, 80%) !default;

$blues: (
  'blue-100': $blue-100,
  'blue-200': $blue-200,
  'blue-300': $blue-300,
  'blue-400': $blue-400,
  'blue-500': $blue-500,
  'blue-600': $blue-600,
  'blue-700': $blue-700,
  'blue-800': $blue-800,
  'blue-900': $blue-900,
) !default;

$indigos: (
  'indigo-100': $indigo-100,
  'indigo-200': $indigo-200,
  'indigo-300': $indigo-300,
  'indigo-400': $indigo-400,
  'indigo-500': $indigo-500,
  'indigo-600': $indigo-600,
  'indigo-700': $indigo-700,
  'indigo-800': $indigo-800,
  'indigo-900': $indigo-900,
) !default;

$purples: (
  'purple-100': $purple-100,
  'purple-200': $purple-200,
  'purple-300': $purple-300,
  'purple-400': $purple-400,
  'purple-500': $purple-500,
  'purple-600': $purple-600,
  'purple-700': $purple-700,
  'purple-800': $purple-800,
  'purple-900': $purple-900,
) !default;

$pinks: (
  'pink-100': $pink-100,
  'pink-200': $pink-200,
  'pink-300': $pink-300,
  'pink-400': $pink-400,
  'pink-500': $pink-500,
  'pink-600': $pink-600,
  'pink-700': $pink-700,
  'pink-800': $pink-800,
  'pink-900': $pink-900,
) !default;

$reds: (
  'red-100': $red-100,
  'red-200': $red-200,
  'red-300': $red-300,
  'red-400': $red-400,
  'red-500': $red-500,
  'red-600': $red-600,
  'red-700': $red-700,
  'red-800': $red-800,
  'red-900': $red-900,
) !default;

$oranges: (
  'orange-100': $orange-100,
  'orange-200': $orange-200,
  'orange-300': $orange-300,
  'orange-400': $orange-400,
  'orange-500': $orange-500,
  'orange-600': $orange-600,
  'orange-700': $orange-700,
  'orange-800': $orange-800,
  'orange-900': $orange-900,
) !default;

$yellows: (
  'yellow-100': $yellow-100,
  'yellow-200': $yellow-200,
  'yellow-300': $yellow-300,
  'yellow-400': $yellow-400,
  'yellow-500': $yellow-500,
  'yellow-600': $yellow-600,
  'yellow-700': $yellow-700,
  'yellow-800': $yellow-800,
  'yellow-900': $yellow-900,
) !default;

$greens: (
  'green-100': $green-100,
  'green-200': $green-200,
  'green-300': $green-300,
  'green-400': $green-400,
  'green-500': $green-500,
  'green-600': $green-600,
  'green-700': $green-700,
  'green-800': $green-800,
  'green-900': $green-900,
) !default;

$teals: (
  'teal-100': $teal-100,
  'teal-200': $teal-200,
  'teal-300': $teal-300,
  'teal-400': $teal-400,
  'teal-500': $teal-500,
  'teal-600': $teal-600,
  'teal-700': $teal-700,
  'teal-800': $teal-800,
  'teal-900': $teal-900,
) !default;

$cyans: (
  'cyan-100': $cyan-100,
  'cyan-200': $cyan-200,
  'cyan-300': $cyan-300,
  'cyan-400': $cyan-400,
  'cyan-500': $cyan-500,
  'cyan-600': $cyan-600,
  'cyan-700': $cyan-700,
  'cyan-800': $cyan-800,
  'cyan-900': $cyan-900,
) !default;
// fusv-enable

// Spacers
$spacer-1: 0.25rem !default;
$spacer-2: 0.5rem !default;
$spacer-3: 1rem !default;
$spacer-4: 1.5rem !default;
$spacer-5: 2rem !default;
$spacer-6: 2.5rem !default;

$spacer-7: 3rem !default;
$spacer-8: 4rem !default;
$spacer-9: 5rem !default;
$spacer-10: 6rem !default;
$spacer-11: 7rem !default;
$spacer-12: 8rem !default;

$spacer: $spacer-3 !default;

$spacers: (
  0: 0,
  1: $spacer-1,
  2: $spacer-2,
  3: $spacer-3,
  4: $spacer-4,
  5: $spacer-5,
  6: $spacer-6,
) !default;

$spacers-extra: (
  7: $spacer-7,
  8: $spacer-8,
  9: $spacer-9,
  10: $spacer-10,
  11: $spacer-11,
  12: $spacer-12,
) !default;

$negative-spacers: null !default;

// Body

// `start`, the property's own initial value, rather than null: `_reboot.scss`
// reads `--body-text-align` unconditionally, so a null left the declaration
// invalid.
$body-text-align: start !default;
$body-color: $gray-800 !default;
$body-bg: $gray-50 !default;

$body-secondary-color: color-transparent(var(--body-color), 0.75) !default;
$body-secondary-bg: $gray-200 !default;

$body-tertiary-color: color-transparent(var(--body-color), 0.5) !default;
$body-tertiary-bg: $gray-100 !default;

// Typography
$font-google: null !default;
$font-google-monospaced: null !default;
$font-icons: () !default;

$font-family-sans-serif: (system-ui, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif) !default;
$font-family-monospace: (ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace) !default;
$font-family-serif: 'Georgia', 'Times New Roman', times, serif !default;
$font-family-comic: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', 'Comic Neue', sans-serif, cursive !default;

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

// Icons
$icon-stroke-width: 1.5 !default;
$icon-size: 1.25rem !default;
$icon-inline-size: 1rem !default;
$icon-inline-vertical-align: -0.2rem !default;
$icon-sm-size: 1rem !default;
$icon-md-size: 2.5rem !default;
$icon-lg-size: 3.5rem !default;

$font-size-root: null !default;
$font-size-base: 0.875rem !default;
$font-size-sm: $font-size-base * 0.875 !default;
$font-size-lg: $font-size-base * 1.25 !default;

$spacing-wide: 0.04em !default;
$spacing-normal: 0 !default;
$spacing-tight: -0.04em !default;

$body-letter-spacing: 0 !default;

$font-weight-lighter: lighter !default;
$font-weight-bolder: bolder !default;
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-medium: 500 !default;
$font-weight-semibold: 600 !default;
$font-weight-bold: 700 !default;

$font-weight-base: $font-weight-normal !default;

$headings-font-family: null !default;
$headings-font-style: null !default;
$headings-line-height: 1.2 !default;
$headings-font-weight: var(--font-weight-semibold) !default;
$headings-margin-bottom: var(--spacer) !default;
$headings-color: light-dark(var(--gray-900), var(--white)) !default;

$font-weights: (
  'light': $font-weight-light,
  'normal': $font-weight-normal,
  'medium': $font-weight-medium,
  'semibold': $font-weight-semibold,
  'bold': $font-weight-bold,
  'headings': $headings-font-weight,
) !default;

$line-height-base: divide(1.25rem, $font-size-base) !default;
$line-height-sm: divide(1rem, $font-size-base) !default;
$line-height-lg: divide(1.5rem, $font-size-base) !default;
$line-height-xl: divide(1.75rem, $font-size-base) !default;

$h1-font-size: 1.5rem !default;
$h1-line-height: 2rem !default;

$h2-font-size: 1.25rem !default;
$h2-line-height: 1.75rem !default;

$h3-font-size: 1rem !default;
$h3-line-height: 1.5rem !default;

$h4-font-size: 0.875rem !default;
$h4-line-height: 1.25rem !default;

$h5-font-size: 0.75rem !default;
$h5-line-height: 1rem !default;

$h6-font-size: 0.625rem !default;
$h6-line-height: 1rem !default;

$font-size-reative-xs: 0.71428571em !default;
$font-size-reative-sm: 0.85714285em !default;
$font-size-reative-md: 1em !default;

$small-font-size: 0.875em !default;

$font-sizes: (
  1: $h1-font-size,
  2: $h2-font-size,
  3: $h3-font-size,
  4: $h4-font-size,
  5: $h5-font-size,
  6: $h6-font-size,
) !default;

$line-heights: (
  h1: $h1-line-height,
  h2: $h2-line-height,
  h3: $h3-line-height,
  h4: $h4-line-height,
  h5: $h5-line-height,
  h6: $h6-line-height,

  base: $line-height-base,
  sm: $line-height-sm,
  lg: $line-height-lg,
  xl: $line-height-xl,
) !default;

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

$display-font-family: null !default;
$display-font-style: null !default;
$display-font-weight: 300 !default;
$display-line-height: $headings-line-height !default;

$lead-font-size: $font-size-base !default;
$lead-font-weight: var(--font-weight-normal) !default;

$blockquote-margin-y: $spacer !default;
$blockquote-font-size: $font-size-base !default;
$blockquote-footer-color: light-dark(var(--gray-600), var(--gray-400)) !default;
$blockquote-footer-font-size: $small-font-size !default;

$initialism-font-size: $small-font-size !default;

$sub-sup-font-size: 0.75em !default;

$dt-font-weight: $font-weight-semibold !default;

$list-inline-padding: 0.5rem !default;

$mark-padding: 0.1875em !default;
$mark-color: $body-color !default;
$mark-bg: $yellow-100 !default;

// Z-index
$zindex-dropdown: 1000 !default;
$zindex-sticky: 1020 !default;
$zindex-fixed: 1030 !default;
$zindex-offcanvas-backdrop: 1040 !default;
$zindex-offcanvas: 1045 !default;
$zindex-modal-backdrop: 1050 !default;
$zindex-modal: 1055 !default;
$zindex-popover: 1070 !default;
$zindex-tooltip: 1080 !default;
$zindex-toast: 1090 !default;

$zindex-levels: (
  n1: -1,
  0: 0,
  1: 1,
  2: 2,
  3: 3,
) !default;

$text-secondary-opacity: 0.7 !default;

$body-emphasis-color: $gray-700 !default;

// $color-contrast-dark and $color-contrast-light moved to `_settings.scss`.
// Note: they were already no-ops here — the `!default` definitions earlier
// in this file always won, so their effective values were $black / $white.

$text-secondary: $gray-500 !default;
$text-secondary-light: $gray-400 !default;
$text-secondary-dark: $gray-600 !default;

$border-light-color: var(--gray-200) !default;
$border-light-opacity: 4.7% !default;
$border-light-color-translucent: color-transparent(var(--gray-800), $border-light-opacity) !default;

$border-color: var(--gray-200) !default;
$border-opacity: 11.9% !default;
$border-color-translucent: color-transparent(var(--gray-800), $border-opacity) !default;

$border-dark-color: var(--gray-300) !default;
$border-dark-opacity: 20.7% !default;
$border-dark-color-translucent: color-transparent(var(--gray-800), $border-dark-opacity) !default;

$border-active-color: var(--gray-400) !default;
$border-active-opacity: 44.8% !default;
$border-active-color-translucent: color-transparent(var(--gray-800), $border-active-opacity) !default;

$active-bg: light-dark(color-transparent(var(--primary), 0.04), color-transparent(var(--primary), 0.12)) !default;
$active-color: var(--primary) !default;
$active-border-color: var(--primary) !default;

$selection-bg: light-dark(color-transparent(var(--primary), 0.1), color-transparent(var(--primary), 0.4)) !default;

// Neutral fills: the text color over transparent, so one tint reads the same
// on the page, a card, a dropdown or a modal, in both color modes.
// scss-docs-start fill-variables
$fill-primary: color-transparent(var(--body-color), 0.16) !default;
$fill-secondary: color-transparent(var(--body-color), 0.08) !default;
$fill-tertiary: light-dark(color-transparent(var(--body-color), 0.04), color-transparent(var(--body-color), 0.06)) !default;
$fill-quaternary: color-transparent(var(--body-color), 0.02) !default;

// scss-docs-end fill-variables

$hover-bg: var(--fill-tertiary) !default;

$disabled-bg: var(--bg-surface-secondary) !default;
$disabled-color: color-transparent(var(--body-color), 0.4) !default;

$primary: $blue !default;
$secondary: $text-secondary !default;
$muted: $text-secondary !default;
$success: $green !default;
$info: $azure !default;
$warning: $yellow !default;
$danger: $red !default;

$link-color: $primary !default;
$link-shade-percentage: 20% !default;
$link-hover-color: shift-color($link-color, $link-shade-percentage) !default;
$link-hover-decoration: null !default;

// Icon links

// Paragraphs
$paragraph-margin-bottom: 1rem !default;

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

$extra-colors: (
  'blue': $blue,
  'azure': $azure,
  'indigo': $indigo,
  'purple': $purple,
  'pink': $pink,
  'red': $red,
  'orange': $orange,
  'yellow': $yellow,
  'lime': $lime,
  'green': $green,
  'teal': $teal,
  'cyan': $cyan,
) !default;

$social-colors: (
  'x': #000,
  'facebook': #0866ff,
  'twitter': #1da1f2,
  'linkedin': #0a66c2,
  'google': #4285f4,
  'youtube': #f00,
  'vimeo': #1ab7ea,
  'dribbble': #ea4c89,
  'github': #181717,
  'instagram': #ff0069,
  'pinterest': #bd081c,
  'vk': #07f,
  'rss': #ffa500,
  'flickr': #0063dc,
  'bitbucket': #0052cc,
  'tabler': #066fd1,
) !default;

$gray-colors: (
  gray-50: $gray-50,
  gray-100: $gray-100,
  gray-200: $gray-200,
  gray-300: $gray-300,
  gray-400: $gray-400,
  gray-500: $gray-500,
  gray-600: $gray-600,
  gray-700: $gray-700,
  gray-800: $gray-800,
  gray-900: $gray-900,
  gray-950: $gray-950,
) !default;

$theme-colors: map.merge($theme-colors, map.merge($extra-colors, ()));

// Theme color emphasis
$primary-text-emphasis: mix-color-css(var(--black), var(--primary), 60%) !default;
$secondary-text-emphasis: mix-color-css(var(--black), var(--secondary), 60%) !default;
$success-text-emphasis: mix-color-css(var(--black), var(--success), 60%) !default;
$info-text-emphasis: mix-color-css(var(--black), var(--info), 60%) !default;
$warning-text-emphasis: mix-color-css(var(--black), var(--warning), 60%) !default;
$danger-text-emphasis: mix-color-css(var(--black), var(--danger), 60%) !default;
$light-text-emphasis: $gray-700 !default;
$dark-text-emphasis: $gray-700 !default;

// Theme bg subtle
$primary-bg-subtle: mix-color-css(var(--white), var(--primary), 80%) !default;
$secondary-bg-subtle: mix-color-css(var(--white), var(--secondary), 80%) !default;
$success-bg-subtle: mix-color-css(var(--white), var(--success), 80%) !default;
$info-bg-subtle: mix-color-css(var(--white), var(--info), 80%) !default;
$warning-bg-subtle: mix-color-css(var(--white), var(--warning), 80%) !default;
$danger-bg-subtle: mix-color-css(var(--white), var(--danger), 80%) !default;
$light-bg-subtle: mix-color-css(var(--gray-100), var(--white)) !default;
$dark-bg-subtle: $gray-400 !default;

// Theme border subtle
$primary-border-subtle: mix-color-css(var(--white), var(--primary), 60%) !default;
$secondary-border-subtle: mix-color-css(var(--white), var(--secondary), 60%) !default;
$success-border-subtle: mix-color-css(var(--white), var(--success), 60%) !default;
$info-border-subtle: mix-color-css(var(--white), var(--info), 60%) !default;
$warning-border-subtle: mix-color-css(var(--white), var(--warning), 60%) !default;
$danger-border-subtle: mix-color-css(var(--white), var(--danger), 60%) !default;
$light-border-subtle: $gray-200 !default;
$dark-border-subtle: $gray-500 !default;

// Backdrops
$backdrop-opacity: 0.32 !default;
$backdrop-blur: 4px !default;
$backdrop-bg: light-dark(var(--gray-800), var(--black)) !default;
$backdrops: (
  dark: color-transparent(var(--dark), calc(var(--backdrop-opacity) * 100%)),
  light: color-transparent(var(--light), calc(var(--backdrop-opacity) * 100%)),
) !default;

// Gradient
$gradient: linear-gradient(180deg, color-transparent(var(--white), 0.15), color-transparent(var(--white), 0)) !default;

// Borders
$border-width: 1px !default;
$border-width-wide: 2px !default;
$border-widths: (
  1: 1px,
  2: 2px,
  3: 3px,
  4: 4px,
  5: 5px,
) !default;
$border-style: solid !default;

$border-radius-xs: 2px !default;
$border-radius-sm: 4px !default;
$border-radius: 6px !default;
$border-radius-lg: 8px !default;
$border-radius-xl: 1rem !default;
$border-radius-xxl: 2rem !default;
$border-radius-pill: 100rem !default;

$border-radiuses: (
  0: 0,
  xs: $border-radius-xs,
  sm: $border-radius-sm,
  md: $border-radius,
  lg: $border-radius-lg,
  xl: $border-radius-xl,
  xxl: $border-radius-xxl,
  pill: $border-radius-pill,
  null: var(--border-radius-md),
) !default;

$border-values: (
  null: var(--border-width) var(--border-style) $border-color-translucent,
  wide: $border-width-wide var(--border-style) $border-color-translucent,
  0: 0,
);

$icon-color: var(--gray-400) !default;

// Code
$code-color: light-dark(var(--gray-600), var(--gray-400)) !default;
$code-bg: var(--fill-tertiary) !default;
$code-font-size: $font-size-reative-sm !default;

$pre-font-size: 0.92857143em !default;
$pre-padding: 1rem !default;
$pre-bg: var(--bg-surface-dark) !default;
$pre-color: var(--light) !default;
$pre-selection-bg: color-transparent(var(--primary), 0.4) !default;

// scss-docs-start kbd-variables
$kbd-height: 1.25rem !default;
$kbd-padding-x: 0.25rem !default;
$kbd-padding-y: 0 !default;
$kbd-gap: 0.25rem !default;
$kbd-font-weight: var(--font-weight-medium) !default;
$kbd-font-size: var(--font-size-h5) !default;
$kbd-border: 0 !default;
$kbd-color: var(--secondary-color) !default;
$kbd-bg: color-transparent(currentColor, 0.12) !default;
$kbd-border-radius: var(--border-radius-sm) !default;
// scss-docs-end kbd-variables
$nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6

// Avatars
// scss-docs-start avatar-variables
$avatar-size: 2.5rem !default;
$avatar-status-size: 0.75rem !default;
$avatar-icon-size: 1.5rem !default;
$avatar-brand-size: 1.25rem !default;
$avatar-upload-icon-size: 1.5rem !default;
$avatar-upload-text-margin-top: 0.25rem !default;
$avatar-cover-ring-width: 0.25rem !default;
$avatar-brand-offset: -2px !default;
$avatar-bg: var(--fill-tertiary) !default;
$avatar-sizes: (
  'xxs': (
    size: 1rem,
    font-size: 0.5rem,
    icon-size: 0.5rem,
    status-size: 0.25rem,
    brand-size: 0.5rem,
  ),
  'xs': (
    size: 1.25rem,
    font-size: $h6-font-size,
    icon-size: 0.75rem,
    status-size: 0.375rem,
    brand-size: 0.75rem,
    border-radius: $border-radius-xs,
  ),
  'sm': (
    size: 2rem,
    font-size: $h5-font-size,
    icon-size: 1.5rem,
    status-size: 0.5rem,
    brand-size: 1rem,
  ),
  'md': (
    size: 2.5rem,
    font-size: $h4-font-size,
    icon-size: 1.5rem,
    status-size: 0.75rem,
    brand-size: 1.25rem,
  ),
  'lg': (
    size: 3rem,
    font-size: $h2-font-size,
    icon-size: 2rem,
    status-size: 0.75rem,
    brand-size: 1.25rem,
  ),
  'xl': (
    size: 5rem,
    font-size: 2rem,
    icon-size: 3rem,
    status-size: 1rem,
    brand-size: 1.25rem,
  ),
  '2xl': (
    size: 7rem,
    font-size: 3rem,
    icon-size: 5rem,
    status-size: 1rem,
    brand-size: 2rem,
  ),
) !default;
$avatar-border-radius: var(--border-radius-pill) !default;
$avatar-font-size: $h4-font-size !default;
$avatar-list-spacing: -0.5;
// scss-docs-end avatar-variables

$link-decoration: none !default;
$link-hover-decoration: underline !default;

// Horizontal rules
$hr-margin-y: 2rem !default;
$hr-color: inherit !default;
$hr-border-color: null !default;
$hr-border-width: var(--border-width) !default;
$hr-opacity: $border-opacity !default;

$vr-border-width: var(--border-width) !default;

// Caret
$caret-width: 0.36em !default;
$caret-vertical-align: $caret-width * 0.85 !default;
$caret-spacing: $caret-width * 0.85 !default;

// Sizing
$page-padding: var(--spacer-3) !default;
$page-padding-sm: var(--spacer-2) !default;
$page-padding-y: var(--spacer-4) !default;
$container-padding-x: calc(var(--page-padding) * 2) !default;
$grid-gutter-width: var(--page-padding) !default;

// Position
$position-values: (
  0: 0,
  50: 50%,
  100: 100%,
) !default;

// Grid breakpoints
// $grid-breakpoints moved to `_settings.scss`

// Grid containers
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px,
) !default;

// Grid columns
$grid-columns: 12 !default;
$grid-row-columns: 6 !default;

$container-variations: (
  slim: 16rem,
  tight: 32rem,
  narrow: 61.875rem,
) !default;

// Sizes
$size-spacers: (
  auto: auto,
  px: 1px,
  full: 100%,
) !default;

$size-values: map.merge(
  $spacers,
  (
    25: 25%,
    33: 33.33333%,
    50: 50%,
    66: 66.66666%,
    75: 75%,
    100: 100%,
    auto: auto,
  )
) !default;

// Aspect ratios
$aspect-ratios: (
  '1x1': 100%,
  '2x1': calc(1 / 2 * 100%),
  '1x2': calc(2 / 1 * 100%),
  '3x1': calc(1 / 3 * 100%),
  '1x3': calc(3 / 1 * 100%),
  '4x1': calc(1 / 4 * 100%),
  '1x4': calc(4 / 1 * 100%),
  '4x3': calc(3 / 4 * 100%),
  '3x4': calc(4 / 3 * 100%),
  '16x9': calc(9 / 16 * 100%),
  '9x16': calc(16 / 9 * 100%),
  '21x9': calc(9 / 21 * 100%),
  '9x21': calc(21 / 9 * 100%),
) !default;

// Shadows
// Neutral drop-shadow tint. Emitted once as the global `--shadow-color` custom
// property (see `_props.scss`); every shadow below only varies its opacity via
// `color-transparent()`, never its colour.
//
// The light branch is already 60% transparent, so `color-transparent()` scales
// each shadow down from the percentages below to the intended light-mode value
// (e.g. `0.125 * 0.4 = 0.05`). The dark branch is fully opaque black, so the
// same percentage lands 2.5x darker — otherwise a near-black shadow is
// invisible against the dark surfaces. Keep the two in sync when tuning.
$box-shadow-color: light-dark(rgba(18, 18, 23, 0.4), #000) !default;

$box-shadow-xs: 0 1px 2px 0 color-transparent(var(--shadow-color), 0.125) !default;
$box-shadow-sm:
  0 1px 3px 0 color-transparent(var(--shadow-color), 0.25),
  0 1px 2px 0 color-transparent(var(--shadow-color), 0.15) !default;
$box-shadow-md:
  0px 2px 4px -1px color-transparent(var(--shadow-color), 0.15),
  0px 4px 6px -1px color-transparent(var(--shadow-color), 0.2) !default;
$box-shadow-lg:
  0px 4px 6px -2px color-transparent(var(--shadow-color), 0.125),
  0px 10px 15px -3px color-transparent(var(--shadow-color), 0.2) !default;
$box-shadow-xl:
  0px 10px 10px -5px color-transparent(var(--shadow-color), 0.1),
  0px 20px 25px -5px color-transparent(var(--shadow-color), 0.25) !default;
$box-shadow-2xl: 0px 25px 50px -12px color-transparent(var(--shadow-color), 0.625) !default;
$box-shadow-overlay:
  0px 2px 4px 0px color-transparent(var(--shadow-color), 0.1),
  0px 5px 8px 0px color-transparent(var(--shadow-color), 0.1),
  0px 10px 18px 0px color-transparent(var(--shadow-color), 0.075),
  0px 24px 48px 0px color-transparent(var(--shadow-color), 0.075),
  0px 0px 0px 1px color-transparent(var(--shadow-color), 0.25) !default;

$box-shadow: $box-shadow-md !default;
$box-shadow-transparent: 0 0 0 0 transparent !default;
$box-shadow-border: 0px 0px 0px 1px color-transparent(var(--shadow-color), 0.25) !default;
$box-shadow-input: $box-shadow-xs !default;
$box-shadow-card: $box-shadow-xs !default;
$box-shadow-card-hover: $box-shadow-lg !default;
$box-shadow-dropdown: $box-shadow-overlay !default;

$box-shadows: (
  null: $box-shadow,
  xs: $box-shadow-xs,
  sm: $box-shadow-sm,
  md: $box-shadow-md,
  lg: $box-shadow-lg,
  xl: $box-shadow-xl,
  '2xl': $box-shadow-2xl,
  overlay: $box-shadow-overlay,
  border: $box-shadow-border,
  transparent: $box-shadow-transparent,
  input: $box-shadow-input,
  card: $box-shadow-card,
  card-hover: $box-shadow-card-hover,
  dropdown: $box-shadow-dropdown,
) !default;

$box-shadow-inset: inset 0 1px 2px color-transparent(var(--shadow-color), 0.1875) !default;

// Component active
$component-active-color: $white !default;
$component-active-bg: $primary !default;

// Focus
$focus-ring-width: 2px !default;
$focus-ring-offset: 2px !default;
$focus-ring-transition: outline-color 0.15s ease-in-out !default;
$focus-ring-opacity: 0.5 !default;
$focus-ring-opacity-dark: 0.75 !default;
$focus-ring-color: focus-ring-color(var(--primary)) !default;

// Transitions
$transition-base: all 0.2s ease-in-out !default;
$transition-fade: opacity 0.15s linear !default;
$transition-collapse: height 0.35s ease !default;
$transition-collapse-width: width 0.35s ease !default;
$transition-time: 0.3s !default;

// Overlay
$overlay-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%) !default;

// Alerts
// scss-docs-start alert-variables
$alert-padding-y: 0.75rem !default;
$alert-padding-x: 1rem !default;
$alert-margin-bottom: 1rem !default;
$alert-link-font-weight: var(--font-weight-semibold) !default;
$alert-border-width: var(--border-width) !default;
$alert-border-color: var(--border-color-translucent) !default;
$alert-shadow: color-transparent(var(--dark), 0.04) 0 2px 4px 0 !default;
$alert-heading-margin-bottom: 0.25rem !default;
$alert-icon-size: 1.25rem !default;
$alert-padding-inline-end: 3rem !default;
$alert-gap: 1rem !default;
// scss-docs-end alert-variables

// Breadcrumb
// scss-docs-start breadcrumb-variables
$breadcrumb-font-size: null !default;
$breadcrumb-padding-y: 0 !default;
$breadcrumb-padding-x: 0 !default;
$breadcrumb-item-padding-x: 0.5rem !default;
$breadcrumb-margin-bottom: 1rem !default;
$breadcrumb-bg: null !default;
$breadcrumb-divider-color: var(--secondary-color) !default;
$breadcrumb-active-color: inherit !default;
$breadcrumb-divider: string.quote('/') !default;
$breadcrumb-border-radius: null !default;
$breadcrumb-link-color: var(--link-color) !default;
$breadcrumb-active-font-weight: var(--font-weight-semibold) !default;
$breadcrumb-disabled-color: var(--disabled-color) !default;

$breadcrumb-variants: (
  dots: '·',
  arrows: '›',
  bullets: '\02022',
) !default;
// scss-docs-end breadcrumb-variables

// Badges
// scss-docs-start badge-variables
$badge-font-size: $font-size-reative-sm !default;
$badge-font-size-sm: $font-size-reative-xs !default;
$badge-font-size-lg: $font-size-reative-md !default;
$badge-font-weight: var(--font-weight-medium) !default;
$badge-padding-y: 0.25em !default;
$badge-padding-x: 0.5em !default;
$badge-border-radius: var(--border-radius) !default;
$badge-empty-size: 0.5rem !default;
$badge-color: var(--secondary) !default;
$badge-bg-color: var(--fill-tertiary) !default;
$badge-gap: 0.25rem !default;
$badge-padding-x-sm: 0.25rem !default;
$badge-padding-y-lg: 0.25rem !default;
$badge-padding-x-lg: 0.5rem !default;
// scss-docs-end badge-variables

// Buttons + Forms
$input-btn-border-width: var(--border-width) !default;
$input-btn-font-family: var(--body-font-family) !default;

$input-btn-padding-y-sm: 0.4375rem !default;
$input-btn-padding-x-sm: 0.5rem !default;
$input-btn-font-size-sm: $h5-font-size !default;
$input-btn-line-height-sm: 1rem !default;
$input-btn-icon-size-sm: 1rem !default;

$input-btn-padding-y: 0.5625rem !default;
$input-btn-padding-x: 1rem !default;
$input-btn-line-height: 1.25rem !default;
$input-btn-font-size: $font-size-base !default;
$input-btn-icon-size: $icon-size !default;

$input-btn-padding-y-lg: 0.6875rem !default;
$input-btn-padding-x-lg: 1.5rem !default;
$input-btn-line-height-lg: 1.5rem !default;
$input-btn-font-size-lg: $h3-font-size !default;
$input-btn-icon-size-lg: 1.5rem !default;

$input-btn-padding-y-xl: 0.6875rem !default;
$input-btn-padding-x-xl: 1.75rem !default;
$input-btn-font-size-xl: 1.25rem !default;
$input-btn-line-height-xl: 2rem !default;
$input-btn-icon-size-xl: 1.75rem !default;

// scss-docs-start btn-variables
$btn-border-width: $input-btn-border-width !default;

$btn-font-weight: var(--font-weight-medium) !default;
$btn-box-shadow: var(--shadow-input) !default;
// Inner edges of the filled color variants: the variant tinted towards white
// along the top and shaded towards black along the bottom, over a faint white
// gradient, so the button reads as slightly raised.
$btn-highlight-color: color-mix(in oklab, var(--btn-variant), var(--white) 30%) !default;
$btn-shade-color: color-mix(in oklab, var(--btn-variant), var(--black) 4%) !default;
$btn-gradient: linear-gradient(180deg, color-transparent(var(--white), 0.12), transparent) !default;
// Border of the filled color variants: the variant shaded a little towards black.
$btn-variant-border-color: color-mix(in oklab, var(--btn-variant), var(--black) 10%) !default;
$btn-disabled-opacity: 0.4 !default;
$btn-active-box-shadow: inset 0 3px 5px color-transparent(var(--black), 0.125) !default;

$btn-link-color: var(--link-color) !default;
$btn-link-hover-color: var(--link-hover-color) !default;
$btn-link-disabled-color: light-dark(var(--gray-600), var(--gray-400)) !default;

$btn-border-radius: var(--border-radius) !default;
$btn-border-radius-sm: var(--border-radius-sm) !default;
$btn-border-radius-lg: var(--border-radius-lg) !default;
$btn-border-radius-xl: var(--border-radius-lg) !default;
$btn-floating-offset: 1rem !default;
$btn-pill-icon-padding-y: 0.375rem !default;
$btn-pill-icon-padding-x: 15px !default;

$btn-transition:
  color 0.15s ease-in-out,
  background-color 0.15s ease-in-out,
  border-color 0.15s ease-in-out,
  $focus-ring-transition,
  box-shadow 0.15s ease-in-out !default;

$btn-hover-bg-shade-amount: 15% !default;
$btn-hover-bg-tint-amount: 15% !default;
$btn-hover-border-shade-amount: 20% !default;
$btn-hover-border-tint-amount: 10% !default;
$btn-active-bg-shade-amount: 20% !default;
$btn-active-bg-tint-amount: 20% !default;
$btn-active-border-shade-amount: 25% !default;
$btn-active-border-tint-amount: 10% !default;

$btn-border-color: var(--border-color) !default;

// Hover and active backgrounds of the default button. `$hover-bg` and
// `$active-bg` are tints over `transparent`; a button over a photo would
// show it through, so the same tints are mixed over the button surface instead.
$btn-hover-bg: light-dark(color-transparent(var(--body-color), 0.06, var(--bg-surface)), color-transparent(var(--body-color), 0.08, var(--bg-surface))) !default;
$btn-active-bg: light-dark(color-transparent(var(--primary), 0.04, var(--bg-surface)), color-transparent(var(--primary), 0.12, var(--bg-surface))) !default;

$btn-color: var(--body-color) !default;
$btn-padding-y: $input-btn-padding-y !default;
$btn-padding-x: $input-btn-padding-x !default;
$btn-font-family: $input-btn-font-family !default;
$btn-font-size: $input-btn-font-size !default;
$btn-line-height: $input-btn-line-height !default;
$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
$btn-font-size-sm: $input-btn-font-size-sm !default;
$btn-font-size-lg: $input-btn-font-size-lg !default;
$btn-padding-y-sm: $input-btn-padding-y-sm !default;
$btn-padding-x-sm: 0.75rem !default;
$btn-padding-y-lg: $input-btn-padding-y-lg !default;
$btn-padding-x-lg: $input-btn-padding-x-lg !default;
// scss-docs-end btn-variables

// Inputs
// scss-docs-start input-variables
$input-bg: var(--bg-forms) !default;
$input-disabled-color: null !default;
$input-disabled-bg: var(--bg-forms-disabled) !default;
$input-disabled-border-color: null !default;

$input-height: null !default;
$input-height-sm: null !default;
$input-height-lg: null !default;
$input-border-radius: var(--border-radius) !default;
$input-border-radius-sm: var(--border-radius-sm) !default;
$input-border-radius-lg: var(--border-radius-lg) !default;
$input-padding-y: $input-btn-padding-y !default;
$input-padding-x: $input-btn-padding-x !default;
$input-font-family: $input-btn-font-family !default;
$input-font-size: $input-btn-font-size !default;
$input-font-weight: $font-weight-base !default;
$input-color: var(--body-color) !default;
$input-box-shadow: var(--shadow-input) !default;

$input-plaintext-color: var(--body-color) !default;

$input-focus-bg: $input-bg !default;
$input-focus-border-color: mix-color-css(var(--white), var(--primary), 50%) !default;
$input-focus-color: var(--body-color) !default;
$input-transition:
  border-color 0.15s ease-in-out,
  $focus-ring-transition,
  box-shadow 0.15s ease-in-out !default;

$input-border-width: $input-btn-border-width !default;
$input-line-height: $input-btn-line-height !default;
$input-line-height-lg: $input-btn-line-height-lg !default;
$input-line-height-sm: $input-btn-line-height-sm !default;
$input-height-border: calc(#{$input-border-width} * 2) !default;

$input-padding-y-sm: $input-btn-padding-y-sm !default;
$input-padding-x-sm: $input-btn-padding-x-sm !default;
$input-font-size-sm: $input-btn-font-size-sm !default;

$input-padding-y-lg: $input-btn-padding-y-lg !default;
$input-padding-x-lg: $input-btn-padding-x-lg !default;
$input-font-size-lg: $input-btn-font-size-lg !default;

$input-height-inner: add($input-line-height, calc($input-padding-y * 2)) !default;
$input-height-inner-half: add($input-line-height, $input-padding-y) !default;
$input-height-inner-quarter: add($input-line-height, calc($input-padding-y * 0.5)) !default;

$input-height: add($input-line-height, add(calc($input-padding-y * 2), $input-height-border, false)) !default;
$input-height-sm: add($input-line-height-sm, add(calc($input-padding-y-sm * 2), $input-height-border, false)) !default;
$input-height-lg: add($input-line-height-lg, add(calc($input-padding-y-lg * 2), $input-height-border, false)) !default;
// scss-docs-end input-variables

// OTP input
// scss-docs-start otp-variables
$otp-size: $input-height !default;
$otp-font-size: $input-font-size !default;
$otp-gap: 0.5rem !default;
$otp-slot-color: var(--body-color) !default;
$otp-slot-bg: $input-bg !default;
$otp-slot-border-width: $input-border-width !default;
$otp-slot-border-color: var(--border-color) !default;
$otp-slot-border-radius: $input-border-radius !default;
$otp-slot-box-shadow: var(--shadow-input) !default;
$otp-separator-color: var(--secondary) !default;
// scss-docs-end otp-variables

// NumberInput
// scss-docs-start number-input-variables
$number-input-input-width: 3.5rem !default;
$number-input-input-widths: (
  'sm': 3rem,
  'lg': 4rem,
) !default;
$number-input-icon-sizes: (
  'sm': $input-btn-icon-size-sm,
  'lg': $input-btn-icon-size-lg,
) !default;
$number-input-bg: $input-bg !default;
$number-input-border-color: var(--border-color) !default;
$number-input-border-radius: $input-border-radius !default;
// Monochrome icons, painted with `currentColor` through `mask-icon()` on an empty button.
$number-input-icon-decrement: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14'/></svg>") !default;
$number-input-icon-increment: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 5v14M5 12h14'/></svg>") !default;
// scss-docs-end number-input-variables

// Cards
// scss-docs-start card-variables
$card-spacer-y: 1.25rem !default;
$card-spacer-x: 1.25rem !default;
$card-title-spacer-y: 1.25rem !default;
$card-title-color: null !default;
$card-subtitle-color: null !default;
$card-border-width: var(--border-width) !default;
$card-border-color: var(--border-color-translucent) !default;
$card-border-radius: var(--border-radius-lg) !default;
$card-box-shadow: var(--shadow-card) !default;
$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;

$card-cap-padding-y: $card-spacer-y !default;
$card-cap-padding-x: $card-spacer-x !default;
$card-cap-bg: var(--bg-surface-tertiary) !default;
$card-cap-color: inherit !default;
$card-header-bg: transparent !default;
$card-footer-bg: null !default;
$card-height: null !default;
$card-color: inherit !default;
$card-bg: var(--bg-surface) !default;
$card-img-overlay-padding: $spacer !default;
$card-group-margin: 1.5rem !default;

$card-status-size: 3px !default;
// The strip sits on top of the card border, so it is pulled out by the border width
$card-status-offset: calc(-1 * var(--card-border-width)) !default;

$card-stamp-opacity: 0.2 !default;

$card-ribbon-margin: 0.25rem !default;
$card-ribbon-border-radius: var(--border-radius) !default;
$card-ribbon-font-size: $h6-font-size !default;
$card-ribbon-icon-size: $icon-size !default;

$card-header-tabs-bg: var(--bg-surface-tertiary) !default;

$cards-grid-gap: var(--page-padding) !default;
$cards-grid-breakpoint: lg !default;
$card-stamp-size: 7rem !default;
$card-stamp-size-lg: 13rem !default;
$card-stacked-offset: 0.25rem !default;
$card-actions-gutter: 0.5rem !default;
$card-header-pills-margin: 0.5rem !default;
$card-progress-height: 0.25rem !default;
$card-title-margin-bottom: 1rem !default;
$card-title-line-height: 1.5rem !default;
$card-subtitle-margin-start: 0.25rem !default;
$card-body-padding-sm: 1rem !default;
$card-body-padding-md: 2.5rem !default;
$card-body-padding-lg: 2rem !default;
$card-body-padding-lg-up: 4rem !default;
$card-options-top: 1.5rem !default;
$card-options-inset: 0.75rem !default;
$card-options-link-min-width: 1rem !default;
$card-options-link-margin-start: 0.25rem !default;
$card-avatar-height: 3.5rem !default;
$card-avatar-ring-width: 0.25rem !default;
// scss-docs-end card-variables

// scss-docs-start ribbon-variables
$ribbon-offset: 0.75rem !default;
$ribbon-padding-y: 0.25rem !default;
$ribbon-padding-x: 0.75rem !default;
$ribbon-min-size: 2rem !default;
$ribbon-top-width: 2rem !default;
$ribbon-top-padding-y: 0.5rem !default;
$ribbon-bookmark-border-size: 1rem !default;
$ribbon-bookmark-notch-width: 0.5rem !default;
// scss-docs-end ribbon-variables

// scss-docs-start img-label-variables
$img-label-offset: 0.375rem !default;
$img-label-padding-y: 0.25rem !default;
$img-label-padding-x: 0.375rem !default;
$img-label-gap: 0.25rem !default;
$img-label-font-size: $h5-font-size !default;
$img-label-font-weight: var(--font-weight-medium) !default;
$img-label-color: $white !default;
$img-label-bg: rgba($black, 0.6) !default;
$img-label-border-radius: var(--border-radius-sm) !default;
$img-label-backdrop-filter: blur(4px) !default;
$img-label-icon-size: 0.75rem !default;
// scss-docs-end img-label-variables

// scss-docs-start map-marker-variables
$map-marker-size: 1.75rem !default;
$map-marker-dot-size: 1rem !default;
$map-marker-bg: var(--primary) !default;
$map-marker-color: var(--primary-fg) !default;
$map-marker-border-width: 2px !default;
$map-marker-border-color: var(--bg-surface) !default;
$map-marker-font-size: $h5-font-size !default;
$map-marker-icon-size: 1rem !default;
$map-marker-shadow: drop-shadow(0 1px 2px rgba($black, 0.3)) !default;
$map-popup-card-width: 16rem !default;
$map-controls-offset: 0.625rem !default;
$map-controls-gap: 0.375rem !default;
$map-control-icon-size: 1rem !default;
// The shapes of the Tabler icons plus, minus, navigation, current-location and maximize
$map-control-icons: (
  'zoom-in': "<path d='M12 5v14M5 12h14'/>",
  'zoom-out': "<path d='M5 12h14'/>",
  'north': "<path d='M12 18.5l7.265 2.463c.196 .077 .42 .032 .57 -.116a.548 .548 0 0 0 .134 -.572l-7.969 -17.275l-7.97 17.275c-.07 .2 -.017 .424 .135 .572c.15 .148 .374 .193 .57 .116l7.265 -2.463'/>",
  'locate': "<path d='M9 12a3 3 0 1 0 6 0a3 3 0 1 0 -6 0M4 12a8 8 0 1 0 16 0a8 8 0 1 0 -16 0M12 2v2M12 20v2M20 12h2M2 12h2'/>",
  'fullscreen': "<path d='M4 8v-2a2 2 0 0 1 2 -2h2M4 16v2a2 2 0 0 0 2 2h2M16 4h2a2 2 0 0 1 2 2v2M16 20h2a2 2 0 0 0 2 -2v-2'/>",
) !default;
// scss-docs-end map-marker-variables

// Accordion
// scss-docs-start accordion-variables
$accordion-padding-y: 1rem !default;
$accordion-padding-x: 1.25rem !default;
$accordion-border-width: var(--border-width) !default;
$accordion-border-radius: var(--border-radius) !default;
$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
$accordion-btn-toggle-width: $icon-size !default;

$accordion-body-padding-y: $accordion-padding-y !default;
$accordion-body-padding-x: $accordion-padding-x !default;

$accordion-button-padding-y: $accordion-padding-y !default;
$accordion-button-line-height: 1.25rem !default;
$accordion-button-bg: transparent !default;
$accordion-button-active-color: inherit !default;
$accordion-btn-gap: 0.75rem !default;
$accordion-header-gap: 1rem !default;
$accordion-tabs-gap: 0.75rem !default;
// scss-docs-end accordion-variables

// Carousel
// scss-docs-start carousel-variables

$carousel-control-color: $white !default;
$carousel-control-width: 15% !default;
$carousel-control-opacity: 0.5 !default;
$carousel-control-hover-opacity: 0.9 !default;
$carousel-control-transition: opacity 0.15s ease !default;
$carousel-control-icon-filter: null !default;
$carousel-control-icon-width: 1.5rem !default;
$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'></polyline></svg>") !default;
$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'></polyline></svg>") !default;

$carousel-indicator-width: 30px !default;
$carousel-indicator-height: 3px !default;
$carousel-indicator-hit-area-height: 10px !default;
$carousel-indicator-spacer: 3px !default;
$carousel-indicator-opacity: 0.5 !default;
$carousel-indicator-active-bg: $white !default;
$carousel-indicator-active-opacity: 1 !default;
$carousel-indicator-transition: opacity 0.6s ease !default;
$carousel-indicator-thumb-opacity: 0.75 !default;
$carousel-indicator-thumb-width: 4rem !default;
$carousel-indicator-dot-width: 0.5rem !default;

$carousel-caption-width: 70% !default;
$carousel-caption-color: $white !default;
$carousel-caption-padding-y: 1.25rem !default;
$carousel-caption-spacer: 1.25rem !default;

$carousel-transition-duration: 0.6s !default;
$carousel-transition: transform $carousel-transition-duration ease-in-out !default;

$carousel-dark-indicator-active-bg: $black !default; // Deprecated in v5.3.4
$carousel-dark-caption-color: $black !default; // Deprecated in v5.3.4
$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default; // Deprecated in v5.3.4
$carousel-indicators-vertical-margin-inline-end: 1rem !default;
// scss-docs-end carousel-variables

// Close
$btn-close-width: 1em !default;
$btn-close-padding-x: 0.875em !default;
$btn-close-padding-y: $btn-close-padding-x !default;
$btn-close-color: $body-color !default;
$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 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/></svg>") !default;
$btn-close-opacity: 0.4 !default;
$btn-close-hover-opacity: 0.75 !default;
$btn-close-focus-opacity: 1 !default;
$btn-close-disabled-opacity: 0.25 !default;
$btn-close-filter: null !default;
$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default; // Deprecated in v5.3.4

// Datagrid
// scss-docs-start datagrid-variables
$datagrid-padding: 1.5rem !default;
$datagrid-item-width: 15rem !default;
$datagrid-title-margin-bottom: 0.25rem !default;
$datagrid-title-width: 10rem !default;
$datagrid-columns: 4 !default;
// scss-docs-end datagrid-variables

// Empty
// scss-docs-start empty-variables
$empty-padding: 1rem !default;
$empty-padding-md: 3rem !default;
$empty-icon-size: 3rem !default;
$empty-icon-margin-bottom: 1rem !default;
$empty-img-margin-bottom: 2rem !default;
$empty-header-margin-bottom: 1rem !default;
$empty-header-font-size: 4rem !default;
$empty-title-margin-bottom: 0.5rem !default;
$empty-action-margin-top: 1.5rem !default;
// scss-docs-end empty-variables

// Dropdown
// scss-docs-start dropdown-variables
$dropdown-min-width: 11rem !default;
$dropdown-padding-x: 0 !default;
$dropdown-padding-y: 0.25rem !default;
$dropdown-spacer: 1px !default;
$dropdown-font-size: $font-size-base !default;
$dropdown-color: var(--body-color) !default;
$dropdown-bg: var(--bg-surface) !default;
$dropdown-border-color: var(--border-color-translucent) !default;
$dropdown-border-radius: var(--border-radius) !default;
$dropdown-border-width: var(--border-width) !default;
$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
$dropdown-divider-bg: $dropdown-border-color !default;
$dropdown-divider-margin-y: var(--spacer-2) !default;
$dropdown-box-shadow: var(--shadow-dropdown) !default;

$dropdown-link-color: inherit !default;
$dropdown-link-hover-color: inherit !default;
$dropdown-link-hover-bg: var(--hover-bg) !default;
$dropdown-link-active-color: var(--primary) !default;
$dropdown-link-active-bg: var(--active-bg) !default;
$dropdown-link-disabled-color: var(--tertiary-color) !default;

$dropdown-item-padding-y: 0.5rem !default;
$dropdown-item-padding-x: 0.75rem !default;

$dropdown-header-color: light-dark(var(--gray-600), var(--gray-400)) !default;
$dropdown-header-padding-x: $dropdown-item-padding-x !default;
$dropdown-header-padding-y: $dropdown-padding-y !default;

$dropdown-max-width: 25rem !default;
$dropdown-scrollable-height: 13rem !default;
$dropdown-item-gap: 0.5rem !default;
$dropdown-header-padding-bottom: 0.25rem !default;
$dropdown-menu-columns-gap: 0.25rem !default;
$dropdown-arrow-offset: 0.25rem !default;
$dropdown-arrow-inset: 0.75rem !default;
$dropdown-dropend-offset: 0.25rem !default;
$dropdown-menu-card-min-width: 20rem !default;
// scss-docs-end dropdown-variables

// Dropdown dark
$dropdown-dark-color: $gray-300 !default;
$dropdown-dark-bg: $gray-800 !default;
$dropdown-dark-border-color: $dropdown-border-color !default;
$dropdown-dark-divider-bg: $dropdown-divider-bg !default;
$dropdown-dark-box-shadow: null !default;
$dropdown-dark-link-color: $dropdown-dark-color !default;
$dropdown-dark-link-hover-color: $white !default;
$dropdown-dark-link-hover-bg: color-transparent(var(--white), 0.15) !default;
$dropdown-dark-link-active-color: $dropdown-link-active-color !default;
$dropdown-dark-link-active-bg: $dropdown-link-active-bg !default;
$dropdown-dark-link-disabled-color: $gray-500 !default;
$dropdown-dark-header-color: $gray-500 !default;

// Tooltip
// scss-docs-start tooltip-variables
$tooltip-font-size: $font-size-sm !default;
$tooltip-max-width: 200px !default;
$tooltip-color: var(--text-inverted) !default;
$tooltip-bg: var(--bg-surface-inverted) !default;
$tooltip-border-radius: var(--border-radius) !default;
$tooltip-opacity: 0.9 !default;
$tooltip-padding-y: var(--spacer-1) !default;
$tooltip-padding-x: var(--spacer-2) !default;
$tooltip-margin: null !default; // TODO: remove this in v6

$tooltip-arrow-width: 0.8rem !default;
$tooltip-arrow-height: 0.4rem !default;
// scss-docs-end tooltip-variables

// Loader
$loader-size: 2.5rem !default;

$list-group-header-bg: var(--fill-tertiary) !default;
$list-group-header-color: var(--secondary-color) !default;

// Modals
// scss-docs-start modal-variables
$modal-inner-padding: 1.5rem !default;

$modal-footer-margin-between: 0.75rem !default;

$modal-dialog-margin: 0.5rem !default;
$modal-dialog-margin-y-sm-up: 1.75rem !default;

$modal-title-line-height: $line-height-base !default;

$modal-content-color: var(--body-color) !default;
$modal-content-bg: var(--bg-surface) !default;
$modal-content-border-color: transparent !default;
$modal-content-border-width: var(--border-width) !default;
$modal-content-border-radius: var(--border-radius-lg) !default;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
$modal-content-box-shadow-xs: var(--box-shadow-sm) !default;
$modal-content-box-shadow-sm-up: var(--box-shadow) !default;

$modal-backdrop-bg: $backdrop-bg !default;
$modal-backdrop-opacity: $backdrop-opacity !default;
$modal-backdrop-blur: $backdrop-blur !default;

$modal-header-border-color: var(--border-color) !default;
$modal-header-border-width: var(--border-width) !default;
$modal-header-padding-y: $modal-inner-padding !default;
$modal-header-padding-x: $modal-inner-padding !default;
$modal-header-padding: 1.5rem !default; // Keep this for backwards compatibility
$modal-header-height: 3.5rem !default;
$modal-header-padding-y-min: 1rem !default;
$modal-header-bg: transparent !default;

$modal-footer-bg: var(--bg-surface-tertiary) !default;
$modal-footer-border-color: $modal-header-border-color !default;
$modal-footer-border-width: var(--border-width) !default;

$modal-sm: 380px !default;
$modal-md: 540px !default;
$modal-lg: 720px !default;
$modal-xl: 1140px !default;

$modal-fade-transform: translate(0, -1rem) !default;
$modal-show-transform: none !default;
$modal-transition: transform 0.3s ease-out !default;
$modal-scale-transform: scale(1.02) !default;
$modal-body-title-margin-bottom: 1rem !default;
$modal-footer-padding-y: 0.75rem !default;

$modal-status-size: $border-width-wide !default;
// scss-docs-end modal-variables

// Nav
// scss-docs-start nav-variables
$nav-link-padding-y: 0.5rem !default;
$nav-link-padding-x: 0.75rem !default;
$nav-link-font-size: var(--body-font-size) !default;
$nav-link-font-weight: null !default;
$nav-link-color: var(--secondary-color) !default;
$nav-link-active-color: var(--body-color) !default;
$nav-link-hover-color: var(--link-hover-color) !default;
$nav-link-transition:
  color 0.15s ease-in-out,
  background-color 0.15s ease-in-out,
  border-color 0.15s ease-in-out,
  $focus-ring-transition !default;
$nav-link-disabled-color: var(--disabled-color) !default;
$nav-link-icon-size: $icon-size !default;
$nav-link-icon-color: color-transparent(var(--nav-link-color), 0.5) !default;
$nav-link-hover-icon-color: color-transparent(var(--nav-link-color), 0.8) !default;

$nav-pills-border-radius: var(--border-radius) !default;
$nav-pills-link-active-color: var(--primary) !default;
$nav-pills-link-active-bg: var(--active-bg) !default;

$nav-bordered-border-color: var(--border-color) !default;
$nav-bordered-border-width: var(--border-width) !default;
$nav-bordered-link-active-color: var(--primary) !default;
$nav-bordered-link-active-border-color: var(--primary) !default;
$nav-bordered-link-active-border-width: 2 * $border-width !default;
$nav-bordered-margin-x: 1.25rem !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: $nav-tabs-border-color $nav-tabs-border-color $nav-tabs-border-color !default;
$nav-tabs-link-active-color: var(--body-color) !default;
$nav-tabs-link-active-bg: var(--body-bg) !default;
$nav-tabs-link-active-border-color: $nav-tabs-link-hover-border-color !default;

$nav-underline-gap: 1rem !default;
$nav-underline-border-width: 0.125rem !default;
$nav-underline-link-active-color: var(--emphasis-color) !default;
$nav-vertical-nested-margin-start: 1.25rem !default;
$nav-vertical-nested-padding-start: 0.5rem !default;
$nav-link-toggle-padding-x: 0.25rem !default;
$nav-link-icon-margin-end: 0.5rem !default;
// scss-docs-end nav-variables

// Navbar
// scss-docs-start navbar-variables
$navbar-height: 3.5rem !default;
$navbar-padding-y: 0.25rem !default;
$navbar-padding-x: null !default;

$navbar-nav-link-padding-x: $nav-link-padding-x !default;

$navbar-hover-color: var(--body-color) !default;

$navbar-border-width: var(--border-width) !default;
$navbar-border-color: var(--border-color) !default;
$navbar-floating-margin: 0.5rem !default;
$navbar-floating-border-radius: var(--border-radius-lg) !default;

$navbar-light-color: var(--body-color) !default;
$navbar-light-brand-color: var(--body-color) !default;
$navbar-light-active-color: var(--body-color) !default;
$navbar-light-hover-color: var(--body-color) !default;
$navbar-light-disabled-color: var(--disabled-color) !default;
$navbar-light-active-bg: var(--active-bg) !default;
$navbar-light-icon-color: color-transparent(var(--body-color), 0.75) !default;
// Monochrome: painted with `--navbar-toggler-icon-color` through `mask-icon()`.
$navbar-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
$navbar-light-toggler-border-color: color-transparent(var(--emphasis-color), 0.15) !default;
$navbar-light-brand-hover-color: $navbar-light-active-color !default;

$navbar-dark-color: color-transparent(var(--white), $text-secondary-opacity) !default;
$navbar-dark-hover-color: color-transparent(var(--white), 0.75) !default;
$navbar-dark-active-bg: var(--active-bg) !default;
$navbar-dark-brand-color: $white !default;
$navbar-dark-active-color: $white !default;
$navbar-dark-disabled-color: var(--disabled-color) !default;
$navbar-dark-icon-color: color-transparent(var(--white), $text-secondary-opacity) !default;
$navbar-dark-toggler-border-color: color-transparent(var(--white), 0.1) !default;
$navbar-dark-brand-hover-color: $navbar-dark-active-color !default;

$navbar-brand-font-size: $h2-font-size !default;
$navbar-brand-padding-y: $nav-link-padding-y !default;
$navbar-brand-image-height: 2rem !default;
$navbar-brand-margin-end: 1rem !default;
$navbar-brand-font-weight: var(--font-weight-semibold) !default;

$navbar-toggler-padding-y: 0.25rem !default;
$navbar-toggler-padding-x: 0.75rem !default;
$navbar-toggler-font-size: 1rem !default;
$navbar-toggler-border-radius: $btn-border-radius !default;
$navbar-toggler-focus-width: 0 !default;
$navbar-toggler-transition: box-shadow 0.15s ease-in-out !default;
$navbar-toggler-animation-time: 0.2s !default;
$navbar-overlap-height: 9rem !default;

$navbar-nav-link-hover-bg: var(--hover-bg) !default;

$navbar-active-border-color: var(--primary) !default;
// scss-docs-end navbar-variables

// Sidebar
$sidebar-width: 16rem !default;
$sidebar-folded-width: 4rem !default;
$sidebar-inset: 0.5rem !default;
$sidebar-nav-padding-y: 0.75rem !default;
$sidebar-nav-padding-x: 0.75rem !default;
$sidebar-nav-icon-width: 1.5rem !default;
$sidebar-nav-icon-height: 1.25rem !default;
$sidebar-nav-indent: 1.5rem !default;
$sidebar-brand-padding-x: ($sidebar-folded-width - $navbar-brand-image-height) * 0.5 !default;
$sidebar-section-title-font-size: 0.75rem !default;
$sidebar-section-title-margin-top: 1rem !default;

// Page
$page-title-font-size: var(--font-size-h2) !default;
$page-title-line-height: var(--line-height-h2) !default;
$page-title-font-weight: var(--font-weight-headings) !default;

// Popover
// scss-docs-start popover-variables
$popover-font-size: $font-size-sm !default;
$popover-bg: var(--bg-surface) !default;
$popover-max-width: 276px !default;
$popover-border-width: var(--border-width) !default;
$popover-border-color: var(--border-color) !default;
$popover-border-radius: var(--border-radius-lg) !default;
$popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
$popover-box-shadow: var(--shadow-lg) !default;

$popover-header-font-size: $font-size-base !default;
$popover-header-bg: transparent !default;
$popover-header-color: $headings-color !default;
$popover-header-padding-y: 0.5rem !default;
$popover-header-padding-x: $spacer !default;

$popover-body-color: inherit !default;
$popover-body-padding-y: 0.5rem !default;
$popover-body-padding-x: 0.5rem !default;

$popover-arrow-width: 1rem !default;
$popover-arrow-height: 0.5rem !default;
// scss-docs-end popover-variables

// Footer
$footer-padding-y: 2rem !default;
$footer-bg: var(--bg-surface) !default;
$footer-border-color: var(--border-color) !default;
$footer-color: var(--secondary-color) !default;

// Pagination
// scss-docs-start pagination-variables
$pagination-padding-y: calc(0.25rem + 1px) !default;
$pagination-padding-x: 0.25rem !default;
$pagination-padding-y-sm: 0.25rem !default;
$pagination-padding-x-sm: 0.5rem !default;
$pagination-padding-y-lg: 0.75rem !default;
$pagination-padding-x-lg: 1.5rem !default;

$pagination-font-size: $font-size-base !default;

$pagination-color: var(--body-color) !default;
$pagination-bg: transparent !default;
$pagination-border-radius: var(--border-radius) !default;
$pagination-border-width: 1px !default;
$pagination-margin-start: calc(-1 * #{$pagination-border-width}) !default; // stylelint-disable-line function-disallowed-list
$pagination-border-color: transparent !default;

$pagination-focus-color: var(--link-hover-color) !default;
$pagination-focus-bg: var(--secondary-bg) !default;

$pagination-hover-color: var(--link-hover-color) !default;
$pagination-hover-bg: var(--hover-bg) !default;
$pagination-hover-border-color: var(--pagination-border-color) !default; // Todo in v6: remove this?

$pagination-active-color: $component-active-color !default;
$pagination-active-bg: var(--primary) !default;
$pagination-active-border-color: var(--primary) !default;

$pagination-disabled-color: var(--disabled-color) !default;
$pagination-disabled-bg: transparent !default;
$pagination-disabled-border-color: var(--pagination-border-color) !default;

$pagination-transition:
  color 0.15s ease-in-out,
  background-color 0.15s ease-in-out,
  border-color 0.15s ease-in-out,
  $focus-ring-transition,
  box-shadow 0.15s ease-in-out !default;

$pagination-border-radius-sm: var(--border-radius-sm) !default;
$pagination-border-radius-lg: var(--border-radius-lg) !default;
$pagination-gap: 0.25rem !default;
$pagination-link-min-width: 2rem !default;
$page-text-padding-x: 0.5rem !default;
$page-item-subtitle-margin-bottom: 2px !default;
$page-item-subtitle-font-size: 12px !default;
// scss-docs-end pagination-variables

// Statuses
// scss-docs-start status-variables
$status-dot-size: 0.5rem !default;
$status-height: 1.5rem !default;
$status-icon-size: $icon-size !default;
$status-padding-y: 0.25rem !default;
$status-padding-x: 0.75rem !default;
$status-gap: 0.5rem !default;
$status-indicator-size: 2.5rem !default;
$status-circle-size: 0.75rem !default;
// scss-docs-end status-variables

// scss-docs-start hover-gallery-variables
$hover-gallery-aspect-ratio: 1 !default;
$hover-gallery-indicator-size: 2px !default;
$hover-gallery-indicator-gap: 0.25rem !default;
$hover-gallery-indicator-padding: 0.5rem !default;
$hover-gallery-indicator-color: $white !default;
$hover-gallery-indicator-scrim-height: 40% !default;
$hover-gallery-indicator-scrim-bg: linear-gradient(to top, rgba($black, 0.32), rgba($black, 0.2) 20%, rgba($black, 0.1) 45%, rgba($black, 0.03) 75%, transparent) !default;
$hover-gallery-indicator-inactive-opacity: 0.5 !default;
// scss-docs-end hover-gallery-variables

// scss-docs-start signal-variables
$signal-size: map.get(map.get($avatar-sizes, 'xs'), size) !default;
$signal-gap-ratio: 0.1 !default;
$signal-padding-y-ratio: 0.2 !default;
$signal-padding-x-ratio: 0.1 !default;
$signal-bar-border-radius: 1px !default;
$signal-bar-inactive-opacity: 0.24 !default;
$signal-max-bars: 5 !default;
// scss-docs-end signal-variables

// scss-docs-start text-shimmer-variables
$text-shimmer-duration: 2s !default;
$text-shimmer-opacity: 0.4 !default;
$text-shimmer-width: 20% !default;
$text-shimmer-fade-duration: 320ms !default;
$text-shimmer-fade-easing: cubic-bezier(0.22, 1, 0.36, 1) !default;
// Sized against 14px text: a 12px ring and 4px before the label
$text-shimmer-loader-size: math.div(12em, 14) !default;
$text-shimmer-loader-border-width: 0.1em !default;
$text-shimmer-loader-margin: math.div(4em, 14) !default;
$text-shimmer-loader-duration: 0.75s !default;
$text-shimmer-loader-opacity: 0.25 !default;
// scss-docs-end text-shimmer-variables

// Mockup browser
// scss-docs-start mockup-browser-variables
$mockup-browser-bg: var(--bg-surface) !default;
$mockup-browser-border-color: var(--border-light-color) !default;
$mockup-browser-border-radius: var(--border-radius-lg) !default;
$mockup-browser-box-shadow: var(--shadow-lg) !default;
$mockup-browser-toolbar-min-height: 2rem !default;
$mockup-browser-toolbar-padding-y: 0.5rem !default;
$mockup-browser-toolbar-padding-x: 12.5% !default;
$mockup-browser-toolbar-color: var(--secondary) !default;
$mockup-browser-toolbar-bg: var(--bg-surface-secondary) !default;
$mockup-browser-control-offset: 1rem !default;
$mockup-browser-control-size: 0.75rem !default;
$mockup-browser-control-gap: 0.5rem !default;
$mockup-browser-control-colors: #ff5f57, #febc2e, #28c840 !default;
$mockup-browser-url-font-size: $h5-font-size !default;
$mockup-browser-url-line-height: 1rem !default;
$mockup-browser-url-icon-size: 0.875rem !default;

$mockup-browser-sm-border-radius: var(--border-radius) !default;
$mockup-browser-sm-toolbar-min-height: 1.5rem !default;
$mockup-browser-sm-toolbar-padding-y: 0.25rem !default;
$mockup-browser-sm-control-size: 0.5rem !default;
$mockup-browser-sm-control-gap: 0.25rem !default;
$mockup-browser-sm-url-font-size: $h6-font-size !default;
$mockup-browser-sm-url-icon-size: 0.75rem !default;
// scss-docs-end mockup-browser-variables

// Steps
// scss-docs-start steps-variables
$steps-border-width: 2px !default;
$steps-color: var(--primary) !default;
$steps-inactive-color: var(--border-color) !default;
$steps-dot-size: 0.5rem !default;
$step-item-min-height: 1rem !default;
$steps-counter-dot-size: 1.5rem !default;
$steps-vertical-padding-start: 1rem !default;
$steps-vertical-item-gap: 1rem !default;
$steps-vertical-connector-gap: 1rem !default;
$steps-dot-offset: 6px !default;
$steps-dot-offset-counter: -2px !default;
// scss-docs-end steps-variables

// Spinner
// scss-docs-start spinner-variables
$spinner-width: 1.5rem !default;
$spinner-height: 1.5rem !default;
$spinner-vertical-align: -0.125em !default;
$spinner-border-width: 2px !default;
$spinner-animation-speed: 0.75s !default;

$spinner-width-sm: 1rem !default;
$spinner-height-sm: 1rem !default;
$spinner-border-width-sm: 1px !default;
// scss-docs-end spinner-variables

// Tables
// scss-docs-start table-variables
$table-bg: transparent !default;
$table-color: inherit !default;
$table-accent-bg: transparent !default;

$table-cell-padding-x: 0.75rem !default;
$table-cell-padding-y: 0.75rem !default;
$table-cell-padding-y-sm: 0.25rem !default;
$table-cell-padding-x-sm: 0.25rem !default;
$table-cell-vertical-align: top !default;

$table-border-factor: 0.2 !default;
$table-border-width: var(--border-width) !default;
$table-border-color: var(--border-color-translucent) !default;

$table-th-padding-x: $table-cell-padding-x !default;
$table-th-padding-y: 0.5rem !default;
$table-th-font-weight: null !default;
$table-th-bg: var(--bg-surface-tertiary) !default;

$table-striped-color: $table-color !default;
$table-striped-bg-factor: 0.05 !default;
$table-striped-order: even !default;
$table-striped-bg: var(--bg-surface-tertiary) !default;
$table-striped-columns-order: even !default;
// Rows and cells matching this selector keep their own background instead of the stripe.
$table-striped-exclude-selector: '[class^="bg-"], [class*=" bg-"], [class^="table-"], [class*=" table-"], [class^="text-bg-"], [class*=" text-bg-"], [style*="background"]' !default;

$table-group-separator-color: var(--border-color-translucent) !default;

$table-active-color: $table-color !default;
$table-active-bg-factor: 0.1 !default;
$table-active-bg: var(--active-bg) !default;

$table-hover-color: $table-color !default;
$table-hover-bg-factor: 0.075 !default;
$table-hover-bg: var(--hover-bg) !default;

$table-caption-color: var(--secondary-color) !default;

$table-bg-scale: -80% !default;

$table-variants: (
  'primary': mix-color-css(var(--bg-surface), var(--primary), -$table-bg-scale),
  'secondary': mix-color-css(var(--bg-surface), var(--secondary), -$table-bg-scale),
  'success': mix-color-css(var(--bg-surface), var(--success), -$table-bg-scale),
  'info': mix-color-css(var(--bg-surface), var(--info), -$table-bg-scale),
  'warning': mix-color-css(var(--bg-surface), var(--warning), -$table-bg-scale),
  'danger': mix-color-css(var(--bg-surface), var(--danger), -$table-bg-scale),
  'light': $light,
  'dark': $dark,
) !default;

$table-sort-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'><path d='M5 7l3 -3l3 3'/><path d='M5 10l3 3l3 -3'/></svg>") !default;
$table-sort-asc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M5 10l3 -3l3 3'/></svg>") !default;
$table-sort-desc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M5 7l3 3l3 -3'/></svg>") !default;
$table-sort-icon-size: 1rem !default;
$table-sort-icon-margin-start: 0.25rem !default;
// scss-docs-end table-variables

// Toasts
// scss-docs-start toast-variables
$toast-max-width: 350px !default;
$toast-padding-x: 0.75rem !default;
$toast-padding-y: 0.5rem !default;
$toast-font-size: 0.875rem !default;
$toast-color: null !default;
$toast-background-color: var(--bg-surface) !default;
$toast-border-width: var(--border-width) !default;
$toast-border-color: var(--border-color) !default;
$toast-border-radius: var(--border-radius) !default;
$toast-box-shadow: var(--box-shadow) !default;
$toast-spacing: $container-padding-x !default;

$toast-header-color: var(--secondary-color) !default;
$toast-header-background-color: color-transparent(var(--body-bg), 0.85) !default;
$toast-header-border-color: $toast-border-color !default;
// scss-docs-end toast-variables

// Tracking
// scss-docs-start tracking-variables
$tracking-height: 1.5rem !default;
$tracking-gap-width: 0.125rem !default;
$tracking-border-radius: var(--border-radius) !default;
$tracking-block-min-width: 0.25rem !default;
// scss-docs-end tracking-variables

// Sortable
// scss-docs-start sortable-variables
$sortable-ghost-bg: var(--primary-lt) !default;
$sortable-ghost-border-color: var(--primary) !default;
$sortable-ghost-opacity: 0.6 !default;
$sortable-outline-width: 1px !default;
$sortable-selected-bg: var(--primary-lt) !default;
$sortable-drag-bg: var(--bg-surface) !default;
$sortable-drag-rotate: 1.5deg !default;
$sortable-drag-box-shadow: $box-shadow-lg !default;
// scss-docs-end sortable-variables

// Progress
// scss-docs-start progress-variables
$progress-height: 0.5rem !default;
$progress-font-size: $font-size-base * 0.75 !default;
$progress-bg: var(--fill-secondary) !default;
$progress-border-radius: var(--border-radius) !default;
$progress-box-shadow: var(--box-shadow-inset) !default;
$progress-bar-color: $white !default;
$progress-bar-bg: var(--primary) !default;
$progress-bar-animation-timing: 1s linear infinite !default;
$progress-bar-transition: width 0.6s ease !default;
$progress-height-sm: 0.25rem !default;
$progress-height-lg: 0.75rem !default;
$progress-height-xl: 1rem !default;
$progressbg-padding-y: 0.25rem !default;
$progressbg-padding-x: 0.5rem !default;
$progressbg-value-padding-start: 2rem !default;
$progress-separated-ring-width: 2px !default;
$progress-steps-gap: 0.25rem !default;

// Password strength
// scss-docs-start strength-variables
$strength-height: 0.25rem !default;
$strength-gap: 0.25rem !default;
$strength-bg: var(--border-color) !default;
$strength-border-radius: var(--border-radius-pill) !default;
$strength-text-font-size: $small-font-size !default;
$strength-margin-top: 0.5rem !default;
$strength-text-margin-top: 0.25rem !default;
$strength-levels: (
  'weak': var(--danger),
  'fair': var(--warning),
  'good': var(--info),
  'strong': var(--success),
) !default;
// scss-docs-end strength-variables
$progress-steps-item-height: 0.25rem !default;
// scss-docs-end progress-variables

// List Group
$list-group-color: var(--body-color) !default;
$list-group-bg: inherit !default;
$list-group-border-color: var(--border-color) !default;
$list-group-border-width: var(--border-width) !default;
$list-group-border-radius: var(--border-radius) !default;

$list-group-item-padding-y: 1rem !default;
$list-group-item-padding-x: $card-cap-padding-x !default;

$list-group-hover-bg: var(--hover-bg) !default;
$list-group-active-color: inherit !default;
$list-group-active-bg: var(--active-bg) !default;
$list-group-active-border-color: $list-group-border-color !default;

$list-group-disabled-color: var(--secondary-color) !default;
$list-group-disabled-bg: $list-group-bg !default;

$list-group-action-color: inherit !default;
$list-group-action-hover-color: var(--emphasis-color) !default;
$list-group-action-active-color: var(--body-color) !default;
$list-group-action-active-bg: var(--active-bg) !default;
$list-group-header-padding-y: 0.5rem !default;
$list-group-item-gap: 1rem !default;
$list-group-nested-indent: 2.25rem !default;
$list-group-item-padding-y-sm: 0.5rem !default;
$list-group-item-gap-sm: 0.75rem !default;
$list-group-item-padding-y-lg: 1.5rem !default;
$list-group-item-gap-lg: 1.25rem !default;

// Color variants: a tinted row, matched to the `bg-{color}-lt` utilities
$list-group-variant-border-alpha: 0.24 !default;
$list-group-variant-hover-alpha: 0.16 !default;

// Icon list
// scss-docs-start list-icon-variables
$list-icon-gap: 0.5rem !default;
$list-icon-row-gap: 0.5rem !default;
$list-icon-inline-gap: 1.5rem !default;
$list-icon-size: 1rem !default;
$list-icon-color: var(--secondary) !default;
// scss-docs-end list-icon-variables

// Forms
$input-disabled-bg: var(--bg-forms-disabled) !default;
$input-border-color: var(--border-color) !default;
$input-border-color-translucent: var(--border-color-translucent) !default;

$input-placeholder-color: var(--tertiary) !default;

$input-group-addon-padding-y: $input-padding-y !default;
$input-group-addon-padding-x: $input-padding-x !default;
$input-group-addon-font-weight: $input-font-weight !default;
$input-group-addon-color: var(--secondary-color) !default;
$input-group-addon-bg: var(--bg-surface-tertiary) !default;
$input-group-addon-border-color: $input-border-color !default;

$input-border-radius: var(--border-radius) !default;

$form-color-width: 3rem !default;

$form-check-margin-bottom: 0.75rem !default;
$form-check-padding-start: 2rem !default;
$form-check-label-color: null !default;
$form-check-label-cursor: null !default;
$form-check-transition: $focus-ring-transition !default;

$form-check-input-width: 1.25rem !default;
$form-check-min-height: $font-size-base * $line-height-base !default;
$form-check-input-active-filter: brightness(90%) !default;
$form-check-input-bg: var(--bg-forms) !default;
$form-check-input-border: var(--border-width) var(--border-style) $input-border-color !default;
$form-check-input-border-radius: var(--border-radius) !default;
$form-check-radio-border-radius: 50% !default;
$form-check-input-focus-border: $input-focus-border-color !default;
$form-check-input-box-shadow: $input-box-shadow !default;

$form-check-input-checked-bg-size: 1.25rem !default;
$form-check-input-checked-bg-color: var(--primary) !default;
$form-check-input-checked-bg-repeat: repeat !default;
$form-check-input-checked-color: $white !default;
// Monochrome icons, painted with `--form-check-icon-color` through `mask-icon()`.
$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/></svg>") !default;
$form-check-input-checked-border-color: $input-border-color-translucent !default;
$form-check-input-indeterminate-color: $component-active-color !default;
$form-check-input-indeterminate-bg-color: var(--primary) !default;
$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default;
$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;

$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle r='3' fill='black' cx='8' cy='8' /></svg>") !default;

$form-check-input-disabled-opacity: 0.5 !default;
$form-check-label-disabled-opacity: $text-secondary-opacity;
$form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default;
$form-check-inline-margin-end: 1rem !default;

$form-select-padding-y: $input-padding-y !default;
$form-select-padding-x: $input-padding-x !default;
$form-select-font-family: $input-font-family !default;
$form-select-font-size: $input-font-size !default;
$form-select-indicator-padding: $form-select-padding-x * 3 !default; // Extra padding for background-image
$form-select-font-weight: $input-font-weight !default;
$form-select-line-height: $input-line-height !default;
$form-select-color: $input-color !default;
$form-select-bg: $input-bg !default;
$form-select-disabled-color: null !default;
$form-select-disabled-bg: $input-disabled-bg !default;
$form-select-disabled-border-color: $input-disabled-border-color !default;
$form-select-bg-position: right $form-select-padding-x center !default;
$form-select-bg-size: 16px 12px !default; // In pixels because image dimensions
$form-select-indicator-color: $text-secondary-light !default;
$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default;
$form-select-feedback-icon-position: center right $form-select-indicator-padding !default;
$form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;
$form-select-border-width: $input-border-width !default;
$form-select-border-color: $input-border-color !default;
$form-select-border-radius: $input-border-radius !default;
$form-select-box-shadow: var(--shadow-input) !default;
$form-select-focus-border-color: $input-focus-border-color !default;
$form-select-padding-y-sm: $input-padding-y-sm !default;
$form-select-padding-x-sm: $input-padding-x-sm !default;
$form-select-font-size-sm: $input-font-size-sm !default;
$form-select-border-radius-sm: $input-border-radius-sm !default;
$form-select-padding-y-lg: $input-padding-y-lg !default;
$form-select-padding-x-lg: $input-padding-x-lg !default;
$form-select-font-size-lg: $input-font-size-lg !default;
$form-select-border-radius-lg: $input-border-radius-lg !default;
$form-select-transition: $input-transition !default;

$form-switch-bg: light-dark(var(--gray-300), #{color-transparent(var(--white), 0.25)}) !default;
$form-switch-color: var(--white) !default;
$form-switch-width: 2rem !default;
$form-switch-height: 1.25rem !default;
$form-switch-padding-start: $form-switch-width + 0.5rem !default;
$form-switch-border-radius: $form-switch-width !default;
$form-switch-transition:
  background-color 0.15s ease-in-out,
  border-color 0.15s ease-in-out,
  $focus-ring-transition !default;
$form-switch-knob-transition: inset-inline-start 0.15s ease-in-out !default;
$form-switch-focus-color: var(--white) !default;
$form-switch-checked-color: var(--white) !default;
$form-switch-disabled-bg: $input-disabled-bg !default;
$form-switch-disabled-color: light-dark(var(--gray-400), var(--gray-600)) !default;

// Form range
$form-range-track-width: 100% !default;
$form-range-track-height: 0.25rem !default;
$form-range-track-cursor: pointer !default;
$form-range-track-bg: var(--fill-primary) !default;
$form-range-track-border-radius: 1rem !default;
$form-range-track-box-shadow: var(--box-shadow-inset) !default;

$form-range-thumb-width: 1rem !default;
$form-range-thumb-height: 1rem !default;
$form-range-thumb-bg: var(--primary) !default;
$form-range-thumb-border: 2px var(--border-style) $white !default;
$form-range-thumb-border-radius: 1rem !default;
$form-range-thumb-box-shadow: 0 0.1rem 0.25rem color-transparent(var(--black), 0.1) !default;
$form-range-thumb-focus-box-shadow-width: 0.125rem !default;
$form-range-thumb-active-bg: mix-color-css(var(--white), var(--primary), 70%) !default;
$form-range-thumb-disabled-bg: var(--secondary-color) !default;
$form-range-thumb-transition:
  background-color 0.15s ease-in-out,
  border-color 0.15s ease-in-out,
  $focus-ring-transition,
  box-shadow 0.15s ease-in-out !default;

// Form floating
$form-floating-height: add(3.5rem, $input-height-border) !default;
$form-floating-line-height: 1.25 !default;
$form-floating-padding-x: $input-padding-x !default;
$form-floating-padding-y: 1rem !default;
$form-floating-input-padding-t: 1.625rem !default;
$form-floating-input-padding-b: 0.625rem !default;
$form-floating-label-height: 1.5em !default;
$form-floating-label-opacity: 0.65 !default;
$form-floating-label-transform: scale(0.85) translateY(-0.5rem) translateX(calc(var(--dir) * 0.15rem)) #{'/*rtl:ignore*/'} !default;
$form-floating-label-disabled-color: light-dark(var(--gray-600), var(--gray-400)) !default;
$form-floating-transition:
  opacity 0.1s ease-in-out,
  transform 0.1s ease-in-out !default;

// Form text

$form-text-margin-top: 0.25rem !default;
$form-text-font-size: $small-font-size !default;
$form-text-font-style: null !default;
$form-text-font-weight: null !default;
$form-text-color: var(--secondary-color) !default;

$form-label-margin-bottom: 0.5rem !default;
$form-label-font-size: $h4-font-size !default;
$form-label-font-style: null !default;
$form-label-font-weight: var(--font-weight-medium) !default;
$form-label-color: null !default;

// Form feedback

$form-feedback-margin-top: $form-text-margin-top !default;
$form-feedback-font-size: $form-text-font-size !default;
$form-feedback-font-style: $form-text-font-style !default;
$form-feedback-valid-color: $success !default;
$form-feedback-invalid-color: $danger !default;

$form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $green + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'></polyline></svg>") !default;
$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $red + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>") !default;
// Form validation states
// scss-docs-start form-validation-variables
$form-validation-states: (
  'valid': (
    'color': var(--form-valid-color),
    'icon': $form-feedback-icon-valid,
    'tooltip-color': #fff,
    'tooltip-bg-color': var(--success),
    'focus-ring-color': focus-ring-color(var(--success)),
    'border-color': var(--form-valid-border-color),
  ),
  'invalid': (
    'color': var(--form-invalid-color),
    'icon': $form-feedback-icon-invalid,
    'tooltip-color': #fff,
    'tooltip-bg-color': var(--danger),
    'focus-ring-color': focus-ring-color(var(--danger)),
    'border-color': var(--form-invalid-border-color),
  ),
) !default;
// scss-docs-end form-validation-variables

// Form feedback tooltip
$form-feedback-tooltip-padding-y: $tooltip-padding-y !default;
$form-feedback-tooltip-padding-x: $tooltip-padding-x !default;
$form-feedback-tooltip-font-size: $tooltip-font-size !default;
$form-feedback-tooltip-line-height: null !default;
$form-feedback-tooltip-opacity: $tooltip-opacity !default;
$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;

$form-file-button-color: $input-color !default;
$form-file-button-bg: var(--tertiary-bg) !default;
$form-file-button-hover-bg: var(--secondary-bg) !default;

$form-secondary-color: var(--secondary) !default;

$form-valid-color: $form-feedback-valid-color !default;
$form-valid-border-color: $form-feedback-valid-color !default;
$form-invalid-color: $form-feedback-invalid-color !default;
$form-invalid-border-color: $form-feedback-invalid-color !default;

// Legend
// scss-docs-start legend-variables
$legend-margin-bottom: 0.5rem !default;
$legend-font-size: 1.5rem !default;
$legend-font-weight: null !default;
$legend-bg: var(--border-color) !default;
$legend-size: 0.5rem !default;
$legend-border-radius: var(--border-radius-pill) !default;
$legend-gap: 0.5rem !default;
$legend-padding-y: 0.375rem !default;
$legend-padding-x: 0.75rem !default;
$legend-list-gap: 0.25rem 1rem !default;
$legend-list-gap-interactive: 0.25rem !default;
$legend-lg-min-width: 9rem !default;
$legend-lg-value-font-size: $h2-font-size !default;
// scss-docs-end legend-variables

// Switch icon
// scss-docs-start switch-icon-variables
$switch-icon-size: var(--icon-size) !default;
// WCAG 2.5.8 minimum target size; the icon stays at $switch-icon-size, centered
$switch-icon-min-size: 1.5rem !default;
$switch-icon-disabled-opacity: $btn-disabled-opacity !default;
$switch-icon-loading-size: $spinner-width-sm !default;
$switch-icon-loading-border-width: $spinner-border-width-sm !default;
$switch-icon-loading-animation-speed: $spinner-animation-speed !default;
// scss-docs-end switch-icon-variables

// Offcanvas
// scss-docs-start offcanvas-variables
$offcanvas-padding-y: $modal-inner-padding !default;
$offcanvas-padding-x: $modal-inner-padding !default;
$offcanvas-horizontal-width: 400px !default;
$offcanvas-vertical-height: 30vh !default;
$offcanvas-transition-duration: 0.3s !default;
$offcanvas-border-color: var(--border-color) !default;
$offcanvas-border-width: $modal-content-border-width !default;
$offcanvas-title-line-height: $modal-title-line-height !default;
$offcanvas-bg-color: var(--bg-surface) !default;
$offcanvas-color: var(--body-color) !default;
$offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
$offcanvas-backdrop-bg: $backdrop-bg !default;
$offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
$offcanvas-narrow-width: 20rem !default;
$offcanvas-margin: 0.5rem !default;
$offcanvas-border-radius: $modal-content-border-radius !default;
// scss-docs-end offcanvas-variables

// Chat
$chat-bubbles-gap: 1rem !default;
$chat-bubble-padding: 1rem !default;
$chat-bubble-title-margin-bottom: 0.25rem !default;

// Toolbar
$toolbar-gutter: 0.5rem !default;

// Stars
$stars-gap: 0.25rem !default;

// Tags
// scss-docs-start tag-variables
$tag-height: 1.5rem !default;
$tag-padding-x: 0.5rem !default;
$tag-gap: 0.5rem !default;
$tag-close-margin-end: -0.25rem !default;
$tag-close-margin-start: -0.125rem !default;
$tag-close-size: 1rem !default;
$tag-close-font-size: 0.5rem !default;
$tag-badge-padding-y: 0.125rem !default;
$tag-badge-padding-x: 0.25rem !default;
$tag-badge-margin-end: -0.25rem !default;
$tag-addon-margin-start: -0.25rem !default;
$tag-icon-margin-end: -0.125rem !default;
$tag-icon-size: 1rem !default;
$tag-check-size: 1rem !default;
// scss-docs-end tag-variables

// Segmented nav
// scss-docs-start segmented-nav-variables
$nav-segmented-height: 2.5rem !default;
$nav-segmented-padding: 2px !default;
$nav-segmented-radius: 6px !default;
$nav-segmented-gap: 0.25rem !default;
$nav-segmented-link-gap: 0.25rem !default;
$nav-segmented-link-padding-x: 0.75rem !default;
$nav-segmented-link-icon-size: 1.25rem !default;
$nav-segmented-icon-margin: -0.25rem !default;
$nav-segmented-height-sm: 2rem !default;
$nav-segmented-radius-sm: 4px !default;
$nav-segmented-link-padding-x-sm: 0.5rem !default;
$nav-segmented-link-gap-sm: 0.25rem !default;
$nav-segmented-link-icon-size-sm: 1rem !default;
$nav-segmented-height-lg: 3rem !default;
$nav-segmented-radius-lg: 8px !default;
$nav-segmented-link-padding-x-lg: 1rem !default;
$nav-segmented-link-gap-lg: 0.5rem !default;
$nav-segmented-link-icon-size-lg: 1.5rem !default;
// scss-docs-end segmented-nav-variables

// Charts
// scss-docs-start chart-variables
$chart-min-height: 10rem !default;
$chart-height-sm: 2.5rem !default;
$chart-height-lg: 15rem !default;
$chart-height-square: 5.75rem !default;
$chart-sparkline-width: 4rem !default;
$chart-sparkline-height: 2.5rem !default;
$chart-sparkline-height-sm: 1.5rem !default;
$chart-sparkline-width-square: 2.5rem !default;
$chart-sparkline-width-wide: 6rem !default;
$chart-sparkline-label-icon-size: 1rem !default;
// scss-docs-end chart-variables

// scss-docs-start sparkline-variables
$sparkline-width: 5rem !default;
$sparkline-height: 1.5rem !default;
$sparkline-stroke: currentColor !default;
$sparkline-negative: var(--red) !default;
$sparkline-zero: var(--border-color) !default;
$sparkline-threshold: var(--secondary) !default;
$sparkline-stroke-width: 2 !default;
$sparkline-fill: color-mix(in oklab, currentColor 10%, transparent) !default;
$sparkline-track: color-mix(in oklab, currentColor 15%, transparent) !default;
$sparkline-spot: currentColor !default;
$sparkline-spot-size: 2 !default;
$sparkline-label-font-size: $h6-font-size !default;
$sparkline-label-color: var(--body-color) !default;
$sparkline-disabled-color: var(--disabled-color) !default;
$sparkline-sizes: (
  'sm': (
    width: 3rem,
    height: 1rem,
  ),
  'lg': (
    width: 8rem,
    height: 2.5rem,
  ),
) !default;
// scss-docs-end sparkline-variables

// scss-docs-start vector-map-variables
$vector-map-color: var(--primary) !default;
$vector-map-region-fill: var(--border-color) !default;
$vector-map-region-stroke: var(--bg-surface) !default;
$vector-map-region-stroke-width: 1px !default;
$vector-map-value-min: 0.1 !default;
$vector-map-colors-max: 5 !default;
$vector-map-point-size: 0.375rem !default;
$vector-map-selected-stroke: var(--body-color) !default;
$vector-map-selected-stroke-width: 2px !default;
$vector-map-marker-size: 0.5rem !default;
$vector-map-marker-color: var(--vector-map-color) !default;
$vector-map-marker-halo-color: var(--bg-surface) !default;
$vector-map-marker-halo-width: 2px !default;
$vector-map-line-color: var(--secondary) !default;
$vector-map-line-width: 1px !default;
$vector-map-line-dash: 4px !default;
$vector-map-line-duration: 1s !default;
$vector-map-controls-offset: var(--spacer-2) !default;
$vector-map-legend-width: 8rem !default;
$vector-map-legend-height: 0.5rem !default;
// scss-docs-end vector-map-variables

// Patterns
$pattern-size: 0.5rem !default;
$pattern-size-sm: 0.25rem !default;
$pattern-size-md: 0.5rem !default;
$pattern-size-lg: 0.75rem !default;
$pattern-size-xl: 1rem !default;
$pattern-opacity: 10% !default;
$pattern-opacity-factor: 1 !default;
$pattern-opacity-lighter: 6% !default;
$pattern-opacity-light: 8% !default;
$pattern-opacity-dark: 20% !default;
$pattern-opacity-darker: 50% !default;
$pattern-opacities: (
  lighter: $pattern-opacity-lighter,
  light: $pattern-opacity-light,
  dark: $pattern-opacity-dark,
  darker: $pattern-opacity-darker,
) !default;

// Markdown
$markdown-heading-margin-top: 2.5rem !default;
$markdown-blockquote-margin-y: 1.5rem !default;
$markdown-blockquote-padding-y: 0.5rem !default;
$markdown-blockquote-padding-x: 1.5rem !default;
$markdown-pre-max-height: 20rem !default;
$markdown-pre-font-size: 0.8125em !default;

// Calendar
$calendar-padding-y: 0.5rem !default;
$calendar-date-padding: 0.2rem !default;
$calendar-date-size: 1.4rem !default;

// Datepicker
// scss-docs-start datepicker-variables
$datepicker-calendar-padding: 0 !default;
$datepicker-calendar-font-size: $font-size-sm !default;
$datepicker-calendar-header-font-weight: $font-weight-medium !default;
$datepicker-calendar-day-size: 2rem !default;
$datepicker-calendar-day-font-size: $font-size-sm !default;
$datepicker-calendar-range-bg-opacity: 10% !default;
$datepicker-padding: 1rem !default;
$datepicker-bg: $dropdown-bg !default;
$datepicker-border-radius: $dropdown-border-radius !default;
$datepicker-box-shadow: $dropdown-box-shadow !default;
$datepicker-min-width: 280px !default;
// scss-docs-end datepicker-variables

// HR text
$hr-text-gap: 0.5rem !default;
$hr-text-spaceless-margin-y: -0.5rem !default;

// Grid row gutters
$grid-row-gutter-sm: 0.375rem !default;
$grid-row-gutter-md: 1.5rem !default;
$grid-row-gutter-lg: 3rem !default;

// Type / callout
$blockquote-padding: 1rem !default;
$blockquote-paragraph-margin-bottom: 1rem !default;
$list-padding-start: 1.5rem !default;
$steps-padding: 2rem !default;
$steps-item-size: 1.5rem !default;
$steps-margin-start: 1rem !default;
$steps-margin-bottom: 2rem !default;
$steps-heading-margin-top: 2.5rem !default;
$callout-margin-bottom: 1.5rem !default;
$callout-padding-y: 0.5rem !default;
$callout-padding-x: 1rem !default;

// Form layout
$form-label-required-gap: 0.25rem !default;
$form-footer-margin-top: 2rem !default;
$form-fieldset-padding: 1rem !default;
$form-fieldset-margin-bottom: 1rem !default;
$form-help-size: 1.125rem !default;
$form-help-font-size: 0.75rem !default;
$form-control-mobile-font-size: 1rem !default;
$form-check-label-required-gap: 0.25rem !default;
$form-check-description-margin-top: 0.25rem !default;
$form-switch-lg-padding-start: 3.5rem !default;
$form-switch-lg-min-height: 1.5rem !default;
$form-switch-lg-height: 1.5rem !default;
$form-switch-lg-width: 2.75rem !default;
$form-switch-lg-bg-size: 1.5rem !default;
$form-switch-lg-input-offset: -3.5rem !default;
$form-switch-lg-label-padding-top: 0.125rem !default;
$input-icon-padding-end: 2.5rem !default;
$input-icon-padding-start: 2.5rem !default;
$input-icon-addon-width: 2.5rem !default;
$form-colorinput-size: 1.5rem !default;
$form-imagecheck-check-offset: 0.25rem !default;
$form-imagecheck-caption-padding: 0.25rem !default;
$form-selectgroup-gap: 0.5rem !default;
$form-selectgroup-icon-margin-x: -0.25rem !default;

// Placeholders
// scss-docs-start placeholder-variables
$placeholder-opacity-min: 0.1 !default;
$placeholder-opacity-max: 0.2 !default;
// scss-docs-end placeholder-variables

// Image thumbnails
$thumbnail-padding: 0.25rem !default;
$thumbnail-bg: var(--body-bg) !default;
$thumbnail-border-width: var(--border-width) !default;
$thumbnail-border-color: var(--border-color) !default;
$thumbnail-border-radius: var(--border-radius) !default;
$thumbnail-box-shadow: var(--box-shadow-sm) !default;

// Figures
$figure-caption-font-size: $small-font-size !default;
$figure-caption-color: var(--secondary-color) !default;

// Tabler Plugins
$social-apps: ('apple', 'discord', 'dribbble', 'facebook', 'figma', 'github', 'google', 'instagram', 'linkedin', 'medium', 'meta', 'metamask', 'pinterest', 'reddit', 'signal', 'skype', 'snapchat', 'spotify', 'telegram', 'tiktok', 'tumblr', 'twitch', 'vk', 'x', 'youtube');

// Payments
$payment-sizes: $avatar-sizes !default;
$payment-providers: (
  '2c2p',
  '2checkout',
  'ach-transfer',
  'adyen',
  'affirm',
  'afterpay',
  'airtm',
  'airwallex',
  'alipay-plus',
  'alipay',
  'allegro-pay',
  'amazon-pay',
  'amazon',
  'americanexpress',
  'ant-group',
  'applepay',
  'authorize',
  'autopay',
  'bancontact',
  'bank-of-america',
  'barclays',
  'bbva',
  'binance-usd',
  'binance',
  'bitcoin',
  'bitpay',
  'bkash',
  'blik',
  'bnb-chain',
  'bnp-paribas',
  'braintree',
  'brex',
  'capital-one',
  'cash-app',
  'chase',
  'checkout-com',
  'chime',
  'china-construction-bank',
  'cirrus',
  'citi',
  'coinbase',
  'coinkite',
  'crypto-com',
  'deutsche-bank',
  'dinersclub',
  'directdebit',
  'discover',
  'dwolla',
  'easypaisa',
  'ebay',
  'elo',
  'epayco',
  'esewa',
  'ethereum',
  'eway',
  'fifth-third-bank',
  'fiserv',
  'flutterwave',
  'fonepay',
  'gcash',
  'giropay',
  'goldman-sachs',
  'google-pay',
  'googlewallet',
  'grabpay',
  'hsbc',
  'hubspot',
  'huntington-bank',
  'icbc',
  'ideal',
  'imepay',
  'imoje',
  'ing',
  'ingenico',
  'interac',
  'jazzcash',
  'jcb',
  'khalti',
  'klarna',
  'kraken',
  'linepay',
  'litecoin',
  'mada',
  'maestro',
  'mastercard',
  'mercado-pago',
  'mercury',
  'meta-pay',
  'metamask',
  'mir',
  'mitsubishi-ufj',
  'mobilepay',
  'mollie',
  'monero',
  'moneygram',
  'mpesa',
  'ncr',
  'neteller',
  'northone',
  'nu',
  'nuvei',
  'opensea',
  'oxxo',
  'paybox',
  'payconiq',
  'payka',
  'payline',
  'paynow',
  'payone',
  'payoneer',
  'paypal',
  'paypay',
  'paypo',
  'paysafe',
  'paysafecard',
  'paystack',
  'paytm',
  'payu',
  'phonepe',
  'pix',
  'pnc-bank',
  'poli',
  'przelewy24',
  'rapyd',
  'razorpay',
  'revolut-pay',
  'ripple',
  'rupay',
  'samsung-pay',
  'santander',
  'sepa',
  'shop-pay',
  'shopify',
  'skrill',
  'skycash',
  'sofort',
  'solana',
  'spingo',
  'square',
  'stax',
  'stcpay',
  'stripe',
  'sumitomo-mitsui',
  'swift',
  'swish',
  'synchrony',
  'tether',
  'tpay',
  'troy',
  'true-usd',
  'trustly',
  'twint',
  'ubs',
  'unionpay',
  'upi',
  'us-bank',
  'usdc',
  'venmo',
  'verifone',
  'vipps',
  'visa',
  'we-chat-pay',
  'webmoney',
  'wells-fargo',
  'westernunion',
  'wire-transfer',
  'wise',
  'worldpay',
  'zelle'
);

$flag-box-shadow: var(--shadow-border) !default;
$flag-border-radius: var(--border-radius-sm) !default;
$flag-sizes: $avatar-sizes !default;
$flag-countries: (
  'abkhazia',
  'ad',
  'ae',
  'af',
  'african-union',
  'ag',
  'ai',
  'al',
  'am',
  'ao',
  'aq',
  'ar',
  'arab-league',
  'as',
  'asean',
  'at',
  'au',
  'aw',
  'ax',
  'az',
  'ba',
  'bb',
  'bd',
  'be',
  'bf',
  'bg',
  'bh',
  'bi',
  'bj',
  'bl',
  'bm',
  'bn',
  'bo',
  'bq',
  'bq1',
  'bq2',
  'bq3',
  'br',
  'bs',
  'bt',
  'bv',
  'bw',
  'by',
  'bz',
  'ca',
  'cabinda',
  'cc',
  'cd',
  'cefta',
  'cf',
  'cg',
  'ch',
  'chechnya',
  'chequered',
  'ci',
  'ck',
  'cl',
  'cm',
  'cn',
  'co',
  'commonwealth-of-independent-states',
  'commonwealth-of-nations',
  'cr',
  'cu',
  'cv',
  'cw',
  'cx',
  'cy',
  'cz',
  'de',
  'dg',
  'diver-down',
  'dj',
  'dk',
  'dm',
  'do',
  'dz',
  'eac',
  'ec',
  'ee',
  'eg',
  'eh',
  'er',
  'es',
  'es-ct',
  'es-ga',
  'es-pv',
  'et',
  'eu',
  'fi',
  'fj',
  'fk',
  'fm',
  'fo',
  'fr',
  'ga',
  'gb',
  'gb-eng',
  'gb-nir',
  'gb-sct',
  'gb-wls',
  'gd',
  'ge',
  'gf',
  'gg',
  'gh',
  'gi',
  'gl',
  'gm',
  'gn',
  'gp',
  'gq',
  'gr',
  'gs',
  'gt',
  'gu',
  'gw',
  'gy',
  'hk',
  'hm',
  'hn',
  'hr',
  'ht',
  'hu',
  'ic',
  'id',
  'ie',
  'il',
  'im',
  'in',
  'io',
  'iq',
  'ir',
  'is',
  'it',
  'je',
  'jm',
  'jo',
  'jp',
  'jubaland',
  'ke',
  'kg',
  'kh',
  'ki',
  'km',
  'kn',
  'kp',
  'kr',
  'kurdistan',
  'kw',
  'ky',
  'kz',
  'la',
  'lb',
  'lc',
  'li',
  'lk',
  'lr',
  'ls',
  'lt',
  'lu',
  'lv',
  'ly',
  'ma',
  'maltese-cross',
  'mc',
  'md',
  'me',
  'mercosur',
  'mf',
  'mg',
  'mh',
  'mk',
  'ml',
  'mm',
  'mn',
  'mo',
  'mp',
  'mq',
  'mr',
  'ms',
  'mt',
  'mu',
  'mv',
  'mw',
  'mx',
  'my',
  'mz',
  'na',
  'nato',
  'nc',
  'ne',
  'nf',
  'ng',
  'ni',
  'nl',
  'no',
  'nordic-council',
  'northern-cyprus',
  'np',
  'nr',
  'nu',
  'nz',
  'olympic',
  'om',
  'pa',
  'paneuropean-union',
  'paraolympic',
  'pc',
  'pe',
  'pf',
  'pg',
  'ph',
  'pirate',
  'pk',
  'pl',
  'pm',
  'pn',
  'pr',
  'ps',
  'pt',
  'pw',
  'py',
  'qa',
  'rainbow',
  're',
  'red-crescent',
  'red-cross',
  'ro',
  'rs',
  'ru',
  'rw',
  'sa',
  'sb',
  'sc',
  'sd',
  'se',
  'sealand',
  'semaphore-signal',
  'sg',
  'sh',
  'sh-ac',
  'sh-hl',
  'sh-ta',
  'si',
  'sj',
  'sk',
  'sl',
  'sm',
  'sn',
  'so',
  'somaliland',
  'south-american-union',
  'south-ossetia',
  'sr',
  'ss',
  'st',
  'sv',
  'sx',
  'sy',
  'sz',
  'tatarstan',
  'tc',
  'td',
  'tf',
  'tg',
  'th',
  'tibet',
  'tj',
  'tk',
  'tl',
  'tm',
  'tn',
  'to',
  'tr',
  'transnistria',
  'tt',
  'turkic-states',
  'tv',
  'tw',
  'tz',
  'ua',
  'ug',
  'um',
  'un',
  'unknown',
  'us',
  'uy',
  'uz',
  'va',
  'vc',
  've',
  'vg',
  'vi',
  'vn',
  'vu',
  'wf',
  'ws',
  'xk',
  'ye',
  'yt',
  'za',
  'zm',
  'zw'
);