@iamproperty/components 7.6.1 → 7.6.2

package/assets/sass/_functions/variables.scss

@@ -1,729 +1 @@
-@use 'sass:map';
-@use 'sass:string';
-@use 'sass:math';
-
-$vars: () !default;
-$varsSM: () !default;
-$varsMD: () !default;
-
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
-$optionalText: 'true' !default;
-
-@use 'functions' as *;
-
-$white: #fff !default;
-$black: #000 !default;
-
-$escaped-characters: (('<', '%3c'), ('>', '%3e'), ('#', '%23'), ('(', '%28'), (')', '%29')) !default;
-
-// #region To review
-
-$pre-color: null !default;
-$mark-padding: 0.1875em !default;
-
-$mark-bg: yellow !default;
-
-$dt-font-weight: bold !default;
-
-$list-inline-padding: 0.5rem !default;
-
-$table-cell-padding-y: 0.5rem !default;
-$table-cell-padding-x: 0.5rem !default;
-$table-cell-padding-y-sm: 0.25rem !default;
-$table-cell-padding-x-sm: 0.25rem !default;
-
-$table-caption-color: gray !default;
-
-$table-th-font-weight: null !default;
-
-$link-decoration: underline !default;
-
-$link-hover-decoration: null !default;
-
-$enable-caret: true !default;
-$enable-rounded: true !default;
-$enable-shadows: false !default;
-$enable-gradients: false !default;
-$enable-transitions: true !default;
-$enable-reduced-motion: true !default;
-$enable-smooth-scroll: true !default;
-$enable-grid-classes: true !default;
-$enable-container-classes: true !default;
-$enable-cssgrid: false !default;
-$enable-button-pointers: true !default;
-$enable-rfs: true !default;
-$enable-validation-icons: true !default;
-$enable-negative-margins: false !default;
-$enable-deprecation-messages: true !default;
-$enable-important-utilities: true !default;
-
-$legend-margin-bottom: 0.5rem !default;
-$legend-font-size: 1.5rem !default;
-$legend-font-weight: null !default;
-
-$form-select-disabled-color: null !default;
-$form-select-disabled-color: null !default;
-$form-select-disabled-bg: gray !default;
-
-$form-select-disabled-color: null !default;
-$form-select-disabled-bg: $gray-200 !default;
-$form-select-disabled-border-color: black !default;
-
-$form-select-color: inherit !default;
-
-$grid-columns: 12 !default;
-$grid-gutter-width: 1.5rem !default;
-$grid-row-columns: 6 !default;
-
-$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;
-$box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075) !default;
-$box-shadow-lg: 0 1rem 3rem rgba($black, 0.175) !default;
-$box-shadow-inset: inset 0 1px 2px rgba($black, 0.075) !default;
-
-$position-values: (
-  0: 0,
-  50: 50%,
-  100: 100%,
-) !default;
-
-$utilities-border: (
-  'white': to-rgb($white),
-) !default;
-$utilities-border-colors: map-loop($utilities-border, rgba-css-var, '$key', 'border') !default;
-
-$border-width: 1px !default;
-$border-widths: (
-  1: 1px,
-  2: 2px,
-  3: 3px,
-  4: 4px,
-  5: 5px,
-) !default;
-
-$negative-spacers: null;
-
-$font-weight-lighter: lighter !default;
-$font-weight-light: 300 !default;
-$font-weight-normal: 400 !default;
-$font-weight-semibold: 600 !default;
-$font-weight-bold: 700 !default;
-$font-weight-bolder: bolder !default;
-
-$line-height-base: 1.5 !default;
-$line-height-sm: 1.25 !default;
-$line-height-lg: 2 !default;
-
-$text-muted: gray;
-
-// #endregion
-
-// #region Grid Breakpoints, layouts
-$grid-breakpoints: (
-  xs: 0,
-  sm: 36em,
-  /* 576 */ md: 62em /* 992 */,
-);
-
-$breakpoints: $grid-breakpoints;
-
-@include assert-ascending($grid-breakpoints, '$grid-breakpoints');
-@include assert-starts-at-zero($grid-breakpoints, '$grid-breakpoints');
-
-@each $bp, $value in $grid-breakpoints {
-  $vars: map.merge((--breakpoint-#{$bp}: #{$value}), $vars);
-}
-
-$device-xs-width: 375;
-$device-sm-width: 768;
-$device-md-width: 1280;
-
-$max-viewport: 1280;
-//$max-font-size: 110%;
-$max-scale-up: 1.125;
-
-$container-max-widths: (
-  sm: 0,
-  md: 80em,
-);
-
-$grid-columns: 12;
-$grid-gutter-width: 1rem; // 15px
-
-// #region grid options
-$columns: 12 !default;
-$rows-per-page: 20 !default;
-$gap: #{rem(16)} !default;
-$gutter: #{rem(24)} !default;
-$max-width-px: 1280 !default;
-$max-width: #{rem($max-width-px)} !default;
-$grid-utility-count: 10 !default;
-
-$vars: map.merge(
-  (
-    '--gap': #{$gap},
-    '--gutter': #{$gutter},
-    '--max-width': #{$max-width},
-  ),
-  $vars
-);
-// #endregion
-
-$container-padding-x: 24;
-$container-padding-x-sm: 40;
-$container-padding-x-md: 84;
-$container-padding: var(--container-padding-top) rem($container-padding-x) var(--container-padding-bottom)
-  rem($container-padding-x);
-$container-padding-sm: var(--container-padding-top) rem($container-padding-x-sm) var(--container-padding-bottom)
-  rem($container-padding-x-sm);
-$container-padding-md: var(--container-padding-top) rem($container-padding-x-md) var(--container-padding-bottom)
-  rem($container-padding-x-md);
-
-$vars: map.merge(
-  (
-    '--container-padding-top': 0,
-    '--container-padding-bottom': #{rem(16)},
-    '--container-padding-x': #{rem($container-padding-x)},
-    '--container-padding-x-sm': #{rem($container-padding-x-sm)},
-    '--container-padding-x-md': #{rem($container-padding-x-md)},
-    '--container-padding': $container-padding,
-    '--container-padding-sm': $container-padding-sm,
-    '--container-padding-md': $container-padding-md,
-  ),
-  $vars
-);
-
-$varsSM: map.merge(
-  (
-    '--container-padding': var(--container-padding-sm),
-    '--container-padding-x': var(--container-padding-x-sm),
-  ),
-  $varsSM
-);
-
-$varsMD: map.merge(
-  (
-    '--container-padding': var(--container-padding-md),
-    '--container-padding-x': var(--container-padding-x-md),
-  ),
-  $varsMD
-);
-
-$spacer: 1rem;
-$spacers: (
-  0: 0,
-  1: $spacer * 0.5,
-  2: $spacer,
-  3: $spacer * 1.5,
-  4: $spacer * 2,
-  5: $spacer * 3,
-);
-
-$gutters: $spacers;
-
-@each $key, $value in $spacers {
-  $vars: map.merge((--spacing-#{$key}: #{$value}), $vars);
-}
-
-// #endregion
-
-// #region Colours
-
-// Default Bootstrap Theme vars
-$primary: #00313c;
-$secondary: #b4e6a5;
-$success: #b4e6a5;
-$info: #1ebee6;
-$warning: #ffa500;
-$danger: #dc3545;
-$light: #eeeeee;
-$dark: #46003c;
-$canvas: #fcfcfc;
-
-// Functional/state variables
-$colour-body: #595959;
-$colour-muted: #9d9d9d;
-$colour-border: #d8d8d8;
-$colour-link: $primary;
-$colour-focus: #000000;
-$colour-hover: #000000;
-$colour-active: $success;
-$colour-selected: $info;
-$body-color: $colour-body;
-$colour-inverted: #fcfcfc;
-
-$colors: ();
-$grays: ();
-
-$theme-colors: ();
-$theme-colors: map.merge(
-  (
-    'secondary': $secondary,
-    'info': $info,
-    'warning': $warning,
-    'success': $success,
-    'complete': #0f9d58,
-    'danger': $danger,
-    'dark': $dark,
-    'light': $light,
-    'canvas': $canvas,
-    'white': #fcfcfc,
-    'activeLink': #e8f9fd,
-    'activeLinkBorder': #1dbde6,
-  ),
-  $theme-colors
-);
-
-@each $color, $value in $theme-colors {
-  $vars: map.merge((--colour-#{$color}: $value, --colour-#{$color}-theme: $value), $vars);
-}
-
-//  RGB Theme colours
-
-$utilities-colors: $theme-colors;
-
-$utilities-text: map.merge(
-  $utilities-colors,
-  (
-    'black': $black,
-    'muted': $colour-muted,
-    'body': $body-color,
-  )
-);
-
-$utilities-bg-colors: map-loop($utilities-colors, show-css-var, '$key');
-$cx-text-colors: map-loop($utilities-text, show-css-var-text, '$key');
-
-// Colours that we want setting but not used for Bootstraps mixins, i.e. .text-primary, .bg-muted
-$non-theme-colors: ();
-$non-theme-colors: map.merge(
-  (
-    'muted': $colour-muted,
-    'body': $body-color,
-    'border': $colour-border,
-    'link': var(--colour-primary-theme),
-    'brand': var(--colour-primary-theme),
-    'underline': var(--colour-secondary),
-    'heading': var(--colour-primary),
-    'focus': var(--colour-primary-theme),
-    'hover': var(--colour-primary-theme),
-    'active': var(--colour-primary-theme),
-    'selected': var(--colour-info),
-    'inverted': $canvas,
-    'btn': var(--colour-primary-theme),
-    'btn-bg': var(--colour-warning),
-    'btn-border': var(--colour-warning),
-    'btn-bg-hover': transparent,
-    'btn-hover': var(--colour-primary-theme),
-    'btn-secondary': var(--colour-primary-theme),
-    'btn-secondary-border': var(--colour-primary-theme),
-    'btn-secondary-bg': transparent,
-    'btn-secondary-bg-hover': var(--colour-primary-theme),
-    'btn-secondary-hover': var(--colour-inverted),
-    'canvas-2': white,
-    'btn-action-hover-bg': var(--colour-light),
-  ),
-  $non-theme-colors
-);
-
-@each $color, $value in $non-theme-colors {
-  $vars: map.merge((--colour-#{$color}: #{$value}), $vars);
-}
-
-$dark-mode-colors: (
-  'warning': #ffb733,
-  'info': #35c5e9,
-  'success': #b4e6a5,
-  'danger': #e7727d,
-  'dark': #b599b1,
-  'light': #444444,
-);
-
-$dark-mode-functional-colors: (
-  'canvas': #262626,
-  'canvas-2': #313131,
-  'body': #bfbfbf,
-  'heading': var(--colour-white),
-  'link': var(--colour-white),
-  'hover': var(--colour-white),
-  'active': var(--colour-white),
-  'border': var(--colour-white),
-  'brand': var(--colour-white),
-  'btn': #{$primary},
-  'btn-border': var(--colour-white),
-  'btn-bg': var(--colour-white),
-  'btn-hover': var(--colour-white),
-  'btn-secondary': var(--colour-white),
-  'btn-secondary-border': var(--colour-white),
-  'btn-secondary-bg': transparent,
-  'btn-secondary-bg-hover': var(--colour-white),
-  'btn-secondary-hover': var(--colour-primary-theme),
-  'btn-action-hover-bg': var(--colour-canvas-2),
-  'activeLink': #173c45,
-  'activeLinkBorder': #1dbde6,
-);
-
-// Kill bootstrap colors
-$colors: ();
-$theme-colors-rgb: ();
-
-// #endregion
-
-// #region aspect ratios
-$aspect-ratios: (
-  '1x1': 100%,
-  '4x3': calc(3 / 4 * 100%),
-  '16x9': calc(9 / 16 * 100%),
-  '21x9': calc(9 / 21 * 100%),
-);
-// #endregion
-
-// #region Type
-
-$font-body: 'Qanelas', arial, sans-serif;
-$font-heading: 'Qanelas', arial, sans-serif;
-
-$fonts: ();
-$fonts: map.merge(
-  (
-    'heading': $font-heading,
-    'body': $font-body,
-  ),
-  $fonts
-);
-
-@each $font, $value in $fonts {
-  $vars: map.merge((--font-#{$font}: #{$value}), $vars);
-}
-
-$vars: map.merge(
-  (
-    '--type-scale': 1.2,
-    '--body-fs': 1rem,
-  ),
-  $vars
-);
-
-/* Headings variables are setup this way so that we can export them into the vue documentation */
-$heading-sizes: (
-  /* H1 */ 'h1_fs': round(calc(var(--body-fs, 1rem) * pow(var(--type-scale), 6)), 0.25rem),
-  'h1_lh': round(calc(1em * var(--type-scale)), 0.25rem),
-  'h1_pb': round(calc(1em * var(--type-scale)), 0.25rem),
-  /* H2 */ 'h2_fs': round(calc(var(--body-fs, 1rem) * pow(var(--type-scale), 5)), 0.25rem),
-  'h2_lh': round(calc(1em * var(--type-scale)), 0.25rem),
-  'h2_pb': round(calc(1em * var(--type-scale)), 0.25rem),
-  /* H3 */ 'h3_fs': round(calc(var(--body-fs, 1rem) * pow(var(--type-scale), 3)), 0.25rem),
-  'h3_lh': round(up, calc(1em * var(--type-scale)), 0.25rem),
-  'h3_pb': round(up, calc(1em * var(--type-scale)), 0.25rem),
-  /* H4 */ 'h4_fs': round(calc(var(--body-fs, 1rem) * pow(var(--type-scale), 2)), 0.25rem),
-  'h4_lh': round(up, calc(1em * var(--type-scale)), 0.25rem),
-  'h4_pb': round(up, calc(1em * var(--type-scale)), 0.25rem),
-  'lead_fs': 18,
-  'lead_lh': 28,
-  'lead_pb': 48,
-  'body_fs': 16,
-  'body_lh': 24,
-  'body_pb': 48 - 24,
-  'body_end_pb': 48,
-  'small_fs': 14,
-  'small_lh': 24,
-  'small_pb': 48
-);
-
-/* H2 */
-$h1-font-size: map.get($heading-sizes, 'h1_fs');
-$h2-font-size: map.get($heading-sizes, 'h2_fs');
-$h3-font-size: map.get($heading-sizes, 'h3_fs');
-$h4-font-size: map.get($heading-sizes, 'h4_fs');
-$h5-font-size: map.get($heading-sizes, 'h4_fs');
-$h6-font-size: map.get($heading-sizes, 'h4_fs');
-
-$font-sizes: (
-  1: $h1-font-size,
-  2: $h2-font-size,
-  3: $h3-font-size,
-  4: $h4-font-size,
-  5: $h5-font-size,
-  6: $h6-font-size,
-) !default;
-
-$heading-weight: 700;
-
-$headings-font-family: var(--font-heading);
-$headings-font-weight: var(--heading-weight);
-$headings-color: var(--colour-heading);
-
-$headings-margin-bottom: 0;
-$headings-font-style: normal;
-$headings-line-height: 2rem;
-$display-line-height: $headings-line-height;
-
-$vars: map.merge(
-  (
-    --heading-weight: $heading-weight,
-  ),
-  $vars
-);
-
-$content-max-width-px: 800;
-$content-max-width: rem($content-max-width-px);
-$paragraph-margin-bottom: 2rem;
-
-$input-max-width-px: 800;
-$input-max-width: var(--input-max-width, #{rem($input-max-width-px)});
-$select-max-width: var(--select-max-width, #{rem($input-max-width-px)});
-// #endregion
-
-// #region Buttons
-$btn-border-radius: 1rem;
-$btn-border-radius-sm: 1rem;
-$btn-border-radius-lg: 1rem;
-
-$btn-padding-y: 0.5rem;
-$btn-padding-x: 1.5rem;
-$btn-padding-y-sm: $btn-padding-y;
-$btn-padding-x-sm: $btn-padding-x;
-$btn-padding-y-md: $btn-padding-y;
-$btn-padding-x-md: $btn-padding-x;
-
-// #endregion
-
-// #region Forms
-// label
-$form-label-font-size: rem(18);
-$form-label-font-weight: bold;
-$form-label-color: var(--colour-heading);
-$form-label-margin-bottom: 0.25rem;
-// input field
-$input-font-size: 1rem;
-$input-font-weight: normal;
-$input-line-height: 1.5;
-$input-padding-y: 0.75em;
-$input-padding-x: 1em;
-$input-border-radius: rem(10);
-$input-border-color: var(--colour-primary);
-$input-border-width: 2px;
-
-// sm
-$input-height-sm: null;
-$input-font-size-sm: #{rem(14)};
-$input-border-radius-sm: null; // Inherit default value
-$input-padding-y-sm: null;
-$input-padding-x-sm: null;
-
-// lg
-$input-height-lg: null;
-$input-font-size-lg: #{rem(24)};
-$input-border-radius-lg: false; // Inherit default value
-$input-padding-y-lg: null;
-$input-padding-x-lg: null;
-
-// Input group
-$input-group-addon-bg: white;
-$input-group-addon-border-color: var(--colour-border);
-
-// Select
-$form-select-padding-y: $input-padding-y;
-//$form-select-indicator-padding
-$form-select-padding-x: #{$input-padding-x};
-$form-select-border-color: var(--colour-primary);
-$form-select-border-radius: $input-border-radius;
-$form-select-border-width: 2px;
-
-// Checkbox
-$form-check-input-width: 1.5rem;
-$form-check-min-height: #{rem(28)};
-$form-check-padding-start: 2rem;
-$form-check-margin-bottom: #{rem(16)};
-
-$form-check-input-border: 1px solid var(--colour-border);
-
-$form-check-input-checked-color: $primary;
-$form-check-input-checked-bg-color: var(--colour-info);
-$form-check-input-checked-border-color: var(--colour-border);
-$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='2' d='M6 10l3 3l6-6'/></svg>");
-
-$form-check-input-indeterminate-color: $primary;
-$form-check-input-indeterminate-bg-color: var(--colour-info);
-$form-check-input-indeterminate-border-color: var(--colour-info);
-$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10h8'/></svg>");
-
-$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='#{$colour-border}'/></svg>");
-$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='#{$colour-focus}'/></svg>");
-$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='#{$primary}'/></svg>");
-
-$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='#{$primary}'/></svg>");
-
-// #endregion
-
-// #region Cards
-$card-border-width: 0;
-$card-border-radius: rem(10);
-$card-spacer-y: 1.5rem;
-$card-spacer-x: 1.25rem;
-
-$card-cap-padding-y: 1.5rem;
-$card-cap-padding-x: 1.25rem;
-
-$card-cap-bg: transparent;
-// #endregion card-variables
-
-// #region Icons
-$icon-arrow: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M6.5,2l9,9-9,9' style='fill:none;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'/></svg>");
-$icon-close: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
-$icon-question: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'><path d='M14 21.5v-3c0-0.281-0.219-0.5-0.5-0.5h-3c-0.281 0-0.5 0.219-0.5 0.5v3c0 0.281 0.219 0.5 0.5 0.5h3c0.281 0 0.5-0.219 0.5-0.5zM18 11c0-2.859-3-5-5.688-5-2.547 0-4.453 1.094-5.797 3.328-0.141 0.219-0.078 0.5 0.125 0.656l2.063 1.563c0.078 0.063 0.187 0.094 0.297 0.094 0.141 0 0.297-0.063 0.391-0.187 0.734-0.938 1.047-1.219 1.344-1.437 0.266-0.187 0.781-0.375 1.344-0.375 1 0 1.922 0.641 1.922 1.328 0 0.812-0.422 1.219-1.375 1.656-1.109 0.5-2.625 1.797-2.625 3.313v0.562c0 0.281 0.219 0.5 0.5 0.5h3c0.281 0 0.5-0.219 0.5-0.5v0c0-0.359 0.453-1.125 1.188-1.547 1.188-0.672 2.812-1.578 2.812-3.953zM24 14c0 6.625-5.375 12-12 12s-12-5.375-12-12 5.375-12 12-12 12 5.375 12 12z'/></svg>");
-
-$icon-new-tab: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M304 24c0 13.3 10.7 24 24 24H430.1L207 271c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l223-223V184c0 13.3 10.7 24 24 24s24-10.7 24-24V24c0-13.3-10.7-24-24-24H328c-13.3 0-24 10.7-24 24zM72 32C32.2 32 0 64.2 0 104V440c0 39.8 32.2 72 72 72H408c39.8 0 72-32.2 72-72V312c0-13.3-10.7-24-24-24s-24 10.7-24 24V440c0 13.3-10.7 24-24 24H72c-13.3 0-24-10.7-24-24V104c0-13.3 10.7-24 24-24H200c13.3 0 24-10.7 24-24s-10.7-24-24-24H72z'/></svg>");
-
-$vars: map.merge(
-  (
-    --icon-arrow: #{escape-svg($icon-arrow)},
-    --icon-close: #{escape-svg($icon-close)},
-    --icon-question: #{escape-svg($icon-question)},
-    --icon-new-tab: #{escape-svg($icon-new-tab)},
-  ),
-  $vars
-);
-// #endregion
-
-// #region pagination
-// Default
-$pagination-color: var(--colour-heading);
-$pagination-disabled-color: var(--colour-border);
-$pagination-bg: transparent;
-$pagination-border-width: 1px;
-$pagination-border-color: var(--colour-primary);
-
-// Hover and focus
-$pagination-hover-color: var(--colour-heading);
-$pagination-hover-bg: var(--colour-info);
-$pagination-hover-border-color: var(--colour-info);
-$pagination-focus-color: var(--colour-heading);
-$pagination-focus-bg: var(--colour-info);
-
-// Active
-$pagination-active-color: var(--colour-primary);
-$pagination-active-bg: var(--colour-info);
-$pagination-active-border-color: var(--colour-info);
-// Disabled
-$pagination-disabled-bg: $pagination-bg;
-$pagination-disabled-border-color: var(--colour-border);
-// #endregion
-
-// #region Accordion
-$accordion-button-padding-y: var(--accordion-y-padding);
-$accordion-button-padding-x: var(--accordion-indent);
-$accordion-button-color: var(--colour-primary);
-$accordion-button-bg: transparent;
-
-$accordion-icon-color: $primary;
-$accordion-icon-active-color: $primary;
-
-$accordion-button-icon: var(--icon-arrow);
-
-$accordion-button-active-color: var(--colour-primary);
-$accordion-button-active-bg: transparent;
-
-$accordion-border-color: var(--colour-border);
-$accordion-border-width: 1px;
-$accordion-bg: transparent;
-
-$accordion-body-padding-y: 1rem;
-$accordion-body-padding-x: var(--accordion-indent);
-
-// #endregion
-
-// #region Z-index
-
-$vars: map.merge(
-  (
-    '--index-below': -1,
-    '--index-base': 0,
-    '--index-focus': 2,
-    '--index-above': 10,
-    '--index-floating': 100,
-    '--index-menu': 200,
-    '--index-overlay': 1000,
-  ),
-  $vars
-);
-
-$zindex-dropdown: var(--index-above);
-$zindex-sticky: var(--index-floating);
-$zindex-fixed: var(--index-floating);
-$zindex-offcanvas-backdrop: var(--index-menu);
-$zindex-offcanvas: var(--index-menu);
-$zindex-modal-backdrop: var(--index-overlay);
-$zindex-modal: var(--index-overlay);
-$zindex-popover: var(--index-above);
-$zindex-tooltip: var(--index-above);
-// #endregion
-
-// #region Table
-$td-mw-px: 120;
-$td-mw: #{rem($td-mw-px)};
-$table-padding-px: 32;
-$table-padding: #{rem($table-padding-px)};
-// #endregion
-
-// #region rounded borders
-$vars: map.merge(
-  (
-    --border-radius-sm: 0.25rem,
-    --border-radius: 0.5rem,
-    --border-radius-lg: 1rem,
-    --border-radius-xl: 1.5rem,
-    --border-radius-2xl: 3rem,
-
-  ),
-  $vars
-);
-// #endregion
-
-$vars-responsive: (
-  'sm': (
-    'gutter': 2.5rem,
-    'scale': 1.25,
-  ),
-  'md': (
-    'gutter': 5.25rem,
-    'scale': 1.414,
-  ),
-);
-
-// #region UT vars
-$ut-mh-sm-px: 200;
-$ut-mh-sm: #{rem($ut-mh-sm-px)};
-$ut-mh-md-px: 400;
-$ut-mh-md: #{rem($ut-mh-md-px)};
-$ut-mh-lg-px: 600;
-$ut-mh-lg: #{rem($ut-mh-lg-px)};
-// #endregion
-
-$chart-colour-1: var(--wider-colour-3) !default;
-$chart-colour-2: var(--wider-colour-4) !default;
-$chart-colour-3: var(--wider-colour-5) !default;
-$chart-colour-4: var(--wider-colour-6) !default;
-$chart-colour-5: var(--wider-colour-7) !default;
-$chart-colour-6: var(--wider-colour-8) !default;
-$chart-colour-7: var(--wider-colour-9) !default;
-$chart-colour-8: var(--wider-colour-10) !default;
-$chart-colour-9: var(--wider-colour-11) !default;
-$chart-colour-10: var(--wider-colour-12) !default;
-
-$chart-colors: ();
-$chart-colors: map.merge(
-  (
-    1: $chart-colour-1,
-    2: $chart-colour-2,
-    3: $chart-colour-3,
-    4: $chart-colour-4,
-    5: $chart-colour-5,
-    6: $chart-colour-6,
-    7: $chart-colour-7,
-    8: $chart-colour-8,
-    9: $chart-colour-9,
-    10: $chart-colour-10,
-  ),
-  $chart-colors
-);
+/* Empty */