_variables.scss

// Variables
//
// Variables should follow the `$component-state-property-size` formula for
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
@import "exports.module.scss";

// Color system
$white:    #FFFFFF !default;
$gray-100: #EBEBEB !default;
$gray-200: #CCCCCC !default;
$gray-300: #ADADAD !default;
$gray-400: #8F8F8F !default;
$gray-500: #707070 !default;
$gray-600: #5C5C5C !default;
$gray-700: #454545 !default;
$gray-800: #333333 !default;
$gray-900: #212529 !default;
$black:    #000000 !default;

$grays: () !default;
$grays: map-merge(
  (
    "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
  ),
  $grays
);

$blue: #23419F !default;
$red: #C32D3A !default;
$yellow: #FFD900 !default;
$green: #178253 !default;
$teal: #006DAA !default;

$colors: () !default;
$colors: map-merge(
  (
    "blue": $blue,
    "green": $green,
    "teal": $teal,
    "red": $red,
    "yellow": $yellow,
    "white": $white,
    "gray": $gray-500,
    "dark-gray": $gray-700,
  ),
  $colors
);

$primary: #0A3055 !default;
$secondary: $gray-700 !default;
$brand: #9D0054 !default;
$success: $green !default;
$info: $teal !default;
$danger: $red !default;
$warning: $yellow !default;
$light: #E1DDDB !default;
$dark: #273F2F !default;
$accent-a: #00BBF9 !default;
$accent-b: #FFEE88 !default;

$theme-colors: () !default;
$theme-colors: map-merge(
  (
    "primary":    $primary,
    "secondary":  $secondary,
    "brand":      $brand,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark,
    "gray":       $gray-500,
    "accent-a":   $accent-a,
    "accent-b":   $accent-b,
  ),
  $theme-colors
);

$primary-100: mix(white, $primary, 94%) !default;
$primary-200: mix(white, $primary, 75%) !default;
$primary-300: mix(white, $primary, 50%) !default;
$primary-400: mix(white, $primary, 25%) !default;
$primary-500: $primary !default;
$primary-600: mix(black, $primary, 10%) !default;
$primary-700: mix(black, $primary, 20%) !default;
$primary-800: mix(black, $primary, 25%) !default;
$primary-900: mix(black, $primary, 30%) !default;

$secondary-100: mix(white, $secondary, 94%) !default;
$secondary-200: mix(white, $secondary, 75%) !default;
$secondary-300: mix(white, $secondary, 50%) !default;
$secondary-400: mix(white, $secondary, 25%) !default;
$secondary-500: $secondary !default;
$secondary-600: mix(black, $secondary, 10%) !default;
$secondary-700: mix(black, $secondary, 20%) !default;
$secondary-800: mix(black, $secondary, 25%) !default;
$secondary-900: mix(black, $secondary, 30%) !default;

$brand-100: mix(white, $brand, 94%) !default;
$brand-200: mix(white, $brand, 75%) !default;
$brand-300: mix(white, $brand, 50%) !default;
$brand-400: mix(white, $brand, 25%) !default;
$brand-500: $brand !default;
$brand-600: mix(black, $brand, 10%) !default;
$brand-700: mix(black, $brand, 20%) !default;
$brand-800: mix(black, $brand, 25%) !default;
$brand-900: mix(black, $brand, 30%) !default;

$success-100: mix(white, $success, 94%) !default;
$success-200: mix(white, $success, 75%) !default;
$success-300: mix(white, $success, 50%) !default;
$success-400: mix(white, $success, 25%) !default;
$success-500: $success !default;
$success-600: mix(black, $success, 10%) !default;
$success-700: mix(black, $success, 20%) !default;
$success-800: mix(black, $success, 25%) !default;
$success-900: mix(black, $success, 30%) !default;

$info-100: mix(white, $info, 94%) !default;
$info-200: mix(white, $info, 75%) !default;
$info-300: mix(white, $info, 50%) !default;
$info-400: mix(white, $info, 25%) !default;
$info-500: $info !default;
$info-600: mix(black, $info, 10%) !default;
$info-700: mix(black, $info, 20%) !default;
$info-800: mix(black, $info, 25%) !default;
$info-900: mix(black, $info, 30%) !default;

$warning-100: mix(white, $warning, 94%) !default;
$warning-200: mix(white, $warning, 75%) !default;
$warning-300: mix(white, $warning, 50%) !default;
$warning-400: mix(white, $warning, 25%) !default;
$warning-500: $warning !default;
$warning-600: mix(black, $warning, 10%) !default;
$warning-700: mix(black, $warning, 20%) !default;
$warning-800: mix(black, $warning, 25%) !default;
$warning-900: mix(black, $warning, 30%) !default;

$danger-100: mix(white, $danger, 94%) !default;
$danger-200: mix(white, $danger, 75%) !default;
$danger-300: mix(white, $danger, 50%) !default;
$danger-400: mix(white, $danger, 25%) !default;
$danger-500: $danger !default;
$danger-600: mix(black, $danger, 10%) !default;
$danger-700: mix(black, $danger, 20%) !default;
$danger-800: mix(black, $danger, 25%) !default;
$danger-900: mix(black, $danger, 30%) !default;

$light-100: mix(white, $light, 94%) !default;
$light-200: mix(white, $light, 75%) !default;
$light-300: mix(white, $light, 50%) !default;
$light-400: mix(white, $light, 25%) !default;
$light-500: $light !default;
$light-600: mix(black, $light, 10%) !default;
$light-700: mix(black, $light, 20%) !default;
$light-800: mix(black, $light, 25%) !default;
$light-900: mix(black, $light, 30%) !default;

$dark-100: mix(white, $dark, 94%) !default;
$dark-200: mix(white, $dark, 75%) !default;
$dark-300: mix(white, $dark, 50%) !default;
$dark-400: mix(white, $dark, 25%) !default;
$dark-500: $dark !default;
$dark-600: mix(black, $dark, 10%) !default;
$dark-700: mix(black, $dark, 20%) !default;
$dark-800: mix(black, $dark, 25%) !default;
$dark-900: mix(black, $dark, 30%) !default;

$theme-color-levels: () !default;

$theme-color-levels: map-merge(
  (
    "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,
    "primary-100": $primary-100,
    "primary-200": $primary-200,
    "primary-300": $primary-300,
    "primary-400": $primary-400,
    "primary-500": $primary-500,
    "primary-600": $primary-600,
    "primary-700": $primary-700,
    "primary-800": $primary-800,
    "primary-900": $primary-900,
    "secondary-100": $secondary-100,
    "secondary-200": $secondary-200,
    "secondary-300": $secondary-300,
    "secondary-400": $secondary-400,
    "secondary-500": $secondary-500,
    "secondary-600": $secondary-600,
    "secondary-700": $secondary-700,
    "secondary-800": $secondary-800,
    "secondary-900": $secondary-900,
    "brand-100": $brand-100,
    "brand-200": $brand-200,
    "brand-300": $brand-300,
    "brand-400": $brand-400,
    "brand-500": $brand-500,
    "brand-600": $brand-600,
    "brand-700": $brand-700,
    "brand-800": $brand-800,
    "brand-900": $brand-900,
    "success-100": $success-100,
    "success-200": $success-200,
    "success-300": $success-300,
    "success-400": $success-400,
    "success-500": $success-500,
    "success-600": $success-600,
    "success-700": $success-700,
    "success-800": $success-800,
    "success-900": $success-900,
    "info-100": $info-100,
    "info-200": $info-200,
    "info-300": $info-300,
    "info-400": $info-400,
    "info-500": $info-500,
    "info-600": $info-600,
    "info-700": $info-700,
    "info-800": $info-800,
    "info-900": $info-900,
    "warning-100": $warning-100,
    "warning-200": $warning-200,
    "warning-300": $warning-300,
    "warning-400": $warning-400,
    "warning-500": $warning-500,
    "warning-600": $warning-600,
    "warning-700": $warning-700,
    "warning-800": $warning-800,
    "warning-900": $warning-900,
    "danger-100": $danger-100,
    "danger-200": $danger-200,
    "danger-300": $danger-300,
    "danger-400": $danger-400,
    "danger-500": $danger-500,
    "danger-600": $danger-600,
    "danger-700": $danger-700,
    "danger-800": $danger-800,
    "danger-900": $danger-900,
    "light-100": $light-100,
    "light-200": $light-200,
    "light-300": $light-300,
    "light-400": $light-400,
    "light-500": $light-500,
    "light-600": $light-600,
    "light-700": $light-700,
    "light-800": $light-800,
    "light-900": $light-900,
    "dark-100": $dark-100,
    "dark-200": $dark-200,
    "dark-300": $dark-300,
    "dark-400": $dark-400,
    "dark-500": $dark-500,
    "dark-600": $dark-600,
    "dark-700": $dark-700,
    "dark-800": $dark-800,
    "dark-900": $dark-900,
  ),
  $theme-color-levels
);

$element-color-levels: () !default;

$element-color-levels: map-merge(
  (
    "background": 100,
    "disabled-border": 100,
    "border": 200,
    "icon": 300,
    "active-border": 300,
    "focus": 500,
    "graphic": 300,
    "default": 500,
    "light-text": 500,
    "hover": 700,
    "text": 700,
    "active": 900,
    "dark-text": 900,
  ),
  $element-color-levels
);

// Set a specific jump point for requesting color jumps
$theme-color-interval:      8% !default;

// The yiq lightness value that determines when the lightness
// of color changes from "dark" to "light". Acceptable values are between 0 and 255.
$yiq-contrasted-threshold:  150 !default;

// Customize the light and dark text colors for use in our YIQ color contrast function.
$yiq-text-dark:             theme-color("gray", "text") !default;
$yiq-text-light:            $white !default;

// Characters which are escaped by the escape-svg function
$escaped-characters: (
  ("<", "%3c"),
  (">", "%3e"),
  ("#", "%23"),
  ("(", "%28"),
  (")", "%29"),
) !default;

// Options
//
// Quickly modify global styling by enabling or disabling optional features.

$enable-caret:                                true !default;
$enable-rounded:                              true !default;
$enable-shadows:                              false !default;
$enable-gradients:                            false !default;
$enable-transitions:                          true !default;
$enable-prefers-reduced-motion-media-query:   true !default;
$enable-hover-media-query:                    false !default; // Deprecated, no longer affects any compiled CSS
$enable-grid-classes:                         true !default;
$enable-pointer-cursor-for-buttons:           true !default;
$enable-print-styles:                         true !default;
$enable-responsive-font-sizes:                false !default;
$enable-validation-icons:                     false !default;
$enable-deprecation-messages:                 true !default;

// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.

$spacer: 1rem !default;
$spacers: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$spacers: map-merge(
  (
    0: 0,
    1: ($spacer * .25),
    1\.5: ($spacer * .375),
    2: ($spacer * .5),
    2\.5: ($spacer * .75),
    3: $spacer,
    3\.5: ($spacer * 1.25),
    4: ($spacer * 1.5),
    4\.5: ($spacer * 2),
    5: ($spacer * 3),
    5\.5: ($spacer * 4),
    6: ($spacer * 5),
  ),
  $spacers
);

// This variable affects the `.h-*` and `.w-*` classes.
$sizes: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$sizes: map-merge(
  (
    25: 25%,
    50: 50%,
    75: 75%,
    100: 100%,
    auto: auto
  ),
  $sizes
);

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

$body-bg:                   $white !default;
$body-color:                $gray-700 !default;

// Links
//
// Style anchor elements.

$link-color:                              $info-500 !default;
$link-decoration:                         none !default;
$link-hover-color:                        darken($link-color, 15%) !default;
$link-hover-decoration:                   underline !default;
$inline-link-color:                       $info-500 !default;
$inline-link-decoration:                  underline !default;
$inline-link-decoration-color:            rgba($inline-link-color, .3) !default;
$inline-link-hover-color:                 darken($inline-link-color, 15%) !default;
$inline-link-hover-decoration:            underline !default;
$inline-link-hover-decoration-color:      rgba($inline-link-hover-color, 1) !default;

$muted-link-color:                              $primary-500 !default;
$muted-link-decoration:                         none !default;
$muted-link-hover-color:                        darken($muted-link-color, 15%) !default;
$muted-link-hover-decoration:                   underline !default;
$muted-inline-link-color:                       $primary-500 !default;
$muted-inline-link-decoration:                  underline !default;
$muted-inline-link-decoration-color:            rgba($muted-inline-link-color, .3) !default;
$muted-inline-link-hover-color:                 darken($muted-inline-link-color, 15%) !default;
$muted-inline-link-hover-decoration:            underline !default;
$muted-inline-link-hover-decoration-color:      rgba($muted-inline-link-hover-color, 1) !default;

$brand-link-color:                              $brand-500 !default;
$brand-link-decoration:                         none !default;
$brand-link-hover-color:                        darken($brand-link-color, 15%) !default;
$brand-link-hover-decoration:                   underline !default;
$brand-inline-link-color:                       $brand-500 !default;
$brand-inline-link-decoration:                  underline !default;
$brand-inline-link-decoration-color:            rgba($brand-inline-link-color, .3) !default;
$brand-inline-link-hover-color:                 darken($brand-inline-link-color, 15%) !default;
$brand-inline-link-hover-decoration:            underline !default;
$brand-inline-link-hover-decoration-color:      rgba($brand-inline-link-hover-color, 1) !default;

// Darken percentage for links with `.text-*` class (e.g. `.text-success`)
$emphasized-link-hover-darken-percentage: 15% !default;

// Paragraphs
//
// Style p element.

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

@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1600px
) !default;

@include _assert-ascending($container-max-widths, "$container-max-widths");

// Grid columns
//
// Set the number of columns and specify the width of the gutters.

$grid-columns:                12 !default;
$grid-gutter-width:           24px !default;
$grid-row-columns:            6 !default;

$max-width-xs: 464px !default;
$max-width-sm: 708px !default;
$max-width-md: 952px !default;
$max-width-lg: 1196px !default;
$max-width-xl: 1440px !default;

// Components
//
// Define common padding and border radius sizes and more.

$line-height-lg:              1.5 !default;
$line-height-sm:              1.5 !default;

$border-width:                1px !default;
$border-color:                theme-color("gray", "border") !default;

$border-radius:               .375rem !default;
$border-radius-lg:            .425rem !default;
$border-radius-sm:            .25rem !default;

$rounded-pill:                50rem !default;

$level-1-box-shadow:          0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15) !default;
$level-2-box-shadow:          0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15) !default;
$level-3-box-shadow:          0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15) !default;
$level-4-box-shadow:          0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15) !default;
$level-5-box-shadow:          0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15) !default;

$box-shadow-down-1:           0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15) !default;
$box-shadow-down-2:           0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15) !default;
$box-shadow-down-3:           0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15) !default;
$box-shadow-down-4:           0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15) !default;
$box-shadow-down-5:           0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15) !default;

$box-shadow-left-1:           -.0625rem 0 .125rem rgba(0, 0, 0, .15), -.0625rem 0 .25rem rgba(0, 0, 0, .15) !default;
$box-shadow-left-2:           -.125rem 0 .25rem rgba(0, 0, 0, .15), -.125rem 0 .5rem rgba(0, 0, 0, .15) !default;
$box-shadow-left-3:           -.5rem 0 1rem rgba(0, 0, 0, .15), -.25rem 0 .625rem rgba(0, 0, 0, .15) !default;
$box-shadow-left-4:           -.625rem 0 1.25rem rgba(0, 0, 0, .15), -.5rem 0 1.25rem rgba(0, 0, 0, .15) !default;
$box-shadow-left-5:           -1.25rem 0 2.5rem rgba(0, 0, 0, .15), -.5rem 0 3rem rgba(0, 0, 0, .15) !default;

$box-shadow-up-1:             0 -.0625rem .125rem rgba(0, 0, 0, .15), 0 -.0625rem .25rem rgba(0, 0, 0, .15) !default;
$box-shadow-up-2:             0 -.125rem .25rem rgba(0, 0, 0, .15), 0 -.125rem .5rem rgba(0, 0, 0, .15) !default;
$box-shadow-up-3:             0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15) !default;
$box-shadow-up-4:             0 -.625rem 1.25rem rgba(0, 0, 0, .15), 0 -.5rem 1.25rem rgba(0, 0, 0, .15) !default;
$box-shadow-up-5:             0 -1.25rem 2.5rem rgba(0, 0, 0, .15), 0 -.5rem 3rem rgba(0, 0, 0, .15) !default;

$box-shadow-right-1:          .0625rem 0 .125rem rgba(0, 0, 0, .15), .0625rem 0 .25rem rgba(0, 0, 0, .15) !default;
$box-shadow-right-2:          .125rem 0 .25rem rgba(0, 0, 0, .15), .125rem 0 .5rem rgba(0, 0, 0, .15) !default;
$box-shadow-right-3:          .5rem 0 1rem rgba(0, 0, 0, .15), .25rem 0 .625rem rgba(0, 0, 0, .15) !default;
$box-shadow-right-4:          .625rem 0 1.25rem rgba(0, 0, 0, .15), .5rem 0 1.25rem rgba(0, 0, 0, .15) !default;
$box-shadow-right-5:          1.25rem 0 2.5rem rgba(0, 0, 0, .15), .5rem 0 3rem rgba(0, 0, 0, .15) !default;

$box-shadow-centered-1:       0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15) !default;
$box-shadow-centered-2:       0 0 .25rem rgba(0, 0, 0, .15), 0 0 .5rem rgba(0, 0, 0, .15) !default;
$box-shadow-centered-3:       0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15) !default;
$box-shadow-centered-4:       0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15) !default;
$box-shadow-centered-5:       0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15) !default;

@mixin pgn-box-shadow($level, $side) {
  @if $side == "down" {
    @if $level == 1 {
      box-shadow: $box-shadow-down-1;
    }

    @else if $level == 2 {
      box-shadow: $box-shadow-down-2;
    }

    @else if $level == 3 {
      box-shadow: $box-shadow-down-3;
    }

    @else if $level == 4 {
      box-shadow: $box-shadow-down-4;
    }

    @else if $level == 5 {
      box-shadow: $box-shadow-down-5;
    }

    @else {
      @error "Box-shadow level #{$level} does not exist";
    }
  }

  @if $side == "left" {
    @if $level == 1 {
      box-shadow: $box-shadow-left-1;
    }

    @else if $level == 2 {
      box-shadow: $box-shadow-left-2;
    }

    @else if $level == 3 {
      box-shadow: $box-shadow-left-3;
    }

    @else if $level == 4 {
      box-shadow: $box-shadow-left-4;
    }

    @else if $level == 5 {
      box-shadow: $box-shadow-left-5;
    }

    @else {
      @error "Box-shadow level #{$level} does not exist";
    }
  }

  @if $side == "up" {
    @if $level == 1 {
      box-shadow: $box-shadow-up-1;
    }

    @else if $level == 2 {
      box-shadow: $box-shadow-up-2;
    }

    @else if $level == 3 {
      box-shadow: $box-shadow-up-3;
    }

    @else if $level == 4 {
      box-shadow: $box-shadow-up-4;
    }

    @else if $level == 5 {
      box-shadow: $box-shadow-up-5;
    }

    @else {
      @error "Box-shadow level #{$level} does not exist";
    }
  }

  @if $side == "right" {
    @if $level == 1 {
      box-shadow: $box-shadow-right-1;
    }

    @else if $level == 2 {
      box-shadow: $box-shadow-right-2;
    }

    @else if $level == 3 {
      box-shadow: $box-shadow-right-3;
    }

    @else if $level == 4 {
      box-shadow: $box-shadow-right-4;
    }

    @else if $level == 5 {
      box-shadow: $box-shadow-right-5;
    }

    @else {
      @error "Box-shadow level #{$level} does not exist";
    }
  }

  @if $side == "centered" {
    @if $level == 1 {
      box-shadow: $box-shadow-centered-1;
    }

    @else if $level == 2 {
      box-shadow: $box-shadow-centered-2;
    }

    @else if $level == 3 {
      box-shadow: $box-shadow-centered-3;
    }

    @else if $level == 4 {
      box-shadow: $box-shadow-centered-4;
    }

    @else if $level == 5 {
      box-shadow: $box-shadow-centered-5;
    }

    @else {
      @error "Box-shadow level #{$level} does not exist";
    }
  }
}

$levels: (
  1,
  2,
  3,
  4,
  5
) !default;

$box-shadow-sides: (
  "down",
  "up",
  "right",
  "left",
  "centered"
) !default;

$box-shadow-sm:               0 .0625rem .125rem rgba($black, .2) !default;
$box-shadow:                  0 .125rem .25rem rgba($black, .3) !default;
$box-shadow-lg:               0 .25rem .5rem rgba($black, .3) !default;

$component-active-color:      $white !default;
$component-active-bg:         theme-color("primary") !default;

$caret-width:                 .3em !default;
$caret-vertical-align:        $caret-width * .85 !default;
$caret-spacing:               $caret-width * .85 !default;

$transition-base:             all .2s ease-in-out !default;
$transition-fade:             opacity .15s linear !default;
$transition-collapse:         height .35s ease !default;
$transition-collapse-width:   width .35s ease !default;

$embed-responsive-aspect-ratios: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$embed-responsive-aspect-ratios: join(
  (
    (21 9),
    (16 9),
    (4 3),
    (1 1),
  ),
  $embed-responsive-aspect-ratios
);

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

// stylelint-disable value-keyword-case
$font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "Segoe UI",
  Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
  "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-family-serif:           serif !default;
$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
  "Courier New", monospace !default;
$font-family-base:            $font-family-sans-serif !default;
// stylelint-enable value-keyword-case

$font-size-base:              1.125rem !default; // Assumes the browser default, typically `16px`
$font-size-lg:                $font-size-base * 1.25 !default;
$font-size-sm:                .875rem !default;
$font-size-xs:                .75rem !default;

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

$font-weight-base:            $font-weight-normal !default;
$line-height-base:            1.5556 !default;

$h1-font-size:                2.5rem !default;
$h2-font-size:                2rem !default;
$h3-font-size:                1.375rem !default;
$h4-font-size:                1.125rem !default;
$h5-font-size:                .875rem !default;
$h6-font-size:                .75rem !default;

$h1-mobile-font-size:         2.25rem !default;
$h2-mobile-font-size:         $h2-font-size !default;
$h3-mobile-font-size:         $h3-font-size !default;
$h4-mobile-font-size:         $h4-font-size !default;
$h5-mobile-font-size:         $h5-font-size !default;
$h6-mobile-font-size:         $h6-font-size !default;

$headings-margin-bottom:      calc($spacer / 2) !default;
$headings-font-family:        null !default;
$headings-font-weight:        $font-weight-bold !default;
$headings-line-height:        1.25 !default;
$headings-color:              $black !default;

$display1-size:               3.75rem !default;
$display2-size:               4.875rem !default;
$display3-size:               5.625rem !default;
$display4-size:               7.5rem !default;

$display-mobile-size:         3.25rem !default;

$display1-weight:             700 !default;
$display2-weight:             700 !default;
$display3-weight:             700 !default;
$display4-weight:             700 !default;

$display-line-height:         1 !default;
$display-mobile-line-height:  3.5rem !default;

$lead-font-size:              $font-size-base * 1.25 !default;
$lead-font-weight:            null !default;

$small-font-size:             87.5% !default;
$x-small-font-size:             75% !default;

$micro-font-size:        .688rem;
$micro-line-height:      .938rem;

$text-muted:                  theme-color("gray", "light-text") !default;

$blockquote-small-color:      theme-color("gray", "light-text") !default;
$blockquote-small-font-size:  $small-font-size !default;
$blockquote-font-size:        $font-size-base * 1.25 !default;

$hr-border-color:             rgba($black, .1) !default;
$hr-border-width:             $border-width !default;

$mark-padding:                .2em !default;

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

$list-inline-padding:         .5rem !default;

$mark-bg:                     #FFF243 !default;

$hr-margin-y:                 $spacer !default;

$label-margin-bottom:                   .5rem !default;

$table-cell-padding:          .75rem !default;
$table-cell-padding-sm:       .3rem !default;
$table-caption-color:         $text-muted !default;
$table-border-color:          $border-color !default;
$table-th-font-weight:        null !default;

// Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.

$zindex-dropdown:                   1000 !default;
$zindex-sticky:                     1020 !default;
$zindex-fixed:                      1030 !default;
$zindex-sheet-backdrop:             1031 !default;
$zindex-sheet:                      1032 !default;
$zindex-modal-backdrop:             1040 !default;
$zindex-modal:                      1050 !default;
$zindex-popover:                    1060 !default;
$zindex-tooltip:                    1070 !default;

// Buttons + Forms
//
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.

$input-btn-padding-y:         .5625rem !default;
$input-btn-padding-x:         1rem !default;
$input-btn-font-family:       null !default;
$input-btn-font-size:         1.125rem !default;
$input-btn-line-height:       1.3333 !default;

$input-btn-focus-width:       1px !default;
$input-btn-focus-color:       $component-active-bg !default;
$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color !default;

$input-btn-padding-y-sm:         .4375rem !default;
$input-btn-padding-x-sm:         .75rem !default;
$input-btn-font-size-sm:         .875rem !default;
$input-btn-line-height-sm:       1.4286 !default;

$input-btn-padding-y-lg:      .6875rem !default;
$input-btn-padding-x-lg:      1.25rem !default;
$input-btn-font-size-lg:      1.325rem !default;
$input-btn-line-height-lg:    $line-height-lg !default;

$input-btn-border-width:      $border-width !default;

// Spinners

// $spinner-width:           2rem !default;
// $spinner-height:          $spinner-width !default;
$spinner-vertical-align:      -.125em !default;

// $spinner-border-width:    .25em !default;

// $spinner-width-sm:        1rem !default;
// $spinner-height-sm:       $spinner-width-sm !default;
// $spinner-border-width-sm: .2em !default;

// Utilities

$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;
$overflows: auto, hidden !default;
$positions: static, relative, absolute, fixed, sticky !default;
$user-selects: all, auto, none !default;

// Printing

$print-page-size:                   a3 !default;
$print-body-min-width:              map-get($grid-breakpoints, "lg") !default;

// List group

$list-group-color:                  null !default;
$list-group-bg:                     $white !default;
$list-group-border-color:           rgba($black, .125) !default;
$list-group-border-width:           $border-width !default;
$list-group-border-radius:          $border-radius !default;

$list-group-item-padding-y:         .75rem !default;
$list-group-item-padding-x:         1.25rem !default;

$list-group-hover-bg:               $gray-100 !default;
$list-group-active-color:           $component-active-color !default;
$list-group-active-bg:              $component-active-bg !default;
$list-group-active-border-color:    $list-group-active-bg !default;

$list-group-disabled-color:         $gray-600 !default;
$list-group-disabled-bg:            $list-group-bg !default;

$list-group-action-color:           $gray-700 !default;
$list-group-action-hover-color:     $list-group-action-color !default;

$list-group-action-active-color:    $body-color !default;
$list-group-action-active-bg:       $gray-200 !default;