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

//
// Bootstrap overrides ===================================
//

// Color system

$white: #FFFFFF !default;
$gray-100: #F9FBFD !default;
$gray-200: #F1F4F8 !default;
$gray-300: #D9E2EF !default;
$gray-400: #C6D3E6 !default;
$gray-500: #ABBCD5 !default;
$gray-600: #869AB8 !default;
$gray-700: #506690 !default;
$gray-800: #384C74 !default;
$gray-900: #1B2A4E !default;
$black: #161C2D !default;

$primary: #335EEA !default;
$secondary: $gray-700 !default;
$primary-desat: #6C8AEC !default; // NEW
$success: #42BA96 !default;
$info: #7C69EF !default;
$warning: #FAD776 !default;
$danger: #DF4759 !default;
$light: $gray-100 !default;
$dark: $gray-900 !default;

/* beautify ignore:start */
$theme-colors: (
  "primary": $primary,
  "secondary": $secondary,
  "success": $success,
  "info": $info,
  "warning": $warning,
  "danger": $danger,
  "light": $light,
  "dark": $dark,
  "primary-desat": $primary-desat, // NEW
  "black": $black, // NEW
  "white": $white // NEW
);
/* beautify ignore:end */

// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
$min-contrast-ratio: 1.75 !default;

// Customize the light and dark text colors for use in our YIQ color contrast function.
$color-contrast-dark: $gray-900 !default;
$color-contrast-light: $white !default;


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

$enable-shadows: true !default;
$enable-smooth-scroll: false !default;
$enable-rfs: false !default;
$enable-validation-icons: false !default;
$enable-negative-margins: 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;

/* beautify ignore:start */
$spacers: map-merge(
  (
    0: 0,
    1: ($spacer * .25), // 4px
    2: ($spacer * .5), // 8px
    3: ($spacer * .75), // 12px
    4: $spacer, // 16px
    5: ($spacer * 1.5), // 24px
    6: ($spacer * 2), // 32px
    7: ($spacer * 2.5), // 40px
    8: ($spacer * 3), // 48px
    9: ($spacer * 4), // 64px
    10: ($spacer * 5), // 80px
    11: ($spacer * 6), // 96px
    12: ($spacer * 8), // 128px
    13: ($spacer * 10), // 160px 
    14: ($spacer * 12), // 192px
    15: ($spacer * 16), // 256px                                                     
    16: ($spacer * 25), // 400px
  ),
  $spacers
);
/* beautify ignore:end */


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

$body-bg: $white !default;
$body-color: $black !default;


// Links
//
// Style anchor elements.

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


// Paragraphs
//
// Style p element.

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


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

/* beautify ignore:start */
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1040px
) !default;
/* beautify ignore:end */


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

$grid-gutter-width: 2.5rem !default;


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

$border-width: 1px !default;
$border-color: $gray-200 !default;

$border-radius-sm: .25rem !default;
$border-radius: 0.375rem !default;
$border-radius-lg: 0.5rem !default;
$border-radius-xl: 1rem !default; // NEW
$border-radius-pill: 50rem !default;

$box-shadow: 0 0.5rem 1.5rem fade-out($black, .9) !default;
$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
$box-shadow-lg: 0 1.5rem 4rem fade-out($black, .9) !default;

$box-shadow-light: 0 0.5rem 1.5rem fade-out($black, .95) !default;
$box-shadow-light-lg: 0 1.5rem 4rem fade-out($black, .95) !default;

$box-shadow-dark: 0 0.5rem 1.5rem fade-out($black, .85) !default;
$box-shadow-dark-lg: 0 1.5rem 4rem fade-out($black, .85) !default;

$box-shadow-lift: 0 1rem 2.5rem fade-out($black, .9), 0 .5rem 1rem -.75rem fade-out($black, .9) !default;
$box-shadow-lift-lg: 0 2rem 5rem fade-out($black, .9), 0 .5rem 1rem -.75rem fade-out($black, .95) !default;

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


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

$font-family-base: 'HKGroteskPro', serif !default;

$font-size-base: 1.0625rem !default; // 17px
$font-size-xs: 0.75rem !default; // 12px NEW
$font-size-sm: 0.9375rem !default; // 15px
$font-size-lg: 1.1875rem !default; // 19px

$font-weight-normal: 400 !default;
$font-weight-bold: 600 !default;
$font-weight-bolder: 700 !default;

$line-height-base: 1.6 !default;
$line-height-sm: 1.3 !default;
$line-height-lg: 1.3 !default;

$h1-font-size: 2.3125rem !default; // 37px
$h2-font-size: 1.9375rem !default; // 31px
$h3-font-size: 1.3125rem !default; // 21px
$h4-font-size: 1.1875rem !default; // 19px
$h5-font-size: 1.0625rem !default; // 17px
$h6-font-size: 0.75rem !default; // 12px

/* beautify ignore:start */
$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,
  sm: $font-size-sm,
  lg: $font-size-lg
) !default;
/* beautify ignore:end */

$headings-margin-bottom: .5rem !default;
$headings-font-weight: $font-weight-normal !default;
$headings-line-height: 1 !default;

/* beautify ignore:start */
$display-font-sizes: (
  1: 4.375rem, // 70px
  2: 3.8125rem, // 61px
  3: 3rem, // 48px
  4: 2.6875rem // 43px
) !default;
/* beautify ignore:end */

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

$lead-font-size: 1.3125rem !default;
$lead-font-weight: $font-weight-normal !default;

$small-font-size: 88.2% !default;

$text-muted: $gray-600 !default;

$blockquote-font-size: 1.25rem !default;
$blockquote-footer-color: $gray-600 !default;
$blockquote-footer-font-size: $font-size-xs !default;

$hr-color: $border-color !default;
$hr-opacity: 1 !default;


// Tables
//
// Customizes the `.table` component with basic values, each used across all table variations.

$table-cell-padding-y: 1.5rem !default;
$table-cell-padding-x: 2rem !default;

$table-bg: $white !default;

$table-striped-bg: $gray-100 !default;

$table-active-bg: $gray-100 !default;

$table-hover-bg: $gray-100 !default;

$table-border-color: $border-color !default;

$table-group-seperator-color: inherit !default;

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

/* beautify ignore:start */
$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": $gray-800,
) !default;
/* beautify ignore:end */

$table-head-bg: $table-bg !default; // NEW
$table-head-color: $body-color !default; // NEW


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

$input-btn-padding-y: .8125rem !default;
$input-btn-padding-x: 1.25rem !default;
$input-btn-font-size: $font-size-base !default;
$input-btn-line-height: $line-height-base !default;

$input-btn-focus-width: 0 !default;
$input-btn-focus-color: transparent !default;
$input-btn-focus-box-shadow: none !default;

$input-btn-padding-y-sm: .5625rem !default;
$input-btn-padding-x-sm: 1rem !default;
$input-btn-font-size-sm: $font-size-base !default;
$input-btn-line-height-sm: $line-height-base !default; // NEW

$input-btn-padding-y-lg: 1.122rem !default;
$input-btn-padding-x-lg: 1.5rem !default;
$input-btn-font-size-lg: $font-size-base !default;
$input-btn-line-height-lg: $line-height-base !default; // NEW


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

$btn-font-weight: $font-weight-bold !default;
$btn-box-shadow: none !default;
$btn-active-box-shadow: none !default;

$btn-border-radius-sm: $border-radius !default;
$btn-border-radius-lg: $border-radius !default;


// Forms

$input-bg: $white !default;

$input-color: $body-color !default;
$input-border-color: $border-color !default;
$input-border-width: $border-width !default;
$input-box-shadow: none !default;

$input-border-radius-sm: $border-radius !default;
$input-border-radius-lg: $border-radius !default;

$input-focus-border-color: $primary !default;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;

$input-placeholder-color: $text-muted !default;

$form-check-input-active-filter: none !default;

$form-check-padding-start: 1.5rem !default;
$form-check-label-cursor: pointer !default;

$form-check-input-bg: $gray-300 !default;
$form-check-input-border: transparent !default;
$form-check-input-border-radius: $border-radius !default;
$form-check-input-focus-border: $form-check-input-border !default;
$form-check-input-focus-box-shadow: none !default;

$form-check-input-checked-color: $component-active-color !default;
$form-check-input-checked-bg-color: $component-active-bg !default;
$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>") !default;
$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;

$form-check-input-indeterminate-color: $component-active-color !default;

$form-switch-color: $white !default;
$form-switch-width: 2.5rem !default;
$form-switch-padding-start: $form-switch-width + .5rem !default;
$form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;

$form-switch-focus-color: $form-switch-color !default;
$form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;

$form-switch-checked-color: $form-switch-color !default;
$form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;

$input-group-addon-color: $input-placeholder-color;
$input-group-addon-bg: $input-bg !default;

$form-select-indicator-padding: 1.25rem !default;
$form-select-bg-size: 1em 1em !default;
$form-select-indicator-color: $gray-400 !default;
$form-select-indicator: url("data:image/svg+xml,<svg viewBox='0 0 9 5' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 1L4.25 4.25L7.5 1' stroke='#{$form-select-indicator-color}' stroke-width='1.08333' stroke-linecap='round' stroke-linejoin='round'/></svg>") !default;

$form-select-box-shadow: $input-box-shadow !default;

$form-select-focus-border-color: $input-focus-border-color !default;
$form-select-focus-box-shadow: $input-focus-box-shadow !default;

$form-file-button-bg: $light !default;

$form-floating-label-opacity: 1 !default;
$form-floating-label-transform: translateY(-.5rem) !default;

$form-group-margin-bottom: 1rem !default; // NEW


// Navbar

$navbar-padding-y: 1.25rem !default;
$navbar-padding-x: 0 !default;

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

$navbar-brand-font-size: 1.5rem !default;
$navbar-brand-margin-end: 0 !default;

$navbar-dark-color: $white !default;
$navbar-dark-hover-color: $white !default;
$navbar-dark-active-color: $white !default;
$navbar-dark-toggler-border-color: transparent !default;

$navbar-light-color: $gray-700 !default;
$navbar-light-hover-color: $primary !default;
$navbar-light-active-color: $primary !default;
$navbar-light-toggler-border-color: transparent !default;


// Dropdowns
//
// Dropdown menu container and contents.

$dropdown-min-width: 14rem !default;
$dropdown-padding-y: 1.625rem !default;
$dropdown-spacer: 0 !default;
$dropdown-font-size: $font-size-sm !default;
$dropdown-border-width: 0px !default;
$dropdown-box-shadow: $box-shadow !default;

$dropdown-link-color: $gray-700 !default;
$dropdown-link-hover-color: $primary !default;
$dropdown-link-hover-bg: none !default;

$dropdown-link-active-color: $primary !default;
$dropdown-link-active-bg: none !default;

$dropdown-item-padding-y: 0 !default;
$dropdown-item-padding-x: 1.75rem !default;

$dropdown-header-color: $primary !default;


// Pagination

$pagination-padding-y: $input-btn-padding-y !default;
$pagination-padding-x: $input-btn-padding-x !default;
$pagination-padding-y-sm: $input-btn-padding-y-sm !default;
$pagination-padding-x-sm: $input-btn-padding-x-sm !default;
$pagination-padding-y-lg: $input-btn-padding-y-lg !default;
$pagination-padding-x-lg: $input-btn-padding-x-lg !default;

$pagination-line-height: $line-height-base !default; // NEW


// Cards

$card-spacer-y: 2rem !default;
$card-spacer-x: 2rem !default;
$card-title-spacer-y: 1.5rem !default;
$card-border-width: 0px !default;
$card-border-color: $border-color !default;
$card-cap-padding-y: 1.5rem !default;


// Accordion

$accordion-padding-y: 1.5rem !default;
$accordion-padding-x: 2rem !default;
$accordion-border-color: $border-color !default;

$accordion-button-active-bg: $body-bg !default;
$accordion-button-active-color: $body-color !default;
$accordion-button-focus-box-shadow: none !default;

$accordion-icon-width: .85rem !default;
$accordion-icon-color: $text-muted !default;
$accordion-icon-active-color: $accordion-icon-color !default;


// Popovers

$popover-max-width: 380px !default;
$popover-border-color: transparent !default;
$popover-border-radius: $border-radius !default;
$popover-box-shadow: $box-shadow-lg !default;

$popover-header-bg: transparent !default;
$popover-header-padding-y: 1.5rem !default;
$popover-header-padding-x: 2rem !default;

$popover-body-color: $text-muted !default;
$popover-body-padding-y: 1.5rem !default;
$popover-body-padding-x: 2rem !default;

$popover-arrow-width: 1.25rem !default;
$popover-arrow-height: 0.625rem !default;


// Toasts

$toast-padding-y: .5rem !default;


// Badges

$badge-padding-y: .25rem !default;
$badge-padding-x: .75rem !default;

$border-radius-pill-padding-x: $badge-padding-x !default; // NEW


// Modals

$modal-inner-padding: 2.5rem !default;

$modal-backdrop-opacity: .8 !default;


// Alerts

$alert-padding-y: .75rem !default;
$alert-padding-x: 1.25rem !default;

$alert-bg-scale: 0% !default;
$alert-border-scale: 0% !default;
$alert-color-scale: 60% !default;


// List group

$list-group-border-color: $border-color !default;
$list-group-item-padding-y: 1.5rem !default;
$list-group-item-padding-x: 2rem !default;


// Figures

$figure-caption-font-size: $small-font-size !default;
$figure-caption-color: $text-muted !default;


// Breadcrumbs

$breadcrumb-padding-y: .75rem !default;
$breadcrumb-padding-x: 0 !default;
$breadcrumb-margin-bottom: 0 !default;
$breadcrumb-bg: transparent !default;
$breadcrumb-divider-color: $gray-700 !default;
$breadcrumb-active-color: $gray-700 !default;
$breadcrumb-border-radius: 0 !default;


// Close

$btn-close-width: .5em !default;
$btn-close-color: $text-muted !default;
$btn-close-text-shadow: none !default;


// Code

$code-font-size: 0.8125rem !default;


//
// Theme ===================================
//

// Paths

$path-to-img: "../img" !default;
$path-to-fonts: "../fonts" !default;


// Typography

$headings-letter-spacing: -.01em !default;

$h1-line-height: 1.3 !default;
$h2-line-height: 1.35 !default;
$h3-line-height: 1.4 !default;
$h4-line-height: 1.45 !default;
$h5-line-height: 1.5 !default;
$h6-line-height: 1.55 !default;

$display-line-height: 1.2 !default;
$display-letter-spacing: -.02em !default;

$h1-font-size-md: 1.875rem !default; // 30px
$h2-font-size-md: 1.5rem !default; // 24px
$h3-font-size-md: 1.125rem !default; // 18px
$h4-font-size-md: 1.0625rem !default; // 17px

$display1-font-size-md: 3.125rem !default; // 48px
$display2-font-size-md: 2.5rem !default; // 38px
$display3-font-size-md: 2.25rem !default; // 36px
$display4-font-size-md: 2rem !default; // 32px

$font-size-lg-md: 1.0625rem !default; // 17px
$lead-font-size-md: 1.1875rem !default; // 19px

$blockquote-small-font-weight: $font-weight-bold !default;
$blockquote-small-letter-spacing: .07em !default;

$letter-spacing-lg: .08em !default;


// Buttons + Forms

$input-btn-padding-y-xs: .25rem !default;
$input-btn-padding-x-xs: .625rem !default;
$input-btn-font-size-xs: $font-size-sm !default;
$input-btn-line-height-xs: $line-height-base !default;


// Buttons

$btn-soft-bg-opacity: .1 !default;

$btn-line-height-sm: $input-btn-line-height-sm !default;
$btn-line-height-lg: $input-btn-line-height-lg !default;

$btn-padding-y-xs: $input-btn-padding-y-xs !default;
$btn-padding-x-xs: $input-btn-padding-x-xs !default;


// Forms

$input-line-height-sm: $input-btn-line-height-sm !default;
$input-line-height-lg: $input-btn-line-height-lg !default;

$input-padding-y-xs: $input-btn-padding-y-xs !default;
$input-padding-x-xs: $input-btn-padding-x-xs !default;
$input-font-size-xs: $input-btn-font-size-xs !default;
$input-line-height-xs: $input-btn-line-height-xs !default;
$input-height-xs: calc(#{$input-btn-padding-y-xs * 2} + #{$input-btn-font-size-xs} * #{$input-line-height-xs} + #{$input-border-width * 2});

$form-check-input-bg-dark: rgba($white, .2) !default;
$form-check-input-checked-bg-color-dark: $white !default;

$form-switch-min-height: 1.375rem !default;

$form-switch-color-dark: $white !default;
$form-switch-focus-color-dark: $white !default;
$form-switch-checked-color-dark: $primary !default;

$form-switch-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
$form-switch-focus-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color-dark}'/></svg>") !default;
$form-switch-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color-dark}'/></svg>") !default;

$form-select-padding-y-xs: $input-padding-y-xs !default;
$form-select-padding-x-xs: $input-padding-x-xs !default;
$form-select-font-size-xs: $input-font-size-xs !default;
$form-select-line-height-xs: $input-line-height-xs !default;
$form-select-height-xs: $input-height-xs !default;
$form-select-indicator-padding-xs: .625rem !default;
$form-select-bg-size-xs: .75em !default;

$form-floating-label-font-size: $font-size-xs !default;
$form-floating-label-color: $input-placeholder-color !default;


// Navbar

$navbar-brand-font-weight: $font-weight-bold !default;

$navbar-nav-link-font-weight: $font-weight-bold !default;

$navbar-nav-item-spacing: 1.5rem !default;

$navbar-dropdown-toggle-margin-bottom: 1.5rem !default;


// Dropdowns

$dropdown-item-padding-x-lg: 2.5rem !default;
$dropdown-item-spacing-y: .45rem !default;

$dropdown-padding-x: $dropdown-item-padding-x !default;
$dropdown-padding-x-xs: 1.25rem !default;
$dropdown-padding-y-xs: 1rem !default;
$dropdown-padding-x-lg: $dropdown-item-padding-x-lg !default;
$dropdown-padding-y-lg: 2.375rem !default;

$dropdown-min-width-xs: 0 !default;
$dropdown-min-width-md: 22rem !default;
$dropdown-min-width-lg: 35rem !default;
$dropdown-min-width-xl: 42rem !default;


// Card

$card-meta-spacer-y: 1.5rem !default;

$card-row-spacer-y: 4rem !default;
$card-row-spacer-x: 2.5rem !default;


// Popover

$popover-header-font-size: $h6-font-size !default;
$popover-header-color: $primary !default;


// Badges

$badge-padding-y-lg: .7em !default;
$badge-padding-x-lg: 1.15em !default;

$badge-soft-bg-opacity: .1 !default;


// Breadcrumbs

$breadcrumb-font-size: $font-size-sm !default;


// Code

$code-line-height: 1.35 !default;


// Avatar

$avatar-size-base: 1.875rem !default;
$avatar-size-xs: 1rem !default;
$avatar-size-sm: 1.5rem !default;
$avatar-size-lg: 2.25rem !default;
$avatar-size-xl: 4rem !default;
$avatar-size-xxl: 5rem !default;

$avatar-title-bg: $gray-500 !default;
$avatar-title-color: $white !default;


// Icons

$icon-size-base: 3rem !default;
$icon-size-xs: 1.5rem !default;
$icon-size-sm: 2.25rem !default;
$icon-size-lg: 4rem !default;
$icon-size-xl: 5rem !default;

$icon-circle-size: 4.1875rem !default;
$icon-circle-font-size: 1.875rem !default;


// Images

$img-skewed-rotate-y: 35deg !default;
$img-skewed-rotate-x: 15deg !default;


// List

$list-item-spacing-y: .35rem;

$list-link-font-size: $font-size-sm !default;
$list-link-color: $gray-700 !default;
$list-link-hover-color: $primary !default;


// Screenshot

$screenshot-border-radius: 0.625rem !default;
$screenshot-box-shadow: 25px 60px 125px -25px fade-out($gray-700, .9), 16px 40px 75px -40px fade-out(black, .8) !default;



// 
// Utilities =====================================
//

/* beautify ignore:start */
$utilities: (
  "position": (
    responsive: true,
    property: position,
    values: static relative absolute fixed sticky
  ),
  "top": (
    property: top,
    values: (
      0: 0,
    )
  ),
  "right": (
    property: right,
    values: (
      0: 0,
    )
  ),
  "bottom": (
    property: bottom,
    values: (
      0: 0,
    )
  ),
  "left": (
    property: left,
    values: (
      0: 0,
    )
  ),
  "width": (
    responsive: true,
    property: width,
    class: w,
    values: (
      25: 25%,
      50: 50%,
      75: 75%,
      100: 100%,
      110: 110%,
      120: 120%,
      130: 130%,
      140: 140%,
      150: 150%,
      auto: auto
    )
  ),
  "max-width": (
    responsive: true,
    property: max-width,
    class: mw,
    values: (
      25: 25%,
      50: 50%,
      75: 75%,
      100: 100%,
      110: 110%,
      120: 120%,
      130: 130%,
      140: 140%,
      150: 150%
    )
  ),
  "viewport-width": (
    responsive: true,
    property: width,
    class: vw,
    values: (
      25: 25vw,
      50: 50vw,
      75: 75vw,
      100: 100vw,
      110: 110vw,
      120: 120vw,
      130: 130vw,
      140: 140vw,
      150: 150vw,
    )
  ),
  "height": (
    responsive: true,
    property: height,
    class: h,
    values: (
      25: 25%,
      50: 50%,
      75: 75%,
      100: 100%,
      110: 110%,
      120: 120%,
      130: 130%,
      140: 140%,
      150: 150%,
      auto: auto
    )
  ),
  "viewport-height": (
    responsive: true,
    property: height,
    class: vh,
    values: (
      25: 25vh,
      50: 50vh,
      75: 75vh,
      100: 100vh,
      110: 110vh,
      120: 120vh,
      130: 130vh,
      140: 140vh,
      150: 150vh,
    )
  ),
  "background-color": (
    property: background-color,
    class: bg,
    values: map-merge(
      $theme-colors,
      (
        "white-20": rgba($white, .2),
        "gray-200": $gray-200,
        "gray-300": $gray-300,
        "gray-800": $gray-800,
        "gray-900": $gray-900,
        "gray-900-50": rgba($gray-900, .5)
      )
    )
  ),
  "rounded": (
    property: border-radius,
    class: rounded,
    values: (
      null: $border-radius,
      0: 0,
      1: $border-radius-sm,
      2: $border-radius,
      3: $border-radius-lg,
      4: $border-radius-xl,
      circle: 50%,
      pill: $border-radius-pill
    )
  ),
  "border": (
    responsive: true,
    property: border,
    values: (
      null: $border-width solid $border-color,
      0: 0,
    )
  ),
  "border-top": (
    responsive: true,
    property: border-top,
    values: (
      null: $border-width solid $border-color,
      0: 0,
    )
  ),
  "border-end": (
    responsive: true,
    property: border-right,
    values: (
      null: $border-width solid $border-color,
      0: 0,
    )
  ),
  "border-bottom": (
    responsive: true,
    property: border-bottom,
    values: (
      null: $border-width solid $border-color,
      0: 0,
    )
  ),
  "border-start": (
    responsive: true,
    property: border-left,
    values: (
      null: $border-width solid $border-color,
      0: 0,
    )
  ),
  "border-color": (
    property: border-color,
    class: border,
    values: map-merge(
      $theme-colors,
      (
        "white-10": rgba($white, .1),
        "white-20": rgba($white, .2),
        "gray-300": $gray-300,
        "gray-800": $gray-800,
        "gray-800-50": rgba($gray-800, .5),
        "gray-900-50": rgba($gray-900, .5)
      )
    )
  ),
  "shadow": (
    property: box-shadow,
    class: shadow,
    values: (
      null: $box-shadow,
      "sm": $box-shadow-sm,
      "lg": $box-shadow-lg,
      "light": $box-shadow-light,
      "dark": $box-shadow-dark,
      "light-lg": $box-shadow-light-lg,
      "dark-lg": $box-shadow-dark-lg,
      "lift": $box-shadow-lift,
      "none": none
    )
  ),
  "color": (
    property: color,
    class: text,
    values: map-merge(
      $theme-colors,
      (
        "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,
        "white": $white,
        "body": $body-color,
        "muted": $text-muted,
        "muted-80": rgba($text-muted, .8),
        "black-50": rgba($black, .5),
        "white-50": rgba($white, .5),
        "white-70": rgba($white, .7),
        "white-75": rgba($white, .75),
        "white-80": rgba($white, .8),
        "reset": inherit,
      )
    )
  ),
  "letter-spacing": (
    property: letter-spacing,
    values: (
      lg: $letter-spacing-lg
    )
  ),
  "opacity": (
    property: opacity,
    values: (
      0: 0,
      1: 1
    )
  ),
);
/* beautify ignore:end */