@use 'sass:string';
@use 'sass:math';
@use 'sass:map';
@use 'sass:color';
@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-important-utilities: true !default;
// Escaped Characters
// $escaped-characters moved to `_settings.scss`
// Dark Mode
$color-mode-type: data !default;
// Colors
$gray-50: #f9fafb !default;
$gray-100: #f3f4f6 !default;
$gray-200: #e5e7eb !default;
$gray-300: #d1d5db !default;
$gray-400: #9ca3af !default;
$gray-500: #6b7280 !default;
$gray-600: #4b5563 !default;
$gray-700: #374151 !default;
$gray-800: #1f2937 !default;
$gray-900: #111827 !default;
$gray-950: #030712 !default;
// $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: #066fd1 !default;
$azure: #4299e1 !default;
$indigo: #4263eb !default;
$purple: #ae3ec9 !default;
$pink: #d6336c !default;
$red: #d63939 !default;
$orange: #f76707 !default;
$yellow: #f59f00 !default;
$lime: #74b816 !default;
$green: #2fb344 !default;
$teal: #0ca678 !default;
$cyan: #17a2b8 !default;
$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-500 !default;
$body-bg: $white !default;
$body-secondary-color: rgba($body-color, 0.75) !default;
$body-secondary-bg: $gray-200 !default;
$body-tertiary-color: rgba($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: $gray-600 !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-text-align: null !default;
$body-bg: $gray-50 !default;
$body-color: $gray-800 !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-mix(in srgb, var(--gray-800) #{$border-light-opacity}, transparent) !default;
$border-color: var(--gray-200) !default;
$border-opacity: 11.9% !default;
$border-color-translucent: color-mix(in srgb, var(--gray-800) #{$border-opacity}, transparent) !default;
$border-dark-color: var(--gray-300) !default;
$border-dark-opacity: 20.7% !default;
$border-dark-color-translucent: color-mix(in srgb, var(--gray-800) #{$border-dark-opacity}, transparent) !default;
$border-active-color: var(--gray-400) !default;
$border-active-opacity: 44.8% !default;
$border-active-color-translucent: color-mix(in srgb, var(--gray-800) #{$border-active-opacity}, transparent) !default;
$active-bg: color-transparent(var(--primary), 0.04) !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;
$hover-bg: color-transparent(var(--secondary), 0.08) !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': #1877f2,
'twitter': #1da1f2,
'linkedin': #0a66c2,
'google': #dc4e41,
'youtube': #f00,
'vimeo': #1ab7ea,
'dribbble': #ea4c89,
'github': #181717,
'instagram': #e4405f,
'pinterest': #bd081c,
'vk': #6383a8,
'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-colors-rgb: map-loop($theme-colors, to-rgb, '$value') !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;
$colors: (
'blue': $blue,
'indigo': $indigo,
'purple': $purple,
'pink': $pink,
'red': $red,
'orange': $orange,
'yellow': $yellow,
'green': $green,
'teal': $teal,
'cyan': $cyan,
'black': $black,
'white': $white,
'gray': $gray-600,
'gray-dark': $gray-800,
) !default;
// Theme color emphasis
$primary-text-emphasis: shade-color($primary, 60%) !default;
$secondary-text-emphasis: shade-color($secondary, 60%) !default;
$success-text-emphasis: shade-color($success, 60%) !default;
$info-text-emphasis: shade-color($info, 60%) !default;
$warning-text-emphasis: shade-color($warning, 60%) !default;
$danger-text-emphasis: shade-color($danger, 60%) !default;
$light-text-emphasis: $gray-700 !default;
$dark-text-emphasis: $gray-700 !default;
// Theme bg subtle
$primary-bg-subtle: tint-color($primary, 80%) !default;
$secondary-bg-subtle: tint-color($secondary, 80%) !default;
$success-bg-subtle: tint-color($success, 80%) !default;
$info-bg-subtle: tint-color($info, 80%) !default;
$warning-bg-subtle: tint-color($warning, 80%) !default;
$danger-bg-subtle: tint-color($danger, 80%) !default;
$light-bg-subtle: color.mix($gray-100, $white) !default;
$dark-bg-subtle: $gray-400 !default;
// Theme border subtle
$primary-border-subtle: tint-color($primary, 60%) !default;
$secondary-border-subtle: tint-color($secondary, 60%) !default;
$success-border-subtle: tint-color($success, 60%) !default;
$info-border-subtle: tint-color($info, 60%) !default;
$warning-border-subtle: tint-color($warning, 60%) !default;
$danger-border-subtle: tint-color($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-mix(in sRGB, var(--dark), transparent var(--backdrop-opacity)),
light: color-mix(in sRGB, var(--light), transparent var(--backdrop-opacity)),
) !default;
// Gradient
$gradient: linear-gradient(180deg, rgba($white, 0.15), rgba($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,
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: light-dark(var(--gray-100), var(--gray-900)) !default;
$code-font-size: $font-size-reative-sm !default;
$pre-padding: 1rem !default;
$pre-bg: var(--bg-surface-dark) !default;
$pre-color: var(--light) !default;
$kbd-padding-x: 0.5rem !default;
$kbd-padding-y: 0.25rem !default;
$kbd-font-weight: var(--font-weight-medium) !default;
$kbd-font-size: var(--font-size-h5) !default;
$kbd-border: var(--border-width) var(--border-style) var(--border-color) !default;
$kbd-color: var(--secondary-color) !default;
$kbd-bg: var(--code-bg) !default;
$kbd-border-radius: var(--border-radius) !default;
$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(--bg-surface-secondary) !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;
// Grid
$grid-gutter-width: 1rem !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 (WCAG 2.2 SC 1.4.11)
$focus-ring-width: 0.25rem !default;
$focus-ring-opacity: 0.25 !default;
$focus-ring-color: color-mix(in srgb, var(--primary) #{math.percentage($focus-ring-opacity)}, transparent) !default;
$focus-ring-blur: 0 !default;
// Inner 2px solid ring keeps the indicator above the 3:1 non-text contrast minimum;
// the translucent halo preserves the soft look
$focus-ring-box-shadow:
0 0 0 2px var(--primary),
0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !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: rgba($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(--gray-500) !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(--bg-surface-secondary) !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-focus-width: 0.25rem !default;
$input-btn-focus-color-opacity: $focus-ring-opacity !default;
$input-btn-focus-color: $focus-ring-color !default;
$input-btn-focus-blur: $focus-ring-blur !default;
$input-btn-focus-box-shadow: $focus-ring-box-shadow !default;
$input-btn-padding-y-sm: 0.3125rem !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: $h1-font-size !default;
$input-btn-line-height-xl: 2rem !default;
$input-btn-icon-size-xl: 2rem !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;
$btn-focus-box-shadow: $focus-ring-box-shadow !default;
$btn-disabled-opacity: 0.4 !default;
$btn-active-box-shadow: inset 0 3px 5px rgba($black, 0.125) !default;
$btn-link-color: var(--link-color) !default;
$btn-link-hover-color: var(--link-hover-color) !default;
$btn-link-disabled-color: $gray-600 !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-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,
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;
$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: $input-btn-padding-x-sm !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: tint-color($component-active-bg, 50%) !default;
$input-focus-color: var(--body-color) !default;
$input-focus-width: $input-btn-focus-width !default;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
$input-transition:
border-color 0.15s ease-in-out,
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
// 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
// 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-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;
$accordion-btn-focus-box-shadow: $focus-ring-box-shadow !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,") !default;
$carousel-control-next-icon-bg: url("data:image/svg+xml,") !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,") !default;
$btn-close-focus-shadow: $focus-ring-box-shadow !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;
// 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: $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: $gray-600 !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: rgba($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(--bg-surface-tertiary) !default;
$list-group-header-color: var(--gray-500) !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-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(--gray-500) !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 !default;
$nav-link-disabled-color: var(--disabled-color) !default;
$nav-link-focus-box-shadow: $focus-ring-box-shadow !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-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: color-transparent(var(--primary), 0.08) !default;
// Spelled with the literal prefix: this value is url-encoded into the svg data
// uri below, so the build-time prefixing in .build/build-css.ts never sees a
// `var()` here to rewrite (it arrives as `var%28--body-color%29`).
$navbar-light-icon-color: color-transparent(var(--tblr-body-color), 0.75) !default;
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,") !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: rgba($white, $text-secondary-opacity) !default;
$navbar-dark-hover-color: rgba($white, 0.75) !default;
$navbar-dark-active-bg: rgba($white, 0.06) !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: $navbar-dark-color !default;
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,") !default;
$navbar-dark-toggler-border-color: rgba($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: color-transparent(var(--nav-link-color), 0.06) !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(--gray-500) !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-focus-box-shadow: $focus-ring-box-shadow !default;
$pagination-focus-outline: 0 !default;
$pagination-hover-color: var(--link-hover-color) !default;
$pagination-hover-bg: var(--active-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,
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
// 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;
$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: color-mix(in srgb, var(--emphasis-color) #{math.percentage($table-hover-bg-factor)}, transparent) !default;
$table-caption-color: var(--secondary-color) !default;
$table-bg-scale: -80% !default;
$table-variants: (
'primary': shift-color($primary, $table-bg-scale),
'secondary': shift-color($secondary, $table-bg-scale),
'success': shift-color($success, $table-bg-scale),
'info': shift-color($info, $table-bg-scale),
'warning': shift-color($warning, $table-bg-scale),
'danger': shift-color($danger, $table-bg-scale),
'light': $light,
'dark': $dark,
) !default;
$table-sort-bg-image: url("data:image/svg+xml,") !default;
$table-sort-asc-bg-image: url("data:image/svg+xml,") !default;
$table-sort-desc-bg-image: url("data:image/svg+xml,") !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(--gray-500) !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
// Progress
// scss-docs-start progress-variables
$progress-height: 0.5rem !default;
$progress-font-size: $font-size-base * 0.75 !default;
$progress-bg: var(--border-color) !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;
$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: $card-cap-padding-y !default;
$list-group-item-padding-x: $card-cap-padding-x !default;
$list-group-hover-bg: $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(--secondary-bg) !default;
$list-group-header-padding-y: 0.5rem !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;
// 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(--gray-500) !default;
$input-group-addon-bg: var(--bg-surface-secondary) !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: null !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-focus-box-shadow: $focus-ring-box-shadow !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-bg-image: url("data:image/svg+xml,") !default;
$form-check-input-checked-bg-image-dark: url("data:image/svg+xml,") !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,") !default;
$form-check-radio-checked-bg-image: url("data:image/svg+xml,") !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,") !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-focus-width: $input-focus-width !default;
$form-select-focus-box-shadow: 0 0 0 $form-select-focus-width $input-btn-focus-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-color: $gray-200 !default;
$form-switch-width: 2rem !default;
$form-switch-height: 1.25rem !default;
$form-switch-padding-start: $form-switch-width + 0.5rem !default;
$form-switch-bg-image: url("data:image/svg+xml,") !default;
$form-switch-border-radius: $form-switch-width !default;
$form-switch-transition: background-position 0.15s ease-in-out !default;
$form-switch-focus-color: $input-focus-border-color !default;
$form-switch-focus-bg-image: url("data:image/svg+xml,") !default;
$form-switch-checked-color: $white !default;
$form-switch-checked-bg-image: url("data:image/svg+xml,") !default;
$form-switch-checked-bg-position: right center !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(--border-color) !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 rgba($black, 0.1) !default;
$form-range-thumb-focus-box-shadow:
0 0 0 1px $body-bg,
$input-focus-box-shadow !default;
$form-range-thumb-focus-box-shadow-width: 0.125rem !default;
$form-range-thumb-active-bg: tint-color($component-active-bg, 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,
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: $gray-600 !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: str-replace(
url("data:image/svg+xml,"),
'#',
'%23'
) !default;
$form-feedback-icon-invalid: str-replace(
url("data:image/svg+xml,"),
'#',
'%23'
) !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-box-shadow': 0 0 $input-btn-focus-blur $input-focus-width color-mix(in srgb, var(--success) #{math.percentage($input-btn-focus-color-opacity)}, transparent),
'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-box-shadow': 0 0 $input-btn-focus-blur $input-focus-width color-mix(in srgb, var(--danger) #{math.percentage($input-btn-focus-color-opacity)}, transparent),
'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
$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.75em !default;
$legend-border-radius: var(--border-radius-sm) !default;
// 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-border-color: var(--border-color) !default;
$offcanvas-narrow-width: 20rem !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
// 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;
// Calendar
$calendar-padding-y: 0.5rem !default;
$calendar-date-padding: 0.2rem !default;
$calendar-date-size: 1.4rem !default;
// 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-hint-margin-top: 0.25rem !default;
$form-hint-label-offset: -0.25rem !default;
$form-hint-control-margin-top: 0.5rem !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: (
'ad',
'af',
'ae',
'afrun',
'ag',
'ai',
'al',
'am',
'ao',
'aq',
'ar',
'as',
'at',
'au',
'aw',
'ax',
'az',
'ba',
'bb',
'bd',
'be',
'bf',
'bg',
'bh',
'bi',
'bj',
'bl',
'bm',
'bn',
'bo',
'bq-bo',
'bq-sa',
'bq-se',
'br',
'bs',
'bt',
'bv',
'bw',
'by',
'bz',
'ca',
'cc',
'cd',
'cf',
'cg',
'ch',
'ci',
'ck',
'cl',
'cm',
'cn',
'co',
'cr',
'cu',
'cv',
'cw',
'cx',
'cy',
'cz',
'de',
'dj',
'dk',
'dm',
'do',
'dz',
'ec',
'ee',
'eg',
'eh',
'er',
'es',
'et',
'eu',
'fi',
'fj',
'fk',
'fm',
'fo',
'fr',
'ga',
'gb-eng',
'gb-sct',
'gb',
'gb-wls',
'gb-nir',
'gd',
'ge',
'gf',
'gg',
'gh',
'gi',
'gl',
'gm',
'gn',
'gp',
'gq',
'gr',
'gs',
'gt',
'gu',
'gw',
'gy',
'hk',
'hm',
'hn',
'hr',
'ht',
'hu',
'id',
'ie',
'il',
'im',
'in',
'io',
'iq',
'ir',
'is',
'it',
'je',
'jm',
'jo',
'jp',
'ke',
'kg',
'kh',
'ki',
'km',
'kn',
'kp',
'kr',
'kw',
'ky',
'kz',
'la',
'lb',
'lc',
'li',
'lk',
'lr',
'ls',
'lt',
'lu',
'lv',
'ly',
'ma',
'mc',
'md',
'me',
'mf',
'mg',
'mh',
'mk',
'ml',
'mm',
'mn',
'mo',
'mp',
'mq',
'mr',
'ms',
'mt',
'mu',
'mv',
'mw',
'mx',
'my',
'mz',
'na',
'nc',
'ne',
'nf',
'ng',
'ni',
'nl',
'no',
'np',
'nr',
'nu',
'nz',
'om',
'pa',
'pe',
'pf',
'pg',
'ph',
'pk',
'pl',
'pm',
'pn',
'pr',
'ps',
'pt',
'pw',
'py',
'qa',
'rainbow',
're',
'ro',
'rs',
'ru',
'rw',
'sa',
'sb',
'sc',
'sd',
'se',
'sg',
'sh',
'si',
'sj',
'sk',
'sl',
'sm',
'sn',
'so',
'sr',
'ss',
'st',
'sv',
'sx',
'sy',
'sz',
'tc',
'td',
'tf',
'tg',
'th',
'tj',
'tk',
'tl',
'tm',
'tn',
'to',
'tr',
'tt',
'tv',
'tw',
'tz',
'ua',
'ug',
'um',
'unasur',
'us',
'uy',
'uz',
'va',
'vc',
've',
'vg',
'vi',
'vn',
'vu',
'wf',
'ws',
'ye',
'za',
'zm',
'zw'
);