// --------------------------------------------
// GLOBAL BOOLEANS & SETTINGS -----------------
// --------------------------------------------
$enable-reset         : true !default;
$enable-shadow-classes: true !default;
$enable-color-classes : true !default;
$enable-spacer-classes: true !default;
$enable-border-classes: true !default;
$enable-radius-classes: true !default;
$enable-float-classes : true !default;
$enable-flex-classes  : true !default;
$enable-hidden-classes: true !default;
$enable-cursor-classes: true !default;
$enable-center-classes: true !default;
$enable-sideNav       : true !default;
$white-label          : false !default;

// Defining the high-level stuff used throughout (we try to use these as much as possible below)
$global-text-color          : var(--cc-global-text-color) !default;
$global-text-color-light    : var(--cc-global-text-color-light) !default;
$global-text-color-dark     : var(--cc-global-text-color-dark) !default;
$global-text-color-lighter  : var(--cc-global-text-color-lighter) !default;
$global-bg-disabled         : var(--cc-global-bg-disabled) !default;
$global-backdrop-dark       : var(--cc-global-backdrop-dark) !default;
$global-border-color        : var(--cc-global-border-color) !default;
$global-border-color-light  : var(--cc-global-border-color-light) !default;
$global-border-color-dark   : var(--cc-global-border-color-dark) !default;

$global-radius              : $radius-sm !default;
$global-border-size         : 1px solid !default;
$global-sidebar-width       : 256px !default;
$global-sidebar-width-folded: 48px !default;
$global-footer-height       : 48px !default;
$global-footer-height-open  : 56px !default;
$global-header-height       : 48px !default;

// Global sizes are sizes based on our 8px grid established in util
// Used by avatars, badges, buttons, checkboxes, forms,
// switches, tabs, nav, media, pagination
// !CHANGE CAREFULLY!
$global-size-xs: $global-px-grid * 2 !default; // 16px
$global-size-sm: $global-px-grid * 3 !default; // 24px
$global-size-md: $global-px-grid * 4 !default; // 32px
$global-size-lg: $global-px-grid * 5 !default; // 40px
$global-size-xl: $global-px-grid * 6 !default; // 48px
// !CHANGE CAREFULLY!


// --------------------------------------------
// TYPOGRAPHY ---------------------------------
// --------------------------------------------
/* stylelint-disable */
$font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !default;
$font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
$font-link-style: underline !default;
$font-link-style-hover: underline !default;
$font-link-color          : var(--cc-font-link-color) !default;
$font-link-color-hover    : var(--cc-font-link-color-hover) !default;
$font-link-color-active   : var(--cc-font-link-color-active) !default;

// These sizes are available as vars but looped for classes below
$font-size-0    : 10px !default;
$font-size-1    : 11px !default;
$font-size-2    : 12px !default;
$font-size-3    : 14px !default;
$font-size-4    : 16px !default;
$font-size-5    : 18px !default;
$font-size-6    : 20px !default;
$font-size-7    : 24px !default;
$font-size-8    : 36px !default;

$line-height-xs : 16px !default;
$line-height-sm : 24px !default;
$line-height-md : 32px !default;
$line-height-lg : 40px !default;

// Only applies if $enable-reset is true
$body-font-size : $font-size-4 !default;
$body-font-color: var(--cc-body-font-color) !default;

// Set the defaults for .c-text-{{size}}.
// This map is looped - adding key/value pairs will generate more classes
$font-body: () !default;
$font-body: map-merge(
  (
    "xs": (
      "font-size": $font-size-0,
      "line-height": $line-height-xs
    ),
    "sm": (
      "font-size": $font-size-1,
      "line-height": $line-height-xs
    ),
    "md": (
      "font-size": $font-size-2,
      "line-height": $line-height-xs
    ),
    "lg": (
      "font-size": $font-size-3,
      "line-height": $line-height-sm
    ),
    "xl": (
      "font-size": $font-size-4,
      "line-height": $line-height-sm
    ),
    "xxl": (
      "font-size": $font-size-5,
      "line-height": $line-height-sm
    ),
  ),
  $font-body
);


// Set the defaults for .c-header-{{size}}.
// This map is looped - adding key/value pairs will generate more classes
$font-header: () !default;
$font-header: map-merge(
  (
    "xs": (
      "font-size": $font-size-2,
      "line-height": $line-height-xs
    ),
    "sm": (
      "font-size": $font-size-3,
      "line-height": $line-height-sm
    ),
    "md": (
      "font-size": $font-size-4,
      "line-height": $line-height-sm
    ),
    "lg": (
      "font-size": $font-size-6,
      "line-height": $line-height-sm
    ),
    "xl": (
      "font-size": $font-size-7,
      "line-height": $line-height-md
    ),
    "xxl": (
      "font-size": $font-size-8,
      "line-height": $line-height-lg
    ),
  ),
  $font-header
);


// --------------------------------------------
// ALERTS & TOASTS ----------------------------
// --------------------------------------------
$alert-font             : $font-family !default;
$alert-radius           : $global-radius !default;
$alert-border           : $global-border-size !default;
$alert-padding          : $space-sm !default;
$alert-shadows          : $shadow-lg !default;
$alert-top-padding      : $space-md !default;
$alert-font-size        : $font-size-2 !default;
$alert-margin           : 0 0 $space-md 0 !default;
$alert-icon-font-size   : $font-size-2 !default;
$alert-top-icon-size    : $font-size-4 !default;
$alert-line-height      : $line-height-xs !default;
$alert-close-font-size  : $font-size-2 !default;
$alert-title-font-size  : $font-size-2 !default;
$alert-font-weight      : $font-weight-normal !default;
$alert-title-font-weight: $font-weight-bold !default;
$alert-title-line-height: $line-height-sm - 5 !default;

$alert-color            : var(--cc-alert-color) !default;
$alert-icon-color       : var(--cc-alert-icon-color) !default;
$alert-background       : var(--cc-alert-background) !default;
$alert-primary-bg       : var(--cc-alert-primary-bg) !default;
$alert-primary-color    : var(--cc-alert-primary-color) !default;
$alert-success-bg       : var(--cc-alert-success-bg) !default;
$alert-success-color    : var(--cc-alert-success-color) !default;
$alert-warning-bg       : var(--cc-alert-warning-bg) !default;
$alert-warning-color    : var(--cc-alert-warning-color) !default;
$alert-danger-bg        : var(--cc-alert-danger-bg) !default;
$alert-danger-color     : var(--cc-alert-danger-color) !default;

// Set the default styles for alerts - .c-alert-{{color}}.
// This map is looped - adding key/value pairs will generate more classes
// this maps to name, bg-color, text/border color
$alert-colors: () !default;
$alert-colors: map-merge(
  (
    "primary": (
      "color": $alert-primary-color,
      "bg": $alert-primary-bg
    ),
    "success": (
      "color": $alert-success-color,
      "bg": $alert-success-bg
    ),
    "warning": (
      "color": $alert-warning-color,
      "bg": $alert-warning-bg
    ),
    "danger": (
      "color": $alert-danger-color,
      "bg": $alert-danger-bg
    ),
  ),
  $alert-colors
);


// --------------------------------------------
// Action Panel -------------------------------
// --------------------------------------------
$action-panel-padding-v              : $space-md - $space-xs !default;
$action-panel-padding-h              : $space-md !default;
$action-panel-header-font-size       : $font-size-3 !default;
$action-panel-header-font-weight     : $font-weight-bold !default;
$action-panel-header-line-height     : $line-height-sm !default;
$action-panel-title-font-size        : $font-size-4 !default;
$action-panel-title-font-weight      : $font-weight-bold !default;
$action-panel-subtitle-line-height   : $font-size-2 !default;
$action-panel-subtitle-font-size     : $font-size-2 !default;
$action-panel-footer-font-size       : $font-size-2 !default;
$action-panel-footer-line-weight     : $font-size-4 !default;
$action-panel-zindex                 : $z-action-panel !default;
$action-panel-width                  : 320px !default;
$action-panel-transition             : 0.3s ease !default;
$action-panel-shadow                 : $shadow-lg !default;

$action-panel-header-bg              : var(--cc-action-panel-header-bg) !default;
$action-panel-footer-bg              : var(--cc-action-panel-footer-bg) !default;
$action-panel-backdrop               : var(--cc-action-panel-backdrop) !default;
$action-panel-border                 : var(--cc-action-panel-border) !default;
$action-panel-header-color           : var(--cc-action-panel-header-color) !default;
$action-panel-header-icon-color      : var(--cc-action-panel-header-icon-color) !default;
$action-panel-header-icon-hover-color: var(--cc-action-panel-header-icon-hover-color) !default;
$action-panel-footer-color           : var(--cc-action-panel-footer-color) !default;
$action-panel-footer-hover-color     : var(--cc-action-panel-footer-hover-color) !default;
$action-panel-bg                     : var(--cc-action-panel-bg) !default;

// Set the default sizes for action panels - .c-action-panel-lg.
// This map is looped - adding key/value pairs will generate more classes
// this maps to name, width
$action-panel-sizes: () !default;
$action-panel-sizes: map-merge(
  (
    lg: 400px
  ),
  $action-panel-sizes
);


// --------------------------------------------
// Avatars ------------------------------------
// --------------------------------------------
$enable-extended-avatar-colors: true !default;
$avatar-font-family           : $font-family !default;
$avatar-default-size          : $global-size-md !default;
$avatar-img-border            : none !default;
$avatar-line-height           : normal !default;
$avatar-group-spacing         : $space-xs !default;
$avatar-border-radius         : $radius-pill !default;
$avatar-font-size             : $font-size-2 !default;
$avatar-font-weight           : $font-weight-semibold !default;
$avatar-group-transition      : 0.35s cubic-bezier(0, 1.22, .66, 1.39) !default;


// Set the default sizes for avatars - .c-avatar-{{size}}.
// This map is looped - adding key/value pairs will generate more classes
// this maps to name, size, font-size
$avatar-sizes: () !default;
$avatar-sizes: map-merge(
  (
    "xs": (
      "size": $global-size-xs,
      "font-size": $font-size-0
    ),
    "sm": (
      "size": $global-size-sm,
      "font-size": $font-size-1
    ),
    "lg": (
      "size": $global-size-lg,
      "font-size": $font-size-3
    ),
    "xl": (
      "size": $global-size-lg * 2,
      "font-size": $font-size-2 * 2
    ),
  ),
  $avatar-sizes
);


// --------------------------------------------
// Badge --------------------------------------
// --------------------------------------------
$enable-extended-badge-colors: true !default;
$badge-font                  : $font-family !default;
$badge-size                  : $global-size-sm !default;
$badge-lg-size               : $global-size-md !default;
$badge-sm-size               : $global-size-xs !default;
$badge-padding               : $space-0 $space-sm !default;
$badge-border-radius         : $radius-round !default;
$badge-font-weight           : $font-weight-semibold !default;
$badge-line-height           : 2 !default;
$badge-font-size             : $font-size-1 !default;
$badge-lg-font-size          : $font-size-3 - 1 !default;
$badge-sm-font-size          : $font-size-0 !default;
$badge-group-spacing         : $space-sm !default;
$badge-close-bg-hover        : var(--cc-badge-close-bg-hover) !default;


// --------------------------------------------
// Buttons ------------------------------------
// --------------------------------------------
$enable-btn-gradients       : false !default;
$enable-btn-border          : true !default;
$enable-btn-white-label     : false !default;
$enable-btn-circle          : true !default;
$enable-btn-outline         : true !default;
$enable-btn-pill            : false !default;
$enable-btn-square          : false !default;
$btn-font                   : $font-family !default;
$btn-radius                 : $global-radius !default;
$btn-box-width              : $global-size-md !default;
$btn-font-weight            : $font-weight-bold !default;
$btn-bd                     : $global-border-size transparent !default;
$btn-shadow                 : false !default;
$btn-active-shadow          : none !default;

$btn-disabled-bg            : var(--cc-btn-disabled-bg) !default;
$btn-default-c              : var(--cc-btn-default-c) !default;
$btn-link-bd                : var(--cc-btn-link-bd) !default;
$btn-disabled-bd            : var(--cc-btn-disabled-bd) !default;
$btn-disabled-c             : var(--cc-btn-disabled-c) !default;
$btn-link-hover-bg          : var(--cc-btn-link-hover-bg) !default;
$btn-shadow-focus           : var(--cc-btn-shadow-focus) !default;
$btn-primary-bg             : var(--cc-btn-primary-bg) !default;
$btn-primary-bg-hover       : var(--cc-btn-primary-bg-hover) !default;
$btn-primary-bg-active      : var(--cc-btn-primary-bg-active) !default;
$btn-primary-border         : var(--cc-btn-primary-border) !default;
$btn-success-bg             : var(--cc-btn-success-bg) !default;
$btn-success-bg-hover       : var(--cc-btn-success-bg-hover) !default;
$btn-success-bg-active      : var(--cc-btn-success-bg-active) !default;
$btn-success-border         : var(--cc-btn-success-border) !default;
$btn-danger-bg              : var(--cc-btn-danger-bg) !default;
$btn-danger-bg-hover        : var(--cc-btn-danger-bg-hover) !default;
$btn-danger-bg-active       : var(--cc-btn-danger-bg-active) !default;
$btn-danger-border          : var(--cc-btn-danger-border) !default;
$btn-secondary-bg           : var(--cc-btn-secondary-bg) !default;
$btn-secondary-bg-hover     : var(--cc-btn-secondary-bg-hover) !default;
$btn-secondary-bg-active    : var(--cc-btn-secondary-bg-active) !default;
$btn-secondary-border       : var(--cc-btn-secondary-border) !default;
$btn-secondary-color        : var(--cc-btn-secondary-color) !default;

// Set the default sizes for button boxes - .c-btn-box-{{size}}.
// This map is looped - adding key/value pairs will generate more classes
$btn-box-sizes: () !default;
$btn-box-sizes: map-merge(
  (
    xs: $global-size-xs,
    sm: $global-size-sm,
    lg: $global-size-lg,
  ),
  $btn-box-sizes
);

// Set the default styles for buttons - .c-btn-{{color}}.
// This map is looped - adding key/value pairs will generate more classes
$button-colors: () !default;
$button-colors: map-merge(
  (
    primary: (
      bg: $btn-primary-bg,
      bg-hover: $btn-primary-bg-hover,
      bg-active: $btn-primary-bg-active,
      border: $btn-primary-border,
    ),
    success: (
      bg: $btn-success-bg,
      bg-hover: $btn-success-bg-hover,
      bg-active: $btn-success-bg-active,
      border: $btn-success-border,
    ),
    danger: (
      bg: $btn-danger-bg,
      bg-hover: $btn-danger-bg-hover,
      bg-active: $btn-danger-bg-active,
      border: $btn-danger-border,
    ),
    secondary: (
      bg: $btn-secondary-bg,
      bg-hover: $btn-secondary-bg-hover,
      bg-active: $btn-secondary-bg-active,
      border: $btn-secondary-border,
      color: $btn-secondary-color
    )
  ),
  $button-colors
);

// Set the default sizes for buttons - .c-btn-{{size}}.
// This map is looped - adding key/value pairs will generate more classes
$button-sizes: () !default;
$button-sizes:  map-merge(
  (
    default: (
      font-size: $font-size-2,
      padding: $space-0 $space-md,
      height: $global-size-md
    ),
    xs: (
      font-size: $font-size-0,
      padding: $space-0 $space-xs,
      height: $global-size-xs
    ),
    sm: (
      font-size: $font-size-1,
      padding: $space-0 $space-sm,
      height: $global-size-sm
    ),
    lg: (
      font-size: $font-size-3,
      padding: $space-0 $space-xl,
      height: $global-size-lg
    )
  ),
  $button-sizes
);


// --------------------------------------------
// BREADCRUMBS --------------------------------
// --------------------------------------------
$breadcrumb-font-family         : $font-family !default;
$breadcrumb-margin              : $space-xl !default;
$breadcrumb-font-size           : $font-size-2 !default;
$breadcrumb-font-weight         : $font-weight-bold !default;
$breadcrumb-divider-size        : 8px !default;
$breadcrumb-divider-border-width: 2px !default;
$breadcrumb-color               : var(--cc-breadcrumb-color) !default;
$breadcrumb-color-active        : var(--cc-breadcrumb-color-active) !default;
$breadcrumb-divider-color       : var(--cc-breadcrumb-divider-color) !default;


// --------------------------------------------
// CARDS --------------------------------------
// --------------------------------------------
$card-font-family            : $font-family !default;
$card-border-radius          : $global-radius !default;
$card-min-width              : 0 !default;
$card-padding-v              : $space-md - $space-xs !default;
$card-padding-h              : $space-md !default;
$card-shadow                 : $shadow-xs !default;
$card-shadow-hover           : $shadow-md !default;
$card-header-font-size       : $font-size-3 !default;
$card-header-font-weight     : $font-weight-bold !default;
$card-header-line-height     : $line-height-sm !default;
$card-body-font-size         : $font-size-2 !default;
$card-title-font-size        : $font-size-4 !default;
$card-title-font-weight      : $font-weight-bold !default;
$card-subtitle-line-height   : $font-size-2 !default;
$card-subtitle-font-size     : $font-size-2 !default;
$card-footer-font-size       : $font-size-2 !default;
$card-footer-line-weight     : $font-size-4 !default;

$card-bg                     : var(--cc-card-bg) !default;
$card-text-color             : var(--cc-card-text-color) !default;
$card-border                 : var(--cc-card-border) !default;
$card-border-hover           : var(--cc-card-border-hover) !default;
$card-header-color           : var(--cc-card-header-color) !default;
$card-header-icon-color      : var(--cc-card-header-icon-color) !default;
$card-header-icon-hover-color: var(--cc-card-header-icon-hover-color) !default;
$card-footer-color           : var(--cc-card-footer-color) !default;
$card-footer-hover-color     : var(--cc-card-footer-hover-color) !default;

// --------------------------------------------
// CHECKBOX & RADIOS --------------------------
// --------------------------------------------
$checkbox-radius                : $global-radius !default;
$checkbox-default-size          : $global-size-xs !default;
$checkbox-label-font-size       : $font-size-2 !default;
$checkbox-label-font-weight     : $font-weight-normal !default;
$checkbox-transition            : background 0.2s !default;
$checkbox-bd                     : var(--cc-checkbox-bd) !default;
$checkbox-bd-hover-color         : var(--cc-checkbox-bd-hover-color) !default;
$checkbox-bg-empty               : var(--cc-checkbox-bg-empty) !default;
$checkbox-bg-disabled            : var(--cc-checkbox-bg-disabled) !default;
$checkbox-bd-disabled            : var(--cc-checkbox-bd-disabled) !default;
$checkbox-label-disabled-color   : var(--cc-checkbox-label-disabled-color) !default;
$checkbox-checked-color          : var(--cc-checkbox-checked-color) !default;
$checkbox-checked-border-color   : var(--cc-checkbox-checked-border-color) !default;
$checkbox-bg-checked             : var(--cc-checkbox-bg-checked) !default;
$checkbox-bg-checked-disabled    : var(--cc-checkbox-bg-checked-disabled) !default;
$checkbox-checked-color-disabled : var(--cc-checkbox-checked-color-disabled) !default;

// Set the checkbox sizes for checkboxes - .c-checkbox-{{size}}.
// This map is looped - adding key/value pairs will generate more classes
$checkbox-sizes: () !default;
$checkbox-sizes: map-merge(
  (
    lg: $global-size-sm,
    xl: $global-size-md
  ),
  $checkbox-sizes
);


// --------------------------------------------
// DROPDOWN -----------------------------------
// --------------------------------------------
$dropdown-radius             : $global-radius !default;
$dropdown-font               : $font-family !default;
$dropdown-min-width          : 200px !default;
$dropdown-font-size          : $font-size-2 !default;
$dropdown-font-weight        : $font-weight-normal !default;
$dropdown-shadow             : $shadow-md !default;
$dropdown-z-index            : $z-dropdown !default;
$dropdown-icon-font-size     : $font-size-3 !default;
$dropdown-icon-padding       : $space-sm !default;
$dropdown-list-padding       : $space-xs !default;
$dropdown-list-margin        : 0 !default;
$dropdown-item-padding       : $space-sm ($space-xs + $space-sm) !default;
$dropdown-grid-padding       : $space-sm !default;
$dropdown-bg                 : var(--cc-dropdown-bg) !default;
$dropdown-border             : var(--cc-dropdown-border) !default;
$dropdown-bg-hover           : var(--cc-dropdown-bg-hover) !default;
$dropdown-color              : var(--cc-dropdown-color) !default;
$dropdown-color-hover        : var(--cc-dropdown-color-hover) !default;
$dropdown-icon-color         : var(--cc-dropdown-icon-color) !default;
$dropdown-selected-color     : var(--cc-dropdown-selected-color) !default;
$dropdown-selected-bg        : var(--cc-dropdown-selected-bg) !default;
$link-colors:
  '[class*="primary"]',
  '[class*="accent"]',
  '[class*="success"]',
  '[class*="warning"]',
  '[class*="danger"]',
  '.c-text-muted' !default;


// --------------------------------------------
// FORMS --------------------------------------
// --------------------------------------------
$control-font-family          : $font-family !default;
$control-height               : $global-size-md !default;
$control-border-radius        : $global-radius !default;
$control-icon-padding         : $space-xl !default;
$control-font-size            : $font-size-2 !default;
$control-font-weight          : $font-weight-normal !default;
$control-line-height          : normal !default; //line height optimized for IE compatibilit
$control-padding              : $space-sm !default;
$control-shadow               : inset 0 2px 2px 0 rgba(33, 37, 41, .1) !default;
$control-focused-shadow       : inset 0 1px 2px 0 rgba(33, 37, 41, 0.08) !default;
$control-shadow-disabled      : none !default;
$control-transition           : border-color 0.1s ease-in !default;
$control-hint-font-size       : 85% !default;
$control-hint-transition      : all 0.2s ease !default;
$control-element-padding      : $space-sm * 2 0 !default;
$control-element-label-padding: 0 0 $space-sm 0 !default;
$select-padding-r             : $space-lg !default;
$select-bg-img                : url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") !default;
$select-bg-img-disabled       : url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23868e95'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") !default;
$select-bg-pos                : no-repeat right 8px center !default;
$control-background           : var(--cc-control-background) !default;
$control-border               : var(--cc-control-border) !default;
$control-disabled-background  : var(--cc-control-disabled-background) !default;
$control-disabled-border      : var(--cc-control-disabled-border) !default;
$control-color                : var(--cc-control-color) !default;
$control-placeholder-c        : var(--cc-control-placeholder-c) !default;
$control-placeholder-hover-c  : var(--cc-control-placeholder-hover-c) !default;
$control-hover                : var(--cc-control-hover) !default;
$control-hover-border         : var(--cc-control-hover-border) !default;
$control-active               : var(--cc-control-active) !default;
$control-active-border        : var(--cc-control-active-border) !default;
$control-icon-color           : var(--cc-control-icon-color) !default;
$control-hint-color           : var(--cc-control-hint-color) !default;
$control-addon-background     : var(--cc-control-addon-background) !default;
$select-box-shadow-focus      : var(--cc-select-box-shadow-focus) !default;

// Set the default sizes for forms - .c-input-{{size}}.
// This map is looped - adding key/value pairs will generate more classes
$control-sizes: () !default;
$control-sizes: map-merge(
  (
    "sm": (
      "height": $global-size-sm,
      "font-size": $font-size-1,
      "padding": $space-0 $space-sm
    ),
    "lg": (
      "height": $global-size-lg,
      "font-size": $font-size-4,
      "padding": $space-0 $space-sm
    ),
  ),
  $control-sizes
);


// Form Input Colors (NG specific) DISABLED CURRENTLY
$enable-NGform-colors: true !default;
$control-ng-validation:
  ("ng-valid", "success")
  ("ng-invalid", "error") !default;


// --------------------------------------------
// FOOTER -------------------------------------
// --------------------------------------------
$footer-font-family                  : $font-family !default;
$footer-height                       : $global-footer-height !default;
$footer-font-size                    : $font-size-2 !default;
$footer-padding                      : $space-0 ($space-md + $space-sm) !default;
$footer-links-margin                 : $space-0 $space-sm !default;
$footer-links-divider                : '•' !default;
$footer-z-index                      : $z-footer !default;
$footer-height-inverse               : 24px !default;
$footer-links-inverse-divider        : '|' !default;
$footer-border-top                   : var(--cc-footer-border-top) !default;
$footer-color                        : var(--cc-footer-color) !default;
$footer-color-link                   : var(--cc-footer-color-link) !default;
$footer-bg-color                     : var(--cc-footer-bg-color) !default;
$footer-bg-inverse                   : var(--cc-footer-bg-inverse) !default;
$footer-color-inverse                : var(--cc-footer-color-inverse) !default;
$footer-links-divider-color          : var(--cc-footer-links-divider-color) !default;
$footer-links-inverse-divider-color  : var(--cc-footer-links-inverse-divider-color) !default;

// --------------------------------------------
// Grid ---------------------------------------
// --------------------------------------------
$gutter: 12px !default;
$grid-columns: 12 !default;
$container-fixed-width: 1200px !default;
$grid-gutter-width: 24px !default;

// Define the maximum width of `.c-container-fixed` at breakpoints.
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

$breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1440px
) !default;


// --------------------------------------------
// HEADER -------------------------------------
// --------------------------------------------
$header-height                     : $global-header-height !default;
$header-z-index                    : $z-header !default;
$header-item-padding               : $space-0 $space-md !default;
$header-bg                         : var(--cc-header-bg) !default;
$header-inverse-text-color-active  : var(--cc-header-inverse-text-color-active) !default;
$header-inverse-icon-color-active  : var(--cc-header-inverse-icon-color-active) !default;
$header-bg-hover                   : var(--cc-header-bg-hover) !default;
$header-borders                    : var(--cc-header-borders) !default;
$header-bottom-border              : var(--cc-header-bottom-border) !default;
$header-inverse-bg                 : var(--cc-header-inverse-bg) !default;
$header-inverse-bg-hover           : var(--cc-header-inverse-bg-hover) !default;
$header-text-color                 : var(--cc-header-text-color) !default;
$header-inverse-text-color         : var(--cc-header-inverse-text-color) !default;
$header-inverse-borders            : var(--cc-header-inverse-borders) !default;
$header-inverse-pill-borders       : var(--cc-header-inverse-pill-borders) !default;
$header-inverse-pill-bg-hover      : var(--cc-header-inverse-pill-bg-hover) !default;

// --------------------------------------------
// Loaders ------------------------------------
// --------------------------------------------
$skeleton-bar-height         : calc($global-size-xs / 2) !default;
$skeleton-bar                : linear-gradient(140deg, rgba(white, 0), rgba(white, .6) 50%, rgba(white, 0) 100%) !default;
$skeleton-bar-animation      : skeletonIteration 2s infinite !default;
$loader-size                 : $global-size-md !default;
$loader-full-page-size       : 48px !default;
$loader-border-size          : 4px !default;
$loader-full-page-border-size: 6px !default;
$loader-animation-duration   : .71s !default;
$skeleton-bg-color           : var(--cc-skeleton-bg-color) !default;
$loader-color                : var(--cc-loader-color) !default;
$loader-bg-color             : var(--cc-loader-bg-color) !default;

// --------------------------------------------
// Media Object -------------------------------
// --------------------------------------------
$media-border-radius     : $global-radius !default;
$media-padding           : $space-sm $space-0 !default;
$media-body-padding      : $space-md !default;
$media-margin            : $space-0 $space-sm !default;
$media-action-font-size  : $font-size-2 !default;
$media-action-line-height: $line-height-xs !default;
$media-min-height        : $global-size-xl !default;
$media-bg                : var(--cc-media-bg) !default;
$media-color             : var(--cc-media-color) !default;
$media-border            : var(--cc-media-border) !default;
$media-stripe-bg         : var(--cc-media-stripe-bg) !default;
$media-hover-bg          : var(--cc-media-hover-bg) !default;
$media-header-bg         : var(--cc-media-header-bg) !default;
$media-action-color      : var(--cc-media-action-color) !default;

// --------------------------------------------
// MODALS -------------------------------------
// --------------------------------------------
$modal-border-radius          : $global-radius !default;
$modal-close-size             : $global-size-md !default;
$modal-z-index                : $z-modal !default;
$modal-shadow                 : $shadow-lg !default;
$modal-body-font-size         : $font-size-2 !default;
$modal-title-font-size        : $font-size-4 !default;
$modal-title-font-weight      : $font-weight-bold !default;
$modal-title-line-height      : $line-height-sm !default;
$modal-padding                : $space-lg !default;
$modal-body-padding           : $space-lg !default;
$modal-header-padding         : calc($space-lg / 3) calc($space-lg / 2) calc($space-lg / 3) $space-lg !default;
$modal-footer-padding         : $space-lg !default;
$modal-dialog-padding         : 40px !default;
$modal-dialog-footer-padding  : calc($space-lg / 2) 0 0 !default;
$modal-width                  : 640px !default;
$modal-border                 : var(--cc-modal-border) !default;
$modal-body-color             : var(--cc-modal-body-color) !default;
$modal-bg-color               : var(--cc-modal-bg-color) !default;
$modal-backdrop-bg-color      : var(--cc-modal-backdrop-bg-color) !default;
$modal-close-color            : var(--cc-modal-close-color) !default;
$modal-title-color            : var(--cc-modal-title-color) !default;
// Set the default sizes for modal - .c-modal-{{size}}.
// This map is looped - adding key/value pairs will generate more classes
$modal-widths: () !default;
$modal-widths: map-merge(
  (
    sm: 480px,
    lg: 800px,
    responsive: 100%
  ),
  $modal-widths
);


// --------------------------------------------
// NAV ---------------------------------------
// --------------------------------------------
$nav-height                : $global-size-md !default;
$nav-pill-radius           : $global-radius !default;
$nav-font-size             : $font-size-2 !default;
$nav-disabled-opacity      : .7 !default;
$nav-font-weight           : $font-weight-normal !default;
$nav-pill-font-weight      : $font-weight-bold !default;
$nav-pill-icon-opacity     : .25 !default;
$nav-spacing               : $space-sm !default;
$nav-color                  : var(--cc-nav-color) !default;
$nav-color-disabled         : var(--cc-nav-color-disabled) !default;
$nav-pill-color             : var(--cc-nav-pill-color) !default;
$nav-pill-color-disabled    : var(--cc-nav-pill-color-disabled) !default;
$nav-color-hover            : var(--cc-nav-color-hover) !default;
$nav-color-active           : var(--cc-nav-color-active) !default;
$nav-pill-color-hover       : var(--cc-nav-pill-color-hover) !default;
$nav-pill-color-active      : var(--cc-nav-pill-color-active) !default;
$nav-pill-bg-hover          : var(--cc-nav-pill-bg-hover) !default;
$nav-pill-bg-active         : var(--cc-nav-pill-bg-active) !default;
$nav-pill-bg-disabled       : var(--cc-nav-pill-bg-disabled) !default;
$nav-pill-icon-color-active : var(--cc-nav-pill-icon-color-active) !default;

// Set the default sizes for nav - .c-nav-{{size}}.
// This map is looped - adding key/value pairs will generate more classes
$nav-sizes: () !default;
$nav-sizes: map-merge(
  (
    "sm": (
      "font-size": $font-size-1,
      "height": $global-size-sm,
      "padding": $space-0 $space-sm
    ),
    "lg": (
      "font-size": $font-size-3,
      "height": $global-size-lg,
      "padding": $space-0 ($space-sm * 3)
    ),
  ),
  $nav-sizes
);


// --------------------------------------------
// NOTIFICATIONS ------------------------------
// --------------------------------------------
$notification-margin      : $space-sm !default;
$notification-shadow      : $shadow-xs !default;
$notification-shadow-hover: $shadow-sm !default;
$notification-read-bg     : var(--cc-notification-read-bg) !default;
$notification-read-border : var(--cc-notification-read-border) !default;

// --------------------------------------------
// PROGRESS -----------------------------------
// --------------------------------------------
$progress-height              : $global-size-sm !default;
$progress-height-sm           : $global-size-xs !default;
$progress-height-lg           : $global-size-lg !default;
$progress-font-size           : $font-size-2 !default;
$progress-font-size-sm        : $font-size-1 !default;
$progress-font-size-lg        : $font-size-5 !default;
$progress-margin-bottom       : $global-size-md !default;
$progress-radius              : $global-radius !default;
$progress-btn-animate-size    : $global-size-lg !default;
$progress-background          : var(--cc-progress-background) !default;
$progress-btn-color           : var(--cc-progress-btn-color) !default;
$progress-opaque-color        : var(--cc-progress-opaque-color) !default;


// Set the checkbox sizes for checkboxes - .c-checkbox-{{size}}.
// This map is looped - adding key/value pairs will generate more classes
$progress-colors: () !default;
$progress-colors: map-merge(
  (
    primary: $color-primary,
    success: $color-success
  ),
  $progress-colors
);


// Set the defaults for .c-header-{{size}}.
// This map is looped - adding key/value pairs will generate more classes
$progress-sizes: () !default;
$progress-sizes: map-merge(
  (
    "sm": (
      "font-size": $progress-font-size-sm,
      "height": $progress-height-sm
    ),
    "lg": (
      "font-size": $progress-font-size-lg,
      "height": $progress-height-lg
    ),
  ),
  $progress-sizes
);


// --------------------------------------------
// Sidebar ------------------------------------
// --------------------------------------------
$sidebar-bg                         : $color-white !default;
$sidebar-bg-hover                   : $color-gray-2 !default;
$sidebar-color                      : $color-gray-8 !default;
$sidebar-border                     : $global-border-size $global-border-color-light !default;
$sidebar-width                      : $global-sidebar-width !default;
$sidebar-width-folded               : $global-sidebar-width-folded !default;
$sidebar-font-size                  : $font-size-3 !default;
$sidebar-z-index                    : $z-sidenav !default;
$sidebar-link-padding               : $space-xs $space-md !default;
$sidebar-link-margin                : $space-xs !default;
$sidebar-link-line-height           : $space-xl !default;
$sidebar-icon-margin                : $space-sm $space-md $space-sm 0 !default;
$sidebar-icon-font-size             : $font-size-4 !default;
$sidebar-category-padding           : $space-sm $space-md !default;
$sidebar-submenu-link-padding-left  : 48px !default;
$sidebar-submenu-level3-padding-left: 64px !default;
$sidebar-submenu-level4-padding-left: 80px !default;

$sidebar-submenu-bg                 : $sidebar-bg !default;
$sidebar-color-active               : $color-accent !default;
$sidebar-link-color                 : $sidebar-color !default;
$sidebar-link-hover-color           : $sidebar-color !default;
$sidebar-link-active-color          : $sidebar-color !default;
$sidebar-link-open-color            : $sidebar-color !default;
$sidebar-divider-color              : $color-gray-1 !default;
$sidebar-link-hover-bg              : $sidebar-bg-hover !default;
$sidebar-link-active-bg             : $sidebar-bg-hover !default;
$sidebar-link-open-bg               : $sidebar-bg-hover !default;
$sidebar-icon-color                 : $global-text-color-lighter !default;
$sidebar-icon-color-active          : $sidebar-color-active !default;
$sidebar-category-color             : $global-text-color-light !default;
$sidebar-collapse-bg                : $color-gray-0 !default;
$sidebar-collapse-bg-hover          : $color-gray-1 !default;
$sidebar-collapse-bd                : $color-gray-2 !default;
$sidebar-submenu-link-active-color  : $sidebar-color-active !default;


// --------------------------------------------
// SWITCHES -----------------------------------
// --------------------------------------------
$switch-height                : $global-size-xs !default;
$switch-radius                : $radius-round !default;
$switch-font-size             : $font-size-2 !default;
$switch-border                : var(--cc-switch-border) !default;
$switch-label-off             : var(--cc-switch-label-off) !default;
$switch-label-on              : var(--cc-switch-label-on) !default;
$switch-handle                : var(--cc-switch-handle) !default;
$switch-disabled              : var(--cc-switch-disabled) !default;
$switch-off-bg                : var(--cc-switch-off-bg) !default;
$switch-on-bg                 : var(--cc-switch-on-bg) !default;
$switch-shadow                : var(--cc-switch-shadow) !default;
$switch-handle-disabled       : var(--cc-switch-handle-disabled) !default;
$switch-disabled-checked-bg   : var(--cc-switch-disabled-checked-bg) !default;


// Set the default sizes for switches - .c-switch-lg.
// This map is looped - adding key/value pairs will generate more classes
$switch-sizes: () !default;
$switch-sizes: map-merge(
  (
    lg: $global-size-md
  ),
  $switch-sizes
);


// --------------------------------------------
// TOAST --------------------------------------
// --------------------------------------------
$toast-margin             : 0 0 $space-md 0 !default;
$toast-shadow             : $shadow-sm !default;
$toast-font-size          : $font-size-2 !default;
$toast-radius             : $global-radius !default;
$toast-font               : $font-family !default;
$toast-font-weight        : $font-weight-bold !default;
$toast-padding            : $space-md $space-md $space-md ($space-md + 4px) !default;
$toast-icon-padding-right : $space-md !default;
$toast-icon-font-size     : $font-size-2 + 2 !default;
$toast-left-border-width  : 4px !default;
$toast-close-size         : 12px !default;
$toast-border             : var(--cc-toast-border) !default;
$toast-background         : var(--cc-toast-background) !default;
$toast-color              : var(--cc-toast-color) !default;
$toast-icon-color         : var(--cc-toast-icon-color) !default;
$toast-left-border-bg     : var(--cc-toast-left-border-bg) !default;
$toast-left-border-color  : var(--cc-toast-left-border-color) !default;
$toast-close-color        : var(--cc-toast-close-color) !default;


// --------------------------------------------
// TOOLTIPS -----------------------------------
// --------------------------------------------
$tooltip-bd-radius       : $global-radius !default;
$tooltip-max-width       : 300px !default;
$tooltip-padding         : $space-xs $space-sm !default;
$tooltip-font-size       : $font-size-2 !default;
$tooltip-line-height     : $line-height-xs !default;
$tooltip-shadow          : $shadow-lg !default;
$tooltip-z-index         : $z-tooltip !default;
$tooltip-transition-style: cubic-bezier(0.73, 0.01, 0, 1) !default;
$tooltip-border-width    : 4px !default;
$tooltip-arrow-position  : 6px !default;
$tooltip-default-color   : var(--cc-tooltip-default-color) !default;
$tooltip-invert-bg       : var(--cc-tooltip-invert-bg) !default;
$tooltip-default-bg      : var(--cc-tooltip-default-bg) !default;
$tooltip-invert-color    : var(--cc-tooltip-invert-color) !default;


// --------------------------------------------
// TABS ---------------------------------------
// --------------------------------------------
$tabs-bordered-radius       : $global-radius !default;
$tabs-height                : $global-size-md !default;
$tabs-font-family           : $font-family !default;
$tabs-font-size             : $font-size-2 !default;
$tabs-font-weight           : $font-weight-bold !default;
$tabs-padding               : $space-sm $space-md !default;
$tabs-hover-transition      : border-color 0.2s ease 0s !default;
$tabs-box-shadow            : inset 0 -1px 0 0 $global-border-color-light !default;
$tabs-border-bottom         : 2px !default;
$tabs-color                 : var(--cc-tabs-color) !default;
$tabs-border                : var(--cc-tabs-border) !default;
$tabs-border-hover          : var(--cc-tabs-border-hover) !default;
$tabs-border-active         : var(--cc-tabs-border-active) !default;
$tabs-bordered-bg-hover     : var(--cc-tabs-bordered-bg-hover) !default;
$tabs-bordered-bg-active    : var(--cc-tabs-bordered-bg-active) !default;
$tabs-color-hover           : var(--cc-tabs-color-hover) !default;
$tabs-color-active          : var(--cc-tabs-color-active) !default;
$tabs-color-disabled        : var(--cc-tabs-color-disabled) !default;
$tabs-bordered-bg           : var(--cc-tabs-bordered-bg) !default;

// Set the default sizes for tabs - .c-tab-{{size}}.
// This map is looped - adding key/value pairs will generate more classes
$tabs-sizes: () !default;
$tabs-sizes: map-merge(
  (
    "sm": (
      "height": $global-size-sm,
      "font-size": $font-size-1,
      "line-height": $line-height-xs,
      "padding": $space-xs $space-sm
    ),
    "lg": (
      "height": $global-size-lg,
      "font-size": $font-size-3,
      "line-height": $line-height-sm,
      "padding": $space-sm $space-md
    ),
  ),
  $tabs-sizes
);


// --------------------------------------------
// TABLES -------------------------------------
// --------------------------------------------
$table-font-family              : $font-family !default;
$table-font-size                : $font-size-2 !default;
$table-font-size-lg             : $font-size-3 !default;
$table-line-height              : $line-height-xs !default;
$table-border                   : 0 !default;
$table-padding                  : ($space-sm - 1) ($space-sm + 2) $space-sm !default;
$table-stripe                   : 'even' !default;
$table-head-font-weight         : $font-weight-bold !default;
$table-head-border-width        : 1px 0 !default;
$table-padding-sm               : ($space-xs - 1) $space-sm $space-xs !default;
$table-padding-lg               : ($space-sm + $space-xs) ($space-sm + 2) ($space-sm + ($space-xs - 1)) !default;
$table-hover-bg-img             : url('data: image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI1IiBoZWlnaHQ9IjIwIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxLjMyMjkxNjYgNS4yOTE2NjY4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIC0yOTEuNzEpIiBmaWxsPSIjYmJjMWM5Ij4gIDxyZWN0IHk9IjI5Ni40NyIgd2lkdGg9Ii41MjkxNyIgaGVpZ2h0PSIuNTI5MTciLz4gIDxyZWN0IHk9IjI5MS43MSIgd2lkdGg9Ii41MjkxNyIgaGVpZ2h0PSIuNTI5MTciLz4gIDxyZWN0IHg9Ii43OTM3NSIgeT0iMjkxLjcxIiB3aWR0aD0iLjUyOTE3IiBoZWlnaHQ9Ii41MjkxNyIvPiAgPHJlY3QgeD0iLjc5Mzc1IiB5PSIyOTYuNDciIHdpZHRoPSIuNTI5MTciIGhlaWdodD0iLjUyOTE3Ii8+ICA8cmVjdCB4PSIuNzkzNzUiIHk9IjI5NS42OCIgd2lkdGg9Ii41MjkxNyIgaGVpZ2h0PSIuNTI5MTciLz4gIDxyZWN0IHg9Ii43OTM3NSIgeT0iMjk0Ljg4IiB3aWR0aD0iLjUyOTE3IiBoZWlnaHQ9Ii41MjkxNyIvPiAgPHJlY3QgeD0iLjc5Mzc1IiB5PSIyOTQuMDkiIHdpZHRoPSIuNTI5MTciIGhlaWdodD0iLjUyOTE3Ii8+ICA8cmVjdCB4PSIuNzkzNzUiIHk9IjI5My4zIiB3aWR0aD0iLjUyOTE3IiBoZWlnaHQ9Ii41MjkxNyIvPiAgPHJlY3QgeD0iLjc5Mzc1IiB5PSIyOTIuNSIgd2lkdGg9Ii41MjkxNyIgaGVpZ2h0PSIuNTI5MTciLz4gIDxyZWN0IHk9IjI5NS42OCIgd2lkdGg9Ii41MjkxNyIgaGVpZ2h0PSIuNTI5MTciLz4gIDxyZWN0IHk9IjI5NC44OCIgd2lkdGg9Ii41MjkxNyIgaGVpZ2h0PSIuNTI5MTciLz4gIDxyZWN0IHk9IjI5NC4wOSIgd2lkdGg9Ii41MjkxNyIgaGVpZ2h0PSIuNTI5MTciLz4gIDxyZWN0IHk9IjI5My4zIiB3aWR0aD0iLjUyOTE3IiBoZWlnaHQ9Ii41MjkxNyIvPiAgPHJlY3QgeT0iMjkyLjUiIHdpZHRoPSIuNTI5MTciIGhlaWdodD0iLjUyOTE3Ii8+IDwvZz48L3N2Zz4 = ') !default;
$table-hover-bg-img-body-pos    : 2px center !default;
$table-background               : var(--cc-table-background)!default;
$table-border-color             : var(--cc-table-border-color)!default;
$table-row-hover                : var(--cc-table-row-hover)!default;
$table-row-stripe-hover         : var(--cc-table-row-stripe-hover)!default;
$table-stripe-bg                : var(--cc-table-stripe-bg)!default;
$table-head-bg                  : var(--cc-table-head-bg)!default;
$table-head-cell-hover          : var(--cc-table-head-cell-hover)!default;
$table-head-color               : var(--cc-table-head-color)!default;
$table-head-border-color        : var(--cc-table-head-border-color)!default;
$table-head-border-vertical     : var(--cc-table-head-border-vertical)!default;
$table-foot-bg                  : var(--cc-table-foot-bg)!default;
$table-foot-color               : var(--cc-table-foot-color)!default;

// Set the default styles for table states.
// This map is looped - adding key/value pairs will generate more classes
$table-states: () !default;
$table-states: map-merge(
  (
    "selected": $color-primary-0,
    "starred": $color-warning-0,
    "success": $color-success-0,
    "warning": $color-warning-0,
    "danger": $color-danger-0
  ),
  $table-states
);


// --------------------------------------------
// PAGINATION ---------------------------------
// --------------------------------------------
$pagination-item-size             : $global-size-md !default;
$pagination-item-border-radius    : $global-radius !default;
$pagination-item-spacing          : 2px !default;
$pagination-font-size             : $font-size-2 !default;
$pagination-icon-size             : $font-size-0 !default;
$pagination-item-color            : var(--cc-pagination-item-color)!default;
$pagination-item-current-bg       : var(--cc-pagination-item-current-bg)!default;
$pagination-item-current-color    : var(--cc-pagination-item-current-color)!default;
$pagination-next-color            : var(--cc-pagination-next-color)!default;
$pagination-previous-color        : var(--cc-pagination-previous-color)!default;
$pagination-bg-disabled           : var(--cc-pagination-bg-disabled)!default;