@use "sass:map";
@use "sass:color";
@use "sass:math";

/* --------------------------------- options -------------------------------- */
$enable-margins: true !default;
$enable-cssgrid: true !default;

/* --------------------------------- colours -------------------------------- */
$white: #fff !default;
$gray-1: #f6f6f7 !default;
$gray-2: #dadadc !default;
$gray-3: #bebfc1 !default;
$gray-4: #a1a3a6 !default;
$gray-5: #85888b !default;
$gray-6: #696c70 !default;
$gray-7: #4d5055 !default;
$gray-8: #30353a !default;
$gray-9: #14191f !default;
$black: #000 !default;
$grays: (
  "gray-1": $gray-1,
  "gray-2": $gray-2,
  "gray-3": $gray-3,
  "gray-4": $gray-4,
  "gray-5": $gray-5,
  "gray-6": $gray-6,
  "gray-7": $gray-7,
  "gray-8": $gray-8,
  "gray-9": $gray-9
) !default;
$blue: #0d6efd !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #d63384 !default;
$red: #dc3545 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
$green: #198754 !default;
$teal: #20c997 !default;
$cyan: #0dcaf0 !default;
$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "white": $white,
  "black": $black
) !default;
$primary: $blue !default;
$secondary: $gray-6 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-1 !default;
$medium: $gray-6 !default;
$dark: $gray-8 !default;
$theme-colors: (
  "primary": $primary,
  "secondary": $secondary,
  "success": $success,
  "info": $info,
  "warning": $warning,
  "danger": $danger,
  "light": $light,
  "medium": $medium,
  "dark": $dark
) !default;
$all-colors: map.merge($colors, $theme-colors) !default;
$color-flip-threshold: 50% !default;
$color-flip-l: 35% !default;
$color-disabled-alpha: 65% !default;

/* ---------------------------------- Misc ---------------------------------- */
$escaped-characters: (("<", "%3c"), (">", "%3e"), ("#", "%23"), ("(", "%28"), (")", "%29")) !default;

/* ----------------------------- spacing & size ----------------------------- */
$spacer: 1rem !default;
$spacers: (
  0: 0,
  1: $spacer * 0.25,
  2: $spacer * 0.5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3
) !default;
$gutters: $spacers !default;
$sizes: (0, 1, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100) !default;

/* ---------------------------------- links --------------------------------- */
$link-shade-percentage: 20% !default;
$link-decoration: none !default;
$link-hover-decoration: underline !default;

/* ---------------------------------- body ---------------------------------- */
$body-background: $white !default;
$html-color: $gray-9 !default;

/* --------------------------------- layout --------------------------------- */
$breakpoints: (
  "none": 0,
  "smallmobile": 320px,
  "mobile": 576px,
  "tablet": 768px,
  "desktop": 1024px,
  "widescreen": 1216px,
  "fullhd": 1408px
) !default;
$container-max-widths: (
  "mobile": 516px,
  "tablet": 708px,
  "desktop": 964px,
  "widescreen": 1156px,
  "fullhd": 1348px
) !default;
$grid-columns: 12 !default;
$grid-gutter: calc($spacer * 1.5) !default;
$grid-gutter-tight: calc($spacer * 0.75) !default;

/* -------------------------------- font size ------------------------------- */
$html-font-size: $spacer !default;

$font-size-xsmall: 0.675em !default;
$font-size-small: 0.875em !default;
$font-size-smaller: 0.85em !default;
$font-size-larger: 1.15em !default;

$font-sizes: (
  "html": $html-font-size,
  "small": $font-size-small,
  "xsmall": $font-size-xsmall,
  "smaller": $font-size-smaller,
  "larger": $font-size-larger
) !default;

$h1-font-size: clamp(calc(#{$html-font-size} * 2), #{$spacer} + 3vw, calc(#{$html-font-size} * 4)) !default;
$h2-font-size: clamp(
  calc(#{$html-font-size} * 1.75),
  calc(#{$spacer} * 0.875) + 2vw,
  calc(#{$html-font-size} * 3)
) !default;
$h3-font-size: clamp(
  calc(#{$html-font-size} * 1.5),
  calc(#{$spacer} * 0.75) + 1.5vw,
  calc(#{$html-font-size} * 2.25)
) !default;
$h4-font-size: clamp(
  calc(#{$html-font-size} * 1.25),
  calc(#{$spacer} * 0.625) + 1vw,
  calc(#{$html-font-size} * 1.75)
) !default;
$h5-font-size: clamp(
  calc(#{$html-font-size} * 1.125),
  calc(#{$spacer} * 0.5625) + 0.5vw,
  calc(#{$html-font-size} * 1.5)
) !default;
$h6-font-size: clamp(#{$html-font-size}, calc(#{$spacer} * 0.5) + 0.25vw, calc(#{$html-font-size} * 1.25)) !default;

$heading-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;

/* ------------------------------- font family ------------------------------ */
$font-family-sans-serif:
  inter,
  -apple-system,
  blinkmacsystemfont,
  "Segoe UI",
  roboto,
  sans-serif !default;
$font-family-serif: cambria, "Hoefler Text", utopia, serif !default;
$font-family-monospace: sfmono-regular, menlo, monaco, consolas, monospace !default;

$html-font-family: $font-family-sans-serif !default;

$font-families: (
  "sans-serif": $font-family-sans-serif,
  "serif": $font-family-serif,
  "monospace": $font-family-monospace
) !default;

$html-line-height: 1.5 !default;

/* ------------------------------- font weight ------------------------------ */
$font-weight-lighter: lighter !default;
$font-weight-bolder: bolder !default;
$font-weight-thin: 100 !default;
$font-weight-light: 300 !default;
$font-weight-regular: 400 !default;
$font-weight-medium: 500 !default;
$font-weight-semibold: 600 !default;
$font-weight-bold: 700 !default;
$font-weight-heavy: 800 !default;
$font-weight-black: 900 !default;
$font-weights: (
  "lighter": $font-weight-lighter,
  "bolder": $font-weight-bolder,
  "thin": $font-weight-thin,
  "light": $font-weight-light,
  "regular": $font-weight-regular,
  "medium": $font-weight-medium,
  "semibold": $font-weight-semibold,
  "bold": $font-weight-bold,
  "heavy": $font-weight-heavy,
  "black": $font-weight-black,
  "100": $font-weight-thin,
  "300": $font-weight-light,
  "400": $font-weight-regular,
  "500": $font-weight-medium,
  "600": $font-weight-semibold,
  "700": $font-weight-bold,
  "800": $font-weight-heavy,
  "900": $font-weight-black
) !default;

/* ------------------------------- typography ------------------------------- */
$text-aligns: (left, right, center, justify) !default;
$text-transforms: (uppercase, lowercase, capitalize, none) !default;
$text-wraps: (normal, nowrap) !default;
$font-styles: (italic, oblique, normal) !default;

/* -------------------------------- headings -------------------------------- */
$headings-font-style: null !default;
$headings-font-weight: $font-weight-bold !default;
$headings-line-height: 1.2 !default;
$headings-color: $html-color !default;

/* --------------------------------- border --------------------------------- */
$border-color-main: $gray-5 !default;
$border-color-hover-main: $gray-6 !default;
$border-color-active-main: $gray-6 !default;
$border-color-focus-main: $gray-6 !default;
$border-color-disabled-main: $gray-5 !default;
$border-shade-percentage: 20% !default;
$border-shade-hover-percentage: 20% !default;
$border-radius-none: 0 !default;
$border-radius-small: calc($spacer * 0.15) !default;
$border-radius-medium: calc($spacer * 0.275) !default;
$border-radius-large: calc($spacer * 0.5) !default;
$border-radius-round: calc($spacer * 99) !default;
$border-radius-default: $border-radius-medium !default;
$border-radii: (
  "none": $border-radius-none,
  "small": $border-radius-small,
  "medium": $border-radius-medium,
  "large": $border-radius-large,
  "round": $border-radius-round,
  "default": $border-radius-default
) !default;

/* ---------------------------------- table --------------------------------- */
$table-cell-padding-y: calc(($spacer * 0.625) - 0.5px) !default;
$table-cell-padding-x: calc($spacer * 0.5) !default;
$table-small-cell-padding-y: calc(($spacer * 0.25) - 1px) !default;
$table-small-cell-padding-x: calc($spacer * 0.5) !default;
$table-cell-border-style: solid !default;
$table-cell-border-width: 1px !default;
$table-cell-valign: top !default;
$table-th-font-weight: null !default;
$table-th-border-width: 2px !default;
$table-background-color: transparent !default;
$table-head-background-color: $light !default;
$table-striped-background-opacity: 4% !default;
$table-caption-color: $medium !default;

/* --------------------------------- z-index -------------------------------- */
$zindex-static: 0 !default;
$zindex-relative: 1 !default;
$zindex-absolute: 1 !default;
$zindex-sticky: 1020 !default;
$zindex-fixed: 1030 !default;
$zindex-dropdown: 1040 !default;
$zindex-modal-backdrop: 1050 !default;
$zindex-modal: 1060 !default;
$zindex-popover: 1070 !default;
$zindex-tooltip: 1080 !default;
$zindexes: (
  "static": $zindex-static,
  "relative": $zindex-relative,
  "absolute": $zindex-absolute,
  "sticky": $zindex-sticky,
  "fixed": $zindex-fixed,
  "dropdown": $zindex-dropdown,
  "modal-backdrop": $zindex-modal-backdrop,
  "modal": $zindex-modal,
  "popover": $zindex-popover,
  "tooltip": $zindex-tooltip
) !default;

/* --------------------------------- shadow --------------------------------- */
$box-shadow-small: 0 calc($spacer * 0.125) calc($spacer * 0.25) hsl(from var(--dark) h s l / 7.5%) !default;
$box-shadow-medium: 0 calc($spacer * 0.5) calc($spacer * 0.75) hsl(from var(--dark) h s l / 15%) !default;
$box-shadow-large: 0 $spacer calc($spacer * 2.5) hsl(from var(--dark) h s l / 17.5%) !default;
$box-shadows: (
  "small": $box-shadow-small,
  "medium": $box-shadow-medium,
  "large": $box-shadow-large
) !default;

/* ---------------------------------- embed --------------------------------- */
$embeds: (
  "32by9": 28.125%,
  "21by9": 42.8571%,
  "16by9": 56.25%,
  "4by3": 75%,
  "1by1": 100%
) !default;

/* ---------------------------------- forms --------------------------------- */
$form-select-indicator-color: $html-color !default;
$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>") !default;
$list-nested-indicator-color: hsl(from var(--html-color) h s l / 25%) !default;
$list-nested-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#{$list-nested-indicator-color}' stroke='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 15l-6 6-1.42-1.42L15.17 16H4V4h2v10h9.17l-3.59-3.58L13 9l6 6z'/></svg>") !default;
$form-file-indicator-color: hsl(from var(--html-color) h s l / 25%) !default;
$form-file-indicator-hover-color: hsl(from var(--html-color) h s l / 50%) !default;
$form-file-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#{$form-file-indicator-color}' stroke='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z'/></svg>") !default;
$form-file-indicator-hover: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#{$form-file-indicator-hover-color}' stroke='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z'/></svg>") !default;
$form-transition:
  color 0.15s ease-in-out,
  background-color 0.15s ease-in-out,
  border-color 0.15s ease-in-out,
  box-shadow 0.15s ease-in-out;

// Labels
$label-display: block !default;
$label-padding: 0 0 calc($spacer * 0.25) !default;
$label-margin: 0 !default;
$label-font-weight: $font-weight-medium !default;
$label-text-transform: none !default;
$label-font-size: $html-font-size !default;
$label-color: $html-color !default;

// inputs buttons
$input-button-font-size: $html-font-size !default;
$input-button-large-font-size: $h4-font-size !default;
$input-button-small-font-size: $font-size-small !default;
$input-button-line-height: $html-line-height !default;
$input-button-padding-y: calc($spacer * 0.375) !default;
$input-button-padding-x: calc($spacer * 0.75) !default;
$input-button-large-padding-y: calc($spacer * 0.5) !default;
$input-button-large-padding-x: calc($spacer * 1.25) !default;
$input-button-small-padding-y: calc($spacer * 0.25) !default;
$input-button-small-padding-x: calc($spacer * 0.5) !default;
$input-button-border-radius: $border-radius-medium !default;
$input-button-large-border-radius: $border-radius-large !default;
$input-button-small-border-radius: $border-radius-small !default;
$input-button-round-border-radius: $border-radius-round !default;

// Input
$input-font-weight: $font-weight-regular !default;
$input-font-size: $input-button-font-size !default;
$input-large-font-size: $input-button-large-font-size !default;
$input-small-font-size: $input-button-small-font-size !default;
$input-line-height: $input-button-line-height !default;
$input-padding-y: $input-button-padding-y !default;
$input-padding-x: $input-button-padding-x !default;
$input-small-padding-y: $input-button-small-padding-y !default;
$input-small-padding-x: $input-button-small-padding-x !default;
$input-large-padding-y: $input-button-large-padding-y !default;
$input-large-padding-x: $input-button-large-padding-x !default;
$input-white-space: nowrap !default;
$input-border-radius: $input-button-border-radius !default;
$input-large-border-radius: $input-button-large-border-radius !default;
$input-small-border-radius: $input-button-small-border-radius !default;
$input-round-border-radius: $input-button-round-border-radius !default;

// Button
$button-font-weight: $font-weight-regular !default;
$button-font-size: $input-button-font-size !default;
$button-large-font-size: $input-button-large-font-size !default;
$button-small-font-size: $input-button-small-font-size !default;
$button-line-height: $input-button-line-height !default;
$button-padding-y: $input-button-padding-y !default;
$button-padding-x: $input-button-padding-x !default;
$button-large-padding-y: $input-button-large-padding-y !default;
$button-large-padding-x: $input-button-large-padding-x !default;
$button-small-padding-y: $input-button-small-padding-y !default;
$button-small-padding-x: $input-button-small-padding-x !default;
$button-white-space: nowrap !default;
$button-border-radius: $input-button-border-radius !default;
$button-large-border-radius: $input-button-large-border-radius !default;
$button-small-border-radius: $input-button-small-border-radius !default;
$button-round-border-radius: $input-button-round-border-radius !default;
$button-color-flip-threshold: 60% !default;
$button-color-flip-l: 35% !default;
$button-disabled-border-alpha: 50% !default;
$button-hover-background-alpha: 10% !default;
$button-outline-background: #fff !default;

/* ---------------------------------- close --------------------------------- */
$close-indicator-color: $white !default;
$close-indicator-color-light: $dark !default;
$close-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path fill='#{$close-indicator-color}' d='M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z'/></svg>") !default;
$close-indicator-light: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path fill='#{$close-indicator-color-light}' d='M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z'/></svg>") !default;
$close-background-color: $gray-5 !default;
$close-background-color-light: $gray-1 !default;
$close-hover-indicator-color: $white !default;
$close-hover-indicator-color-light: $dark !default;
$close-hover-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path fill='#{$close-hover-indicator-color}' d='M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z'/></svg>") !default;
$close-hover-indicator-light: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path fill='#{$close-hover-indicator-color-light}' d='M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z'/></svg>") !default;
$close-hover-background-color: $gray-6 !default;
$close-hover-background-color-light: $gray-2 !default;
$close-height: calc($spacer * 1.5) !default;
$close-width: calc($spacer * 1.5) !default;
$close-small-height: calc($spacer * 1) !default;
$close-small-width: calc($spacer * 1) !default;
$close-large-height: calc($spacer * 2) !default;
$close-large-width: calc($spacer * 2) !default;
$close-border-radius: $border-radius-round !default;

/* ---------------------------------- card ---------------------------------- */
$card-header-footer-padding-y: calc($input-button-padding-y - 0.5px) !default;
$card-header-footer-padding-x: $spacer !default;
$card-body-padding-y: $spacer !default;
$card-body-padding-x: $spacer !default;

/* ---------------------------------- tile ---------------------------------- */
$tile-header-footer-padding-y: calc($input-button-padding-y - 0.5px) !default;
$tile-header-footer-padding-x: $spacer !default;
$tile-body-padding-y: $spacer !default;
$tile-body-padding-x: $spacer !default;

/* ----------------------------------- nav ---------------------------------- */
$nav-item-padding-y: $input-button-padding-y !default;
$nav-item-padding-x: $input-button-padding-x !default;
$nav-item-line-height: $input-button-line-height !default;

/* ------------------------------- breadcrumbs ------------------------------ */
$breadcrumb-color: $medium !default;
$breadcrumb-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'><path fill='#{$breadcrumb-color}' d='M89.45 87.5l143.1 152c4.375 4.625 6.562 10.56 6.562 16.5c0 5.937-2.188 11.87-6.562 16.5l-143.1 152C80.33 434.1 65.14 434.5 55.52 425.4c-9.688-9.125-10.03-24.38-.9375-33.94l128.4-135.5l-128.4-135.5C45.49 110.9 45.83 95.75 55.52 86.56C65.14 77.47 80.33 77.87 89.45 87.5z'/></svg>") !default;

/* ---------------------------------- modal --------------------------------- */
$modal-open-background: hsl(from var(--dark) h s l / 50%) !default;
$modal-background-blur: 4px !default;

/* ---------------------------------- alert --------------------------------- */
$alert-color-l: 20% !default;
$alert-background-l: 80% !default;
$alert-border-l: 20% !default;

/* ---------------------------------- pills --------------------------------- */
$pill-color-flip-threshold: 54% !default;
$pill-color-flip-l: 35% !default;
$pill-padding-x: calc($spacer * 0.25) !default;
$pill-padding-y: calc(($spacer * 0.125) - 1px) !default;
$pill-font-weight: 600 !default;
$pill-font-size: $font-size-small !default;

/* ---------------------------------- tags ---------------------------------- */
$tag-color-flip-threshold: 54% !default;
$tag-color-flip-l: 60% !default;
$tag-padding-x: calc($spacer * 0.5) !default;
$tag-padding-y: calc($spacer * 0.25) !default;
$tag-font-weight: 400 !default;
$tag-font-size: $font-size-small !default;

/* --------------------------------- details -------------------------------- */
$details-transition: height 500ms ease;