@intility/bifrost-css/dist/bifrost-bundle.css

@charset "UTF-8";
/* global bifrost css, included in both @intility/bifrost-react and @intility/bifrost-css packages */
:root {
  --bf-underline-offset: 0.214em;
  --font-satoshi: "Satoshi";
  --font-open-sans: "Open Sans";
}

html {
  /* prevent nav top bar from obscuring top section of an element scrolled to when using a url hash */
  scroll-padding-top: calc(var(--bf-nav-top-height) + var(--bfs24));
  /* first value: thumb color, second value: track color */
  scrollbar-color: var(--bfc-base-dimmed) var(--bfc-base-3);
}

body {
  line-height: 1.5;
  margin: 0;
  scrollbar-color: var(--bfc-base-dimmed) transparent;
  /* Eirik's mac hack */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Prevent font scaling for mobile devices in landscape orientation.
  prefix needed for Safari on iOS and Firefox on Android */
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-text-size-adjust: none;
}

/* separate selector to confuse css minifiers that erroneously remove the
required webkit prefix above for Safari on iOS and Firefox on Android */
/* stylelint-disable-next-line no-duplicate-selectors */
body {
  text-size-adjust: none;
}

body,
.bf-options {
  display: flow-root;
  color: var(--bfc-base-c);
  background-color: var(--bfc-base);
  /* todo: remove `vh` fallback when browser support for `dvh` is better */
  min-height: 100vh;
  /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
  min-height: 100dvh;
}

/* normalize native html inputs */
button,
input,
optgroup,
select,
textarea {
  /* prevent inputs and buttons from inheriting font-feature-settings
  while still defaulting to arial on windows */
  font-family: inherit;
  font-weight: inherit;
  font-size: 100%;
  line-height: inherit;
  margin: 0;
}

/* disable all transitions, used for temporarily disabling color transitions
while changing theme */
.bf-no-transitions,
.bf-no-transitions * {
  transition: none !important;
}

/* padding for devices with a 'notch' a.k.a. 'busslomme' */
.bf-nav ~ main,
.bf-nav-main,
.bf-main,
.bf-notch {
  padding-right: env(safe-area-inset-right);
  padding-left: env(safe-area-inset-left);
}

/* a negative margin enables content inside main to stretch full width */
.bf-negative-notch {
  margin-right: calc(0px - env(safe-area-inset-right));
  margin-left: calc(0px - env(safe-area-inset-left));
}

/* Scrollbar */
.bf-scrollbar-small,
.bf-dropdown-content {
  scrollbar-width: thin;
}

@media (prefers-reduced-motion: no-preference) {
  html,
  .bf-scrollbar,
  .bf-scrollbar-small {
    scroll-behavior: smooth;
  }
}
@media (min-width: 600px) and (min-height: 600px) {
  /* ::-webkit-scrollbar-* css is overridden by `scrollbar-color` in all browsers except Safari.
  todo: remove when Safari adds support for scrollbar-color https://bugs.webkit.org/show_bug.cgi?id=231590 */
  :is(.bf-scrollbar,
  .bf-scrollbar-small,
  .bf-dropdown-content)::-webkit-scrollbar {
    height: 18px;
    width: 18px;
    background-color: transparent;
  }
  :is(.bf-scrollbar,
  .bf-scrollbar-small,
  .bf-dropdown-content)::-webkit-scrollbar-corner {
    background-color: transparent;
  }
  :is(.bf-scrollbar,
  .bf-scrollbar-small,
  .bf-dropdown-content)::-webkit-scrollbar-thumb {
    height: 30px;
    width: 30px;
    border: 4px solid transparent;
    background-color: var(--bfc-base-dimmed);
    background-clip: padding-box;
    border-radius: var(--bf-radius-full);
  }
  :is(html, body).bf-scrollbar:is(::-webkit-scrollbar,
  ::-webkit-scrollbar-corner) {
    background-color: var(--bfc-base-3);
  }
  /* small chrome scrollbar */
  .bf-scrollbar-small::-webkit-scrollbar,
  .bf-dropdown-content::-webkit-scrollbar {
    width: 14px;
    height: 14px;
  }
  :where(.bf-textarea, .bf-scrollbar, .bf-scrollbar-small)::-webkit-resizer {
    background-color: transparent;
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cline%20x1%3D%2211%22%20y1%3D%228%22%20x2%3D%228%22%20y2%3D%2211%22%20style%3D%22fill%3Anone%3B%20stroke%3Agray%3B%20stroke-linecap%3Around%3B%22%2F%3E%3Cline%20x1%3D%2211%22%20y1%3D%224.4%22%20x2%3D%224.4%22%20y2%3D%2211%22%20style%3D%22fill%3Anone%3B%20stroke%3Agray%3B%20stroke-linecap%3Around%3B%22%2F%3E%3Cpath%20d%3D%22M11%2C1L1%2C11%22%20style%3D%22fill%3Anone%3B%20stroke%3Agray%3B%20stroke-linecap%3Around%3B%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: center;
  }
}
.bf-break-word {
  overflow-wrap: break-word;
  hyphens: auto;
  /* Firefox re-renders fonts when not specifying this??? */
  hyphenate-character: "-";
}

.bf-content,
.bf-elements {
  font-size: var(--bf-font-size-m);
}

:where(.bf-content, .bf-elements) p,
.bf-p {
  font-size: var(--bf-font-size-m);
  margin: 0;
}

:where(.bf-content) p {
  margin: var(--bfs16) 0;
}

:where(.bf-elements) pre,
.bf-pre {
  margin: 0;
}

/* link, title-link, and neutral-link styles */
.bf-link:is(:hover, :active),
:where(.bf-content, .bf-elements) a:is(:hover, :active) {
  text-decoration-thickness: 0.142em;
  text-decoration-style: solid;
}

:where(.bf-content, .bf-elements) a,
.bf-link {
  cursor: pointer;
  color: var(--bfc-base-c-theme);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-underline-offset: var(--bf-underline-offset);
  text-decoration-thickness: 0.0714em;
}

.bf-title-link {
  color: var(--bfc-base-c-theme);
  text-decoration-line: none;
  cursor: pointer;
}

.bf-title-link:is(:hover, :active) {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-underline-offset: var(--bf-underline-offset);
}

.bf-neutral-link,
.bf-neutral-link:hover {
  color: inherit;
  text-decoration-line: none;
}

.bf-neutral-link:hover:where(:not(:disabled)) .bf-neutral-link-text {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-underline-offset: var(--bf-underline-offset);
}

/* link styling for buttons */
:where(button):is(.bf-link, .bf-title-link, .bf-neutral-link) {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: none;
  text-align: inherit;
}

button:is(.bf-link):disabled {
  text-decoration-line: underline;
}

button:is(.bf-link, .bf-title-link, .bf-neutral-link):disabled {
  text-decoration-line: none;
  cursor: default;
}

/* focus state */
:where(.bf-link, .bf-title-link):focus,
:where(.bf-content, .bf-elements) a:where(:focus) {
  outline: none;
}

:where(.bf-link, .bf-title-link, .bf-neutral-link):focus-visible,
:where(.bf-content, .bf-elements) a:where(:focus-visible) {
  outline: 2px dotted currentcolor;
  outline-offset: 2px;
  -moz-outline-radius: var(--bf-radius-xs);
  border-radius: var(--bf-radius-xs);
}

/* open sans helper class and default for body */
body,
.bf-open-sans {
  font-family: "Open Sans", "Segoe UI", sans-serif;
  font-family: var(--font-open-sans, "Open Sans"), "Open Sans", "Segoe UI", sans-serif;
  font-feature-settings: normal;
}

/* all things satoshi */
.bf-satoshi,
.bf-drawer-header,
.bf-modal-header,
.bf-nav-logo-name,
.bf-h1,
.bf-h2,
.bf-h3,
.bf-h4,
.bf-h5,
.bf-h6,
:where(.bf-content, .bf-elements) :is(h1, h2, h3, h4, h5, h6) {
  /* on windows, sans-serif is the same as 'Arial'
  which mis-renders badly with these font-feature-settings,
  so we use Segoe UI as backup font instead */
  font-family: Satoshi, "Segoe UI", sans-serif;
  font-family: var(--font-satoshi, Satoshi), Satoshi, "Segoe UI", sans-serif;
  font-feature-settings: "ss02", "ss03", "ss04", "liga" 0;
}

/* headings */
:where(.bf-content, .bf-elements) h1,
.bf-h1 {
  font-size: var(--bf-font-size-h1);
  font-weight: 660;
  line-height: 1.26;
  margin: 0;
}

:where(.bf-content) h1 {
  margin-top: var(--bfs32);
  margin-bottom: var(--bfs12);
}

:where(.bf-content, .bf-elements) h2,
.bf-h2 {
  font-size: var(--bf-font-size-h2);
  font-weight: 660;
  line-height: 1.36;
  margin: 0;
}

:where(.bf-content) h2 {
  margin-top: var(--bfs32);
  margin-bottom: var(--bfs8);
}

:where(.bf-content, .bf-elements) h3,
.bf-h3 {
  font-size: var(--bf-font-size-h3);
  font-weight: 700;
  line-height: 1.39;
  margin: 0;
}

:where(.bf-content) h3 {
  margin-top: var(--bfs32);
  margin-bottom: var(--bfs8);
}

:where(.bf-content, .bf-elements) h4,
.bf-h4 {
  font-size: var(--bf-font-size-h4);
  font-weight: 720;
  line-height: 1.47;
  margin: 0;
}

:where(.bf-content) h4 {
  margin-top: var(--bfs24);
  margin-bottom: var(--bfs8);
}

:where(.bf-content, .bf-elements) h5,
.bf-h5 {
  font-size: var(--bf-font-size-h5);
  font-weight: 740;
  line-height: 1.36;
  margin: 0;
}

:where(.bf-content) h5 {
  margin-top: var(--bfs16);
  margin-bottom: var(--bfs16);
}

:where(.bf-content, .bf-elements) small,
.bf-small {
  font-size: var(--bf-font-size-s);
}

.bf-medium {
  font-size: var(--bf-font-size-m);
}

:where(.bf-content, .bf-elements) big,
.bf-large {
  font-size: var(--bf-font-size-l);
}

:where(.bf-content, .bf-elements) code,
.bf-code {
  font-family: Consolas, monospace;
  background-color: hsla(var(--bfc-base-c-inverted-hsl), 0.1);
  padding: 0 0.2rem;
  margin: 0 0.1rem;
  border-radius: var(--bf-radius-xs);
}

:where(.bf-content, .bf-elements) pre code {
  display: inline-block;
}

:where(.bf-content, .bf-elements) a code,
a .bf-code {
  color: inherit;
  text-decoration-line: inherit;
  text-decoration-style: inherit;
}

.bf-em {
  font-style: italic;
}

:where(.bf-content, .bf-elements) :is(b, strong),
.bf-strong {
  font-weight: 600;
}

/* list styling */
:where(.bf-content, .bf-elements) :is(ul, ol),
.bf-ul,
.bf-ol {
  padding-left: var(--bfs24);
  margin: 0;
}

:where(.bf-content) :is(ul, ol) {
  margin: var(--bfs16) 0;
}

:where(.bf-content, .bf-elements) :is(ul, ol) ::marker,
:is(.bf-ul, .bf-ol) ::marker {
  color: var(--bfc-base-c-theme);
}

:where(.bf-content, .bf-elements) ol ::marker,
.bf-ol ::marker {
  font-weight: 600;
}

:is(.bf-ul, .bf-ol) :where(li),
.bf-li,
.bf-toc :where(li) {
  margin: 0;
}

/* 8px spacing between list items. try to keep specificity consistent
 * (0,0,1 for .bf-elements and .bf-content, and 0,1,0 for other classes) */
:where(.bf-content, .bf-elements) li + :where(li),
:is(.bf-ul, .bf-ol) :where(li + li),
.bf-li + :where(.bf-li),
.bf-toc :where(li + li) {
  margin-top: 8px;
}

/* nested lists */
:where(.bf-content, .bf-elements) li :is(ul, ol),
:is(.bf-ul, .bf-ol) :where(ul, ol) {
  margin: 8px 0 0;
}

/* #region Table of contents */
/* first level */
.bf-toc {
  padding: 0;
  margin: 0;
}

.bf-toc li {
  position: relative;
  list-style: none;
}

/* second level */
.bf-toc :is(ul, ol) {
  margin: 8px 0 0;
  padding: 0;
}

.bf-toc :is(ul, ol) li {
  padding-left: 1.5rem;
}

.bf-toc :is(ul, ol) li::before {
  content: "¬"; /* '¬' supported by open sans */
  position: absolute;
  left: 6px;
  color: var(--bfc-base-c-2);
  rotate: 180deg;
  scale: 1.3;
  transform-origin: 50% 53%;
}

/* third level */
.bf-toc :is(ul, ol) :is(ul, ol) li::before {
  content: "−"; /* '−' supported by open sans (slightly longer than a dash '-') */
  rotate: unset;
}

/* #endregion */
/* todo: remove in 7.0 */
.bf-intility-logo > a {
  height: var(--bfs56);
  border-bottom: var(--bf-border);
  display: block;
  line-height: 1;
  cursor: pointer;
}

/* todo: remove in 7.0 */
.bf-intility-logo > a:focus-visible {
  outline: 1px dashed var(--bfc-theme);
  outline-offset: -1px;
}

/* todo: remove in 7.0 */
.bf-intility-logo svg {
  margin: 17px 19px 0;
  height: var(--bfs24);
  fill: var(--bfc-base-c);
}

/* #region highlight header with id matching hash from current url */
.bf-highlight-target :target:is(h1, h2, h3, h4, h5, h6) {
  animation: bf-highlight-target-scale 0.6s 3, bf-highlight-target-color 12s 1;
  transform-origin: 20% 50%;
}

@keyframes bf-highlight-target-scale {
  50% {
    scale: 0.99;
  }
}
@keyframes bf-highlight-target-color {
  0% {
    color: var(--bfc-base-c-theme);
  }
}
/* #endregion */
/* #region recharts accessibilityLayer focus outline */
.recharts-surface:focus,
.recharts-layer:focus {
  outline: none;
}

.recharts-surface:focus-visible,
.recharts-layer:focus-visible {
  border-radius: var(--bf-radius-xs);
  outline: 2px dotted var(--bfc-base-c);
  outline-offset: 2px;
  position: relative;
  z-index: 1;
}

/* #endregion */
/* #region loading stripes overlay */
.bf-loading-stripes {
  position: relative;
  overflow: hidden;
}

.bf-loading-stripes::after {
  inset: 0;
  content: "";
  position: absolute;
  background-image: linear-gradient(-45deg, black 25%, white 25%, white 50%, black 50%, black 75%, white 75%);
  background-size: 50px 50px;
  animation: loading-stripes 2s linear infinite;
  width: calc(100% + 100px);
  opacity: 0.1;
}

@keyframes loading-stripes {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50px, 0, 0);
  }
}
/* #endregion */
/* #region teal theme (default) */
/* #endregion */
:root,
::backdrop {
  --bfc-overlay: rgba(0, 0, 0, 0.7);
  --bfc-overlay-c: white;
}

html,
.bf-darkmode,
[data-bf-color-mode=dark] {
  color-scheme: only dark;
  --bf-mode: dark;
  --bfc-base-hsl: 212, 70%, 9%;
  --bfc-base-2-hsl: 210, 64%, 11%;
  --bfc-base-3-hsl: 210, 55%, 13%;
  --bfc-base-c-hsl: 240, 14%, 96%;
  --bfc-base-c-2: hsl(212, 15%, 60%);
  --bfc-base-c-success: hsl(157, 100%, 48%);
  --bfc-base-c-warning: var(--bfc-warning);
  --bfc-base-c-alert: hsl(7, 100%, 60%);
  --bfc-base-c-wcag: hsl(220, 10%, 43%);
  --bfc-base-c-disabled: hsl(212, 18%, 35%);
  --bfc-base-dimmed-hsl: 212, 29%, 20%;
  --bfc-base-dimmed-2-hsl: 210, 39%, 17%;
  --bfc-base-dimmed-3-hsl: 210, 29%, 22%;
  --bfc-base-disabled-hsl: 212, 22%, 34%;
  --bfc-base-c-inverted-hsl: 0, 0%, 100%;
  --bfc-base-c-inverted-2: hsl(235, 16%, 85%);
  --bfc-base-c-inverted-3: hsl(216, 7%, 86%);
  --bfc-neutral-hsl: var(--gray-100-hsl);
  --bfc-neutral-2-hsl: var(--gray-50-hsl);
  --bfc-neutral-c-hsl: var(--gray-800-hsl);
  --bfc-neutral-hc: var(--gray-920);
  --bfc-neutral-fade-hsl: var(--gray-800-hsl);
  --bfc-neutral-fade-c-hsl: var(--gray-100-hsl);
  --bfc-brand-hsl: var(--teal-300-hsl);
  --bfc-brand-c-hsl: var(--teal-800-hsl);
  --bfc-brand-hc: var(--base-920);
  --bfc-brand-fade-hsl: var(--teal-800-hsl);
  --bfc-brand-fade-c-hsl: var(--teal-300-hsl);
  --bfc-chill-hsl: var(--purple-300-hsl);
  --bfc-chill-c-hsl: var(--purple-800-hsl);
  --bfc-chill-hc: var(--base-920);
  --bfc-chill-fade-hsl: var(--purple-800-hsl);
  --bfc-chill-fade-c-hsl: var(--purple-300-hsl);
  --bfc-attn-hsl: var(--pink-300-hsl);
  --bfc-attn-c-hsl: var(--pink-800-hsl);
  --bfc-attn-hc: var(--base-920);
  --bfc-attn-fade-hsl: var(--pink-800-hsl);
  --bfc-attn-fade-c-hsl: var(--pink-300-hsl);
  --bfc-success-hsl: 157, 100%, 48%;
  --bfc-success-c-hsl: 157, 100%, 10%;
  --bfc-success-hc: var(--base-920);
  --bfc-success-fade-hsl: 157, 100%, 23%;
  --bfc-success-fade-c-hsl: 157, 100%, 80%;
  --bfc-warning-fade-hsl: var(--yellow-800-hsl);
  --bfc-warning-fade-c-hsl: var(--yellow-300-hsl);
  --bfc-alert-fade-hsl: 346, 26%, 23%;
  --bfc-alert-fade-2: hsl(7, 100%, 13%);
  --bfc-alert-fade-c-hsl: 7, 100%, 70%;
  --bfc-alert-fade-2-c-hsl: 7, 100%, 70%;
  --bfc-shadow: rgba(0, 0, 0, 0.3);
  --bfc-theme-hsl: var(--teal-300-hsl);
  --bfc-theme-2: hsl(var(--teal-250-hsl));
  --bfc-theme-3: hsl(var(--teal-200-hsl));
  --bfc-theme-c-hsl: var(--teal-800-hsl);
  --bfc-theme-c-2-hsl: var(--teal-890-hsl);
  --bfc-theme-hc: var(--base-920);
  --bfc-theme-fade-hsl: var(--teal-800-hsl);
  --bfc-theme-fade-c-hsl: var(--teal-300-hsl);
}

.bf-lightmode,
[data-bf-color-mode=light] {
  color-scheme: only light;
  --bf-mode: light;
  --bfc-base-hsl: 238, 15%, 96%;
  --bfc-base-2-hsl: 238, 10%, 98%;
  --bfc-base-3-hsl: 0, 0%, 100%;
  --bfc-base-c-hsl: 212, 70%, 9%;
  --bfc-base-c-2: hsl(238, 16%, 40%);
  --bfc-base-c-success: hsl(157, 100%, 24%);
  --bfc-base-c-warning: var(--yellow-570);
  --bfc-base-c-alert: hsl(7, 77%, 41%);
  --bfc-base-c-wcag: hsl(240, 5%, 57%);
  --bfc-base-c-disabled: hsl(238, 18%, 65%);
  --bfc-base-dimmed-hsl: 238, 16%, 85%;
  --bfc-base-dimmed-2-hsl: 216, 7%, 86%;
  --bfc-base-dimmed-3-hsl: 210, 7%, 77%;
  --bfc-base-disabled-hsl: 238, 18%, 65%;
  --bfc-base-c-inverted-hsl: 210, 55%, 13%;
  --bfc-base-c-inverted-2: hsl(212, 29%, 26%);
  --bfc-base-c-inverted-3: hsl(210, 39%, 17%);
  --bfc-neutral-hsl: var(--gray-920-hsl);
  --bfc-neutral-2-hsl: var(--gray-970-hsl);
  --bfc-neutral-c-hsl: var(--gray-150-hsl);
  --bfc-neutral-hc: white;
  --bfc-neutral-fade-hsl: var(--gray-150-hsl);
  --bfc-neutral-fade-c-hsl: var(--gray-920-hsl);
  --bfc-brand-hsl: var(--teal-570-hsl);
  --bfc-brand-c-hsl: var(--teal-120-hsl);
  --bfc-brand-hc: white;
  --bfc-brand-fade-hsl: var(--teal-120-hsl);
  --bfc-brand-fade-c-hsl: var(--teal-570-hsl);
  --bfc-chill-hsl: var(--purple-570-hsl);
  --bfc-chill-c-hsl: var(--purple-120-hsl);
  --bfc-chill-hc: white;
  --bfc-chill-fade-hsl: var(--purple-120-hsl);
  --bfc-chill-fade-c-hsl: var(--purple-570-hsl);
  --bfc-attn-hsl: var(--pink-570-hsl);
  --bfc-attn-c-hsl: var(--pink-120-hsl);
  --bfc-attn-hc: white;
  --bfc-attn-fade-hsl: var(--pink-120-hsl);
  --bfc-attn-fade-c-hsl: var(--pink-570-hsl);
  --bfc-success-hsl: 157, 100%, 48%;
  --bfc-success-c-hsl: 157, 100%, 10%;
  --bfc-success-hc: var(--base-920);
  --bfc-success-fade-hsl: 144, 100%, 82%;
  --bfc-success-fade-c-hsl: 144, 100%, 20%;
  --bfc-warning-fade-hsl: var(--yellow-120-hsl);
  --bfc-warning-fade-c-hsl: var(--yellow-570-hsl);
  --bfc-alert-fade-hsl: 8, 100%, 94%;
  --bfc-alert-fade-2: hsl(7, 100%, 95%);
  --bfc-alert-fade-c-hsl: 7, 77%, 41%;
  --bfc-alert-fade-2-c-hsl: 7, 100%, 40%;
  --bfc-shadow: rgba(0, 0, 0, 0.1);
  --bfc-theme-hsl: var(--teal-570-hsl);
  --bfc-theme-2: hsl(var(--teal-620-hsl));
  --bfc-theme-3: hsl(var(--teal-660-hsl));
  --bfc-theme-c-hsl: var(--teal-120-hsl);
  --bfc-theme-c-2-hsl: var(--teal-100-hsl);
  --bfc-theme-hc: white;
  --bfc-theme-fade-hsl: var(--teal-120-hsl);
  --bfc-theme-fade-c-hsl: var(--teal-570-hsl);
}

@media (prefers-color-scheme: light) {
  html {
    color-scheme: only light;
    --bf-mode: light;
    --bfc-base-hsl: 238, 15%, 96%;
    --bfc-base-2-hsl: 238, 10%, 98%;
    --bfc-base-3-hsl: 0, 0%, 100%;
    --bfc-base-c-hsl: 212, 70%, 9%;
    --bfc-base-c-2: hsl(238, 16%, 40%);
    --bfc-base-c-success: hsl(157, 100%, 24%);
    --bfc-base-c-warning: var(--yellow-570);
    --bfc-base-c-alert: hsl(7, 77%, 41%);
    --bfc-base-c-wcag: hsl(240, 5%, 57%);
    --bfc-base-c-disabled: hsl(238, 18%, 65%);
    --bfc-base-dimmed-hsl: 238, 16%, 85%;
    --bfc-base-dimmed-2-hsl: 216, 7%, 86%;
    --bfc-base-dimmed-3-hsl: 210, 7%, 77%;
    --bfc-base-disabled-hsl: 238, 18%, 65%;
    --bfc-base-c-inverted-hsl: 210, 55%, 13%;
    --bfc-base-c-inverted-2: hsl(212, 29%, 26%);
    --bfc-base-c-inverted-3: hsl(210, 39%, 17%);
    --bfc-neutral-hsl: var(--gray-920-hsl);
    --bfc-neutral-2-hsl: var(--gray-970-hsl);
    --bfc-neutral-c-hsl: var(--gray-150-hsl);
    --bfc-neutral-hc: white;
    --bfc-neutral-fade-hsl: var(--gray-150-hsl);
    --bfc-neutral-fade-c-hsl: var(--gray-920-hsl);
    --bfc-brand-hsl: var(--teal-570-hsl);
    --bfc-brand-c-hsl: var(--teal-120-hsl);
    --bfc-brand-hc: white;
    --bfc-brand-fade-hsl: var(--teal-120-hsl);
    --bfc-brand-fade-c-hsl: var(--teal-570-hsl);
    --bfc-chill-hsl: var(--purple-570-hsl);
    --bfc-chill-c-hsl: var(--purple-120-hsl);
    --bfc-chill-hc: white;
    --bfc-chill-fade-hsl: var(--purple-120-hsl);
    --bfc-chill-fade-c-hsl: var(--purple-570-hsl);
    --bfc-attn-hsl: var(--pink-570-hsl);
    --bfc-attn-c-hsl: var(--pink-120-hsl);
    --bfc-attn-hc: white;
    --bfc-attn-fade-hsl: var(--pink-120-hsl);
    --bfc-attn-fade-c-hsl: var(--pink-570-hsl);
    --bfc-success-hsl: 157, 100%, 48%;
    --bfc-success-c-hsl: 157, 100%, 10%;
    --bfc-success-hc: var(--base-920);
    --bfc-success-fade-hsl: 144, 100%, 82%;
    --bfc-success-fade-c-hsl: 144, 100%, 20%;
    --bfc-warning-fade-hsl: var(--yellow-120-hsl);
    --bfc-warning-fade-c-hsl: var(--yellow-570-hsl);
    --bfc-alert-fade-hsl: 8, 100%, 94%;
    --bfc-alert-fade-2: hsl(7, 100%, 95%);
    --bfc-alert-fade-c-hsl: 7, 77%, 41%;
    --bfc-alert-fade-2-c-hsl: 7, 100%, 40%;
    --bfc-shadow: rgba(0, 0, 0, 0.1);
    --bfc-theme-hsl: var(--teal-570-hsl);
    --bfc-theme-2: hsl(var(--teal-620-hsl));
    --bfc-theme-3: hsl(var(--teal-660-hsl));
    --bfc-theme-c-hsl: var(--teal-120-hsl);
    --bfc-theme-c-2-hsl: var(--teal-100-hsl);
    --bfc-theme-hc: white;
    --bfc-theme-fade-hsl: var(--teal-120-hsl);
    --bfc-theme-fade-c-hsl: var(--teal-570-hsl);
  }
  html:not(.bf-darkmode, [data-bf-color-mode=dark]) .bf-dark-only {
    display: none !important;
  }
}
@media (prefers-color-scheme: dark) {
  html:not(.bf-lightmode, [data-bf-color-mode=light]) .bf-light-only {
    display: none !important;
  }
}
html:is(.bf-darkmode, [data-bf-color-mode=dark]) .bf-light-only,
html:is(.bf-lightmode, [data-bf-color-mode=light]) .bf-dark-only {
  display: none !important;
}

.bf-theme-teal,
.bf-theme-teal.bf-darkmode,
.bf-darkmode .bf-theme-teal,
[data-bf-color-mode=dark] .bf-theme-teal,
.bf-lightmode .bf-darkmode .bf-theme-teal {
  --bfc-theme-hsl: var(--teal-300-hsl);
  --bfc-theme-2: hsl(var(--teal-250-hsl));
  --bfc-theme-3: hsl(var(--teal-200-hsl));
  --bfc-theme-c-hsl: var(--teal-800-hsl);
  --bfc-theme-c-2-hsl: var(--teal-890-hsl);
  --bfc-theme-hc: var(--base-920);
  --bfc-theme-fade-hsl: var(--teal-800-hsl);
  --bfc-theme-fade-c-hsl: var(--teal-300-hsl);
}

.bf-theme-teal.bf-lightmode,
.bf-lightmode .bf-theme-teal,
[data-bf-color-mode=light] .bf-theme-teal,
.bf-darkmode .bf-lightmode .bf-theme-teal {
  --bfc-theme-hsl: var(--teal-570-hsl);
  --bfc-theme-2: hsl(var(--teal-620-hsl));
  --bfc-theme-3: hsl(var(--teal-660-hsl));
  --bfc-theme-c-hsl: var(--teal-120-hsl);
  --bfc-theme-c-2-hsl: var(--teal-100-hsl);
  --bfc-theme-hc: white;
  --bfc-theme-fade-hsl: var(--teal-120-hsl);
  --bfc-theme-fade-c-hsl: var(--teal-570-hsl);
}

@media (prefers-color-scheme: light) {
  .bf-theme-teal {
    --bfc-theme-hsl: var(--teal-570-hsl);
    --bfc-theme-2: hsl(var(--teal-620-hsl));
    --bfc-theme-3: hsl(var(--teal-660-hsl));
    --bfc-theme-c-hsl: var(--teal-120-hsl);
    --bfc-theme-c-2-hsl: var(--teal-100-hsl);
    --bfc-theme-hc: white;
    --bfc-theme-fade-hsl: var(--teal-120-hsl);
    --bfc-theme-fade-c-hsl: var(--teal-570-hsl);
  }
}
/* #region purple theme */
.bf-theme-purple,
.bf-theme-purple.bf-darkmode,
.bf-darkmode .bf-theme-purple,
[data-bf-color-mode=dark] .bf-theme-purple,
.bf-lightmode .bf-darkmode .bf-theme-purple {
  --bfc-theme-hsl: var(--purple-300-hsl);
  --bfc-theme-2: hsl(var(--purple-250-hsl));
  --bfc-theme-3: hsl(var(--purple-200-hsl));
  --bfc-theme-c-hsl: var(--purple-800-hsl);
  --bfc-theme-c-2-hsl: var(--purple-890-hsl);
  --bfc-theme-hc: var(--base-920);
  --bfc-theme-fade-hsl: var(--purple-800-hsl);
  --bfc-theme-fade-c-hsl: var(--purple-300-hsl);
}

.bf-theme-purple.bf-lightmode,
.bf-lightmode .bf-theme-purple,
[data-bf-color-mode=light] .bf-theme-purple,
.bf-darkmode .bf-lightmode .bf-theme-purple {
  --bfc-theme-hsl: var(--purple-570-hsl);
  --bfc-theme-2: hsl(var(--purple-620-hsl));
  --bfc-theme-3: hsl(var(--purple-660-hsl));
  --bfc-theme-c-hsl: var(--purple-120-hsl);
  --bfc-theme-c-2-hsl: var(--purple-100-hsl);
  --bfc-theme-hc: white;
  --bfc-theme-fade-hsl: var(--purple-120-hsl);
  --bfc-theme-fade-c-hsl: var(--purple-570-hsl);
}

@media (prefers-color-scheme: light) {
  .bf-theme-purple {
    --bfc-theme-hsl: var(--purple-570-hsl);
    --bfc-theme-2: hsl(var(--purple-620-hsl));
    --bfc-theme-3: hsl(var(--purple-660-hsl));
    --bfc-theme-c-hsl: var(--purple-120-hsl);
    --bfc-theme-c-2-hsl: var(--purple-100-hsl);
    --bfc-theme-hc: white;
    --bfc-theme-fade-hsl: var(--purple-120-hsl);
    --bfc-theme-fade-c-hsl: var(--purple-570-hsl);
  }
}
/* #endregion */
/* #region gray theme */
.bf-theme-gray,
.bf-theme-gray.bf-darkmode,
.bf-darkmode .bf-theme-gray,
[data-bf-color-mode=dark] .bf-theme-gray,
.bf-lightmode .bf-darkmode .bf-theme-gray {
  --bfc-theme-hsl: var(--base-120-hsl);
  --bfc-theme-2: hsl(var(--base-100-hsl));
  --bfc-theme-3: hsl(var(--base-30-hsl));
  --bfc-theme-c-hsl: var(--base-500-hsl);
  --bfc-theme-c-2-hsl: var(--base-920-hsl);
  --bfc-theme-hc: var(--base-920);
  --bfc-theme-fade-hsl: var(--base-500-hsl);
  --bfc-theme-fade-c-hsl: var(--base-120-hsl);
}

.bf-theme-gray.bf-lightmode,
.bf-lightmode .bf-theme-gray,
[data-bf-color-mode=light] .bf-theme-gray,
.bf-darkmode .bf-lightmode .bf-theme-gray {
  --bfc-theme-hsl: var(--base-420-hsl);
  --bfc-theme-2: hsl(var(--base-380-hsl));
  --bfc-theme-3: hsl(var(--gray-400-hsl));
  --bfc-theme-c-hsl: var(--base-40-hsl);
  --bfc-theme-c-2-hsl: var(--base-30-hsl);
  --bfc-theme-hc: white;
  --bfc-theme-fade-hsl: var(--base-40-hsl);
  --bfc-theme-fade-c-hsl: var(--base-360-hsl);
}

@media (prefers-color-scheme: light) {
  .bf-theme-gray {
    --bfc-theme-hsl: var(--base-420-hsl);
    --bfc-theme-2: hsl(var(--base-380-hsl));
    --bfc-theme-3: hsl(var(--gray-400-hsl));
    --bfc-theme-c-hsl: var(--base-40-hsl);
    --bfc-theme-c-2-hsl: var(--base-30-hsl);
    --bfc-theme-hc: white;
    --bfc-theme-fade-hsl: var(--base-40-hsl);
    --bfc-theme-fade-c-hsl: var(--base-360-hsl);
  }
}
/* #endregion */
/* #region pink theme */
.bf-theme-pink,
.bf-theme-pink.bf-darkmode,
.bf-darkmode .bf-theme-pink,
[data-bf-color-mode=dark] .bf-theme-pink,
.bf-lightmode .bf-darkmode .bf-theme-pink {
  --bfc-theme-hsl: var(--pink-300-hsl);
  --bfc-theme-2: hsl(var(--pink-250-hsl));
  --bfc-theme-3: hsl(var(--pink-200-hsl));
  --bfc-theme-c-hsl: var(--pink-800-hsl);
  --bfc-theme-c-2-hsl: var(--pink-890-hsl);
  --bfc-theme-hc: var(--base-920);
  --bfc-theme-fade-hsl: var(--pink-800-hsl);
  --bfc-theme-fade-c-hsl: var(--pink-300-hsl);
}

.bf-theme-pink.bf-lightmode,
.bf-lightmode .bf-theme-pink,
[data-bf-color-mode=light] .bf-theme-pink,
.bf-darkmode .bf-lightmode .bf-theme-pink {
  --bfc-theme-hsl: var(--pink-570-hsl);
  --bfc-theme-2: hsl(var(--pink-620-hsl));
  --bfc-theme-3: hsl(var(--pink-660-hsl));
  --bfc-theme-c-hsl: var(--pink-120-hsl);
  --bfc-theme-c-2-hsl: var(--pink-100-hsl);
  --bfc-theme-hc: white;
  --bfc-theme-fade-hsl: var(--pink-120-hsl);
  --bfc-theme-fade-c-hsl: var(--pink-570-hsl);
}

@media (prefers-color-scheme: light) {
  .bf-theme-pink {
    --bfc-theme-hsl: var(--pink-570-hsl);
    --bfc-theme-2: hsl(var(--pink-620-hsl));
    --bfc-theme-3: hsl(var(--pink-660-hsl));
    --bfc-theme-c-hsl: var(--pink-120-hsl);
    --bfc-theme-c-2-hsl: var(--pink-100-hsl);
    --bfc-theme-hc: white;
    --bfc-theme-fade-hsl: var(--pink-120-hsl);
    --bfc-theme-fade-c-hsl: var(--pink-570-hsl);
  }
}
/* #endregion */
/* #region green theme */
.bf-theme-green,
.bf-theme-green.bf-darkmode,
.bf-darkmode .bf-theme-green,
[data-bf-color-mode=dark] .bf-theme-green,
.bf-lightmode .bf-darkmode .bf-theme-green {
  --bfc-theme-hsl: var(--green-300-hsl);
  --bfc-theme-2: hsl(var(--green-250-hsl));
  --bfc-theme-3: hsl(var(--green-200-hsl));
  --bfc-theme-c-hsl: var(--green-800-hsl);
  --bfc-theme-c-2-hsl: var(--green-890-hsl);
  --bfc-theme-hc: var(--base-920);
  --bfc-theme-fade-hsl: var(--green-800-hsl);
  --bfc-theme-fade-c-hsl: var(--green-300-hsl);
}

.bf-theme-green.bf-lightmode,
.bf-lightmode .bf-theme-green,
[data-bf-color-mode=light] .bf-theme-green,
.bf-darkmode .bf-lightmode .bf-theme-green {
  --bfc-theme-hsl: var(--green-570-hsl);
  --bfc-theme-2: hsl(var(--green-620-hsl));
  --bfc-theme-3: hsl(var(--green-660-hsl));
  --bfc-theme-c-hsl: var(--green-120-hsl);
  --bfc-theme-c-2-hsl: var(--green-120-hsl);
  --bfc-theme-hc: white;
  --bfc-theme-fade-hsl: var(--green-120-hsl);
  --bfc-theme-fade-c-hsl: var(--green-570-hsl);
}

@media (prefers-color-scheme: light) {
  .bf-theme-green {
    --bfc-theme-hsl: var(--green-570-hsl);
    --bfc-theme-2: hsl(var(--green-620-hsl));
    --bfc-theme-3: hsl(var(--green-660-hsl));
    --bfc-theme-c-hsl: var(--green-120-hsl);
    --bfc-theme-c-2-hsl: var(--green-120-hsl);
    --bfc-theme-hc: white;
    --bfc-theme-fade-hsl: var(--green-120-hsl);
    --bfc-theme-fade-c-hsl: var(--green-570-hsl);
  }
}
/* #endregion */
/* #region yellow theme */
.bf-theme-yellow,
.bf-theme-yellow.bf-darkmode,
.bf-darkmode .bf-theme-yellow,
[data-bf-color-mode=dark] .bf-theme-yellow,
.bf-lightmode .bf-darkmode .bf-theme-yellow {
  --bfc-theme-hsl: var(--yellow-300-hsl);
  --bfc-theme-2: hsl(var(--yellow-250-hsl));
  --bfc-theme-3: hsl(var(--yellow-200-hsl));
  --bfc-theme-c-hsl: var(--yellow-800-hsl);
  --bfc-theme-c-2-hsl: var(--yellow-890-hsl);
  --bfc-theme-hc: var(--base-920);
  --bfc-theme-fade-hsl: var(--yellow-800-hsl);
  --bfc-theme-fade-c-hsl: var(--yellow-300-hsl);
}

.bf-theme-yellow.bf-lightmode,
.bf-lightmode .bf-theme-yellow,
[data-bf-color-mode=light] .bf-theme-yellow,
.bf-darkmode .bf-lightmode .bf-theme-yellow {
  --bfc-theme-hsl: var(--yellow-570-hsl);
  --bfc-theme-2: hsl(var(--yellow-620-hsl));
  --bfc-theme-3: hsl(var(--yellow-660-hsl));
  --bfc-theme-c-hsl: var(--yellow-120-hsl);
  --bfc-theme-c-2-hsl: var(--yellow-100-hsl);
  --bfc-theme-hc: white;
  --bfc-theme-fade-hsl: var(--yellow-120-hsl);
  --bfc-theme-fade-c-hsl: var(--yellow-570-hsl);
}

@media (prefers-color-scheme: light) {
  .bf-theme-yellow {
    --bfc-theme-hsl: var(--yellow-570-hsl);
    --bfc-theme-2: hsl(var(--yellow-620-hsl));
    --bfc-theme-3: hsl(var(--yellow-660-hsl));
    --bfc-theme-c-hsl: var(--yellow-120-hsl);
    --bfc-theme-c-2-hsl: var(--yellow-100-hsl);
    --bfc-theme-hc: white;
    --bfc-theme-fade-hsl: var(--yellow-120-hsl);
    --bfc-theme-fade-c-hsl: var(--yellow-570-hsl);
  }
}
/* #endregion */
/* #region theme aliases
aliases and values for `theme` needs to be applied for both dark and light
mode for every theme class (or nested themes won't work) */
html,
.bf-darkmode,
.bf-lightmode,
[data-bf-color-mode=dark],
[data-bf-color-mode=light],
.bf-theme-teal,
.bf-theme-purple,
.bf-theme-pink,
.bf-theme-green,
.bf-theme-yellow,
.bf-theme-gray {
  --bfc-base-c-theme: var(--bfc-theme);
  --bfc-theme-1: hsl(var(--bfc-theme-hsl));
  --bfc-theme-c-1: hsl(var(--bfc-theme-c-hsl));
  --bfc-theme-c-2: hsl(var(--bfc-theme-c-2-hsl));
  --bfc-theme-c: var(--bfc-theme-c-1);
  --bfc-theme: var(--bfc-theme-1);
  --bfc-theme-fade: hsl(var(--bfc-theme-fade-hsl));
  --bfc-theme-fade-c: hsl(var(--bfc-theme-fade-c-hsl));
  --bff-theme: var(--bfc-base-c-theme);
  --bft-theme: var(--bfc-base-c-theme);
}

/* #endregion */
/* #region aliases and values for both dark and light mode */
html,
.bf-darkmode,
.bf-lightmode,
[data-bf-color-mode=dark],
[data-bf-color-mode=light] {
  --bf-shadow-blur: 8px;
  --bf-shadow-bottom: 0 4px var(--bf-shadow-blur) var(--bfc-shadow);
  --bf-shadow-left: -4px 0 var(--bf-shadow-blur) var(--bfc-shadow);
  --bf-shadow-right: 4px 0 var(--bf-shadow-blur) var(--bfc-shadow);
  --bf-shadow-top: 0 -4px var(--bf-shadow-blur) var(--bfc-shadow);
  --bf-shadow: 0 0 var(--bf-shadow-blur) var(--bfc-shadow);
  --bfc-base: var(--bfc-base-1);
  --bfc-base-1: hsl(var(--bfc-base-hsl));
  --bfc-base-2: hsl(var(--bfc-base-2-hsl));
  --bfc-base-3: hsl(var(--bfc-base-3-hsl));
  --bfc-base-c-1: hsl(var(--bfc-base-c-hsl));
  --bfc-base-c-chill: var(--bfc-chill);
  --bfc-base-c-brand: var(--bfc-brand);
  --bfc-base-c-attn: var(--bfc-attn);
  --bfc-base-c-dimmed: var(--bfc-base-dimmed);
  --bfc-base-c: var(--bfc-base-c-1);
  --bfc-base-dimmed-1: var(--bfc-base-dimmed);
  --bfc-base-dimmed-2: hsl(var(--bfc-base-dimmed-2-hsl));
  --bfc-base-dimmed-3: hsl(var(--bfc-base-dimmed-3-hsl));
  --bfc-base-dimmed-c: var(--bfc-base-c-1);
  --bfc-base-dimmed: hsl(var(--bfc-base-dimmed-hsl));
  --bfc-base-c-inverted-1: hsl(var(--bfc-base-c-inverted-hsl));
  --bfc-base-c-inverted: var(--bfc-base-c-inverted-1);
  --bfc-base-disabled-c: var(--bfc-base-c-2);
  --bfc-base-disabled: hsl(var(--bfc-base-disabled-hsl));
  --bfc-neutral: hsl(var(--bfc-neutral-hsl));
  --bfc-neutral-2: hsl(var(--bfc-neutral-2-hsl));
  --bfc-neutral-c: hsl(var(--bfc-neutral-c-hsl));
  --bfc-neutral-fade: hsl(var(--bfc-neutral-fade-hsl));
  --bfc-neutral-fade-c: hsl(var(--bfc-neutral-fade-c-hsl));
  --bfc-brand: hsl(var(--bfc-brand-hsl));
  --bfc-brand-c: hsl(var(--bfc-brand-c-hsl));
  --bfc-brand-fade: hsl(var(--bfc-brand-fade-hsl));
  --bfc-brand-fade-c: hsl(var(--bfc-brand-fade-c-hsl));
  --bfc-chill: hsl(var(--bfc-chill-hsl));
  --bfc-chill-c: hsl(var(--bfc-chill-c-hsl));
  --bfc-chill-fade: hsl(var(--bfc-chill-fade-hsl));
  --bfc-chill-fade-c: hsl(var(--bfc-chill-fade-c-hsl));
  --bfc-attn: hsl(var(--bfc-attn-hsl));
  --bfc-attn-c: hsl(var(--bfc-attn-c-hsl));
  --bfc-attn-fade: hsl(var(--bfc-attn-fade-hsl));
  --bfc-attn-fade-c: hsl(var(--bfc-attn-fade-c-hsl));
  --bfc-success: hsl(var(--bfc-success-hsl));
  --bfc-success-c: hsl(var(--bfc-success-c-hsl));
  --bfc-success-fade: hsl(var(--bfc-success-fade-hsl));
  --bfc-success-fade-c: hsl(var(--bfc-success-fade-c-hsl));
  --bfc-warning-hs: 45, 100%;
  --bfc-warning-hsl: var(--yellow-300-hsl);
  --bfc-warning-c-hsl: var(--yellow-800-hsl);
  --bfc-warning-hc: var(--base-920);
  --bfc-warning: hsl(var(--bfc-warning-hsl));
  --bfc-warning-c: hsl(var(--bfc-warning-c-hsl));
  --bfc-warning-fade: hsl(var(--bfc-warning-fade-hsl));
  --bfc-warning-fade-c: hsl(var(--bfc-warning-fade-c-hsl));
  --bfc-alert-hsl: 8, 75%, 45%;
  --bfc-alert-2: hsl(8, 73%, 49%);
  --bfc-alert-c-hsl: 0, 0%, 100%;
  --bfc-alert-c: hsl(var(--bfc-alert-c-hsl));
  --bfc-alert-hc: white;
  --bfc-alert-fade-1-c: hsl(var(--bfc-alert-fade-c-hsl));
  --bfc-alert-fade-1: hsl(var(--bfc-alert-fade-hsl));
  --bfc-alert-fade-2-c: hsl(var(--bfc-alert-fade-2-c-hsl));
  --bfc-alert-fade-c: var(--bfc-alert-fade-1-c);
  --bfc-alert-fade: var(--bfc-alert-fade-1);
  --bfc-alert: hsl(var(--bfc-alert-hsl));
  --bff-alert: var(--bfc-base-c-alert);
  --bff-attn: var(--bfc-base-c-attn);
  --bff-base-2: var(--bfc-base-c-2);
  --bff-base: var(--bfc-base-c);
  --bff-chill: var(--bfc-base-c-chill);
  --bff-dimmed: var(--bfc-base-c-dimmed);
  --bff-disabled: var(--bfc-base-c-disabled);
  --bff-inverted-2: var(--bfc-base-c-inverted-2);
  --bff-inverted: var(--bfc-base-c-inverted);
  --bff-success: var(--bfc-base-c-success);
  --bff-warning: var(--bfc-base-c-warning);
  --bff-wcag: var(--bfc-base-c-wcag);
  --bft-base-2: var(--bfc-base-c-2);
  --bft-base: var(--bfc-base-c);
  --bft-disabled: var(--bfc-base-c-disabled);
}

/* #endregion */
/* #region Background color class names */
.bfc-base-bg,
.bfc-base-1-bg {
  background-color: var(--bfc-base);
  color: var(--bft-base);
}

.bfc-base-2-bg {
  background-color: var(--bfc-base-2);
  color: var(--bft-base);
}

.bfc-base-3-bg {
  background-color: var(--bfc-base-3);
  color: var(--bft-base);
}

.bfc-dimmed-bg {
  background-color: var(--bfc-base-dimmed);
  color: var(--bfc-base-dimmed-c);
}

.bfc-inverted-bg {
  background-color: var(--bfc-base-c-inverted);
  color: var(--bfc-base);
}

.bfc-inverted-2-bg {
  background-color: var(--bfc-base-c-inverted-2);
  color: var(--bfc-base);
}

.bfc-disabled-bg {
  background-color: var(--bfc-base-disabled);
  color: var(--bfc-base-c-2);
}

.bfc-theme-bg {
  background-color: var(--bfc-theme);
  color: var(--bfc-theme-hc);
}

.bfc-theme-fade-bg {
  background-color: var(--bfc-theme-fade);
  color: var(--bfc-theme-fade-c);
}

.bfc-theme-fade-2-bg {
  background-color: var(--bfc-theme-c-2);
  color: var(--bfc-theme);
}

.bfc-success-bg {
  background-color: var(--bfc-success);
  color: var(--bfc-success-hc);
}

.bfc-success-fade-bg {
  background-color: var(--bfc-success-fade);
  color: var(--bfc-success-fade-c);
}

.bfc-warning-bg {
  background-color: var(--bfc-warning);
  color: var(--bfc-warning-hc);
}

.bfc-warning-fade-bg {
  background-color: var(--bfc-warning-fade);
  color: var(--bfc-warning-fade-c);
}

.bfc-neutral-bg {
  background-color: var(--bfc-neutral);
  color: var(--bfc-neutral-hc);
}

.bfc-neutral-fade-bg {
  background-color: var(--bfc-neutral-fade);
  color: var(--bfc-neutral-fade-c);
}

.bfc-alert-bg {
  background-color: var(--bfc-alert);
  color: var(--bfc-alert-hc);
}

.bfc-alert-fade-bg {
  background-color: var(--bfc-alert-fade);
  color: var(--bfc-alert-fade-c);
}

.bfc-alert-fade-2-bg {
  background-color: var(--bfc-alert-fade-2);
  color: var(--bfc-alert-fade-2-c);
}

.bfc-attn-bg {
  background-color: var(--bfc-attn);
  color: var(--bfc-attn-hc);
}

.bfc-attn-fade-bg {
  background-color: hsl(var(--bfc-attn-fade-hsl));
  color: hsl(var(--bfc-attn-fade-c-hsl));
}

.bfc-brand-bg {
  background-color: var(--bfc-brand);
  color: var(--bfc-brand-hc);
}

.bfc-brand-fade-bg {
  background-color: var(--bfc-brand-fade);
  color: var(--bfc-brand-fade-c);
}

.bfc-chill-bg {
  background-color: var(--bfc-chill);
  color: var(--bfc-chill-hc);
}

.bfc-chill-fade-bg {
  background-color: var(--bfc-chill-fade);
  color: var(--bfc-chill-fade-c);
}

/* #endregion */
:where(.bfc-dimmed-bg,
.bfc-inverted-bg,
.bfc-inverted-2-bg,
.bfc-disabled-bg,
.bfc-theme-bg,
.bfc-theme-fade-bg,
.bfc-theme-fade-2-bg,
.bfc-neutral-bg,
.bfc-neutral-fade-bg,
.bfc-brand-bg,
.bfc-brand-fade-bg,
.bfc-chill-bg,
.bfc-chill-fade-bg,
.bfc-attn-bg,
.bfc-attn-fade-bg,
.bfc-success-bg,
.bfc-success-fade-bg,
.bfc-warning-bg,
.bfc-warning-fade-bg,
.bfc-alert-bg,
.bfc-alert-fade-bg,
.bfc-alert-fade-2-bg) :is(a, .bf-link) {
  color: inherit;
}

.bfc-base-1,
.bfc-base {
  color: var(--bft-base);
}

.bfc-base-2 {
  color: var(--bft-base-2);
}

.bfc-disabled {
  color: var(--bft-disabled);
}

.bfc-theme {
  color: var(--bft-theme);
}

.bfc-success {
  color: var(--bfc-base-c-success);
}

.bfc-warning {
  color: var(--bfc-base-c-warning);
}

.bfc-alert {
  color: var(--bfc-base-c-alert);
}

.bfc-attn {
  color: var(--bfc-base-c-attn);
}

.bfc-brand {
  color: var(--bfc-base-c-brand);
}

.bfc-chill {
  color: var(--bfc-base-c-chill);
}

.bf-shadow {
  box-shadow: var(--bf-shadow);
}

.bf-shadow-top {
  box-shadow: var(--bf-shadow-top);
}

.bf-shadow-right {
  box-shadow: var(--bf-shadow-right);
}

.bf-shadow-bottom {
  box-shadow: var(--bf-shadow-bottom);
}

.bf-shadow-left {
  box-shadow: var(--bf-shadow-left);
}

html {
  --teal-100-hsl: 172, 94%, 94%;
  --teal-100: hsl(var(--teal-100-hsl));
  --teal-120-hsl: 172, 91%, 92%;
  --teal-120: hsl(var(--teal-120-hsl));
  --teal-150-hsl: 172, 90%, 88%;
  --teal-150: hsl(var(--teal-150-hsl));
  --teal-200-hsl: 173, 90%, 80%;
  --teal-200: hsl(var(--teal-200-hsl));
  --teal-250-hsl: 173, 90%, 68%;
  --teal-250: hsl(var(--teal-250-hsl));
  --teal-300-hsl: 173, 90%, 50%;
  --teal-300: hsl(var(--teal-300-hsl));
  --teal-570-hsl: 181, 100%, 23%;
  --teal-570: hsl(var(--teal-570-hsl));
  --teal-620-hsl: 181, 98%, 21%;
  --teal-620: hsl(var(--teal-620-hsl));
  --teal-660-hsl: 181, 100%, 17%;
  --teal-660: hsl(var(--teal-660-hsl));
  --teal-800-hsl: 186, 100%, 13%;
  --teal-800: hsl(var(--teal-800-hsl));
  --teal-890-hsl: 192, 100%, 8%;
  --teal-890: hsl(var(--teal-890-hsl));
  --purple-100-hsl: 258, 92%, 95%;
  --purple-100: hsl(var(--purple-100-hsl));
  --purple-120-hsl: 259, 94%, 93%;
  --purple-120: hsl(var(--purple-120-hsl));
  --purple-150-hsl: 258, 100%, 91%;
  --purple-150: hsl(var(--purple-150-hsl));
  --purple-200-hsl: 258, 100%, 87%;
  --purple-200: hsl(var(--purple-200-hsl));
  --purple-250-hsl: 258, 100%, 82%;
  --purple-250: hsl(var(--purple-250-hsl));
  --purple-300-hsl: 258, 100%, 77%;
  --purple-300: hsl(var(--purple-300-hsl));
  --purple-570-hsl: 264, 76%, 46%;
  --purple-570: hsl(var(--purple-570-hsl));
  --purple-620-hsl: 264, 76%, 41%;
  --purple-620: hsl(var(--purple-620-hsl));
  --purple-660-hsl: 264, 77%, 37%;
  --purple-660: hsl(var(--purple-660-hsl));
  --purple-800-hsl: 252, 53%, 25%;
  --purple-800: hsl(var(--purple-800-hsl));
  --purple-890-hsl: 238, 44%, 16%;
  --purple-890: hsl(var(--purple-890-hsl));
  --pink-100-hsl: 323, 100%, 93%;
  --pink-100: hsl(var(--pink-100-hsl));
  --pink-120-hsl: 323, 100%, 91%;
  --pink-120: hsl(var(--pink-120-hsl));
  --pink-150-hsl: 323, 100%, 89%;
  --pink-150: hsl(var(--pink-150-hsl));
  --pink-200-hsl: 324, 100%, 84%;
  --pink-200: hsl(var(--pink-200-hsl));
  --pink-250-hsl: 323, 100%, 77%;
  --pink-250: hsl(var(--pink-250-hsl));
  --pink-300-hsl: 324, 100%, 71%;
  --pink-300: hsl(var(--pink-300-hsl));
  --pink-570-hsl: 325, 100%, 37%;
  --pink-570: hsl(var(--pink-570-hsl));
  --pink-620-hsl: 325, 94%, 34%;
  --pink-620: hsl(var(--pink-620-hsl));
  --pink-660-hsl: 324, 89%, 32%;
  --pink-660: hsl(var(--pink-660-hsl));
  --pink-800-hsl: 317, 75%, 20%;
  --pink-800: hsl(var(--pink-800-hsl));
  --pink-890-hsl: 285, 51%, 12%;
  --pink-890: hsl(var(--pink-890-hsl));
  --green-100-hsl: 145, 100%, 93%;
  --green-100: hsl(var(--green-100-hsl));
  --green-150-hsl: 144, 100%, 89%;
  --green-150: hsl(var(--green-150-hsl));
  --green-200-hsl: 144, 100%, 82%;
  --green-200: hsl(var(--green-200-hsl));
  --green-250-hsl: 153, 95%, 67%;
  --green-250: hsl(var(--green-250-hsl));
  --green-300-hsl: 157, 100%, 48%;
  --green-300: hsl(var(--green-300-hsl));
  --green-570-hsl: 157, 100%, 24%;
  --green-570: hsl(var(--green-570-hsl));
  --green-620-hsl: 157, 100%, 21%;
  --green-620: hsl(var(--green-620-hsl));
  --green-660-hsl: 157, 100%, 19%;
  --green-660: hsl(var(--green-660-hsl));
  --green-800-hsl: 157, 100%, 11%;
  --green-800: hsl(var(--green-800-hsl));
  --green-890-hsl: 156, 67%, 8%;
  --green-890: hsl(var(--green-890-hsl));
  --yellow-100-hsl: 49, 100%, 92%;
  --yellow-100: hsl(var(--yellow-100-hsl));
  --yellow-120-hsl: 49, 100%, 89%;
  --yellow-120: hsl(var(--yellow-120-hsl));
  --yellow-150-hsl: 49, 100%, 85%;
  --yellow-150: hsl(var(--yellow-150-hsl));
  --yellow-200-hsl: 49, 100%, 79%;
  --yellow-200: hsl(var(--yellow-200-hsl));
  --yellow-250-hsl: 47, 100%, 75%;
  --yellow-250: hsl(var(--yellow-250-hsl));
  --yellow-300-hsl: 45, 100%, 72%;
  --yellow-300: hsl(var(--yellow-300-hsl));
  --yellow-570-hsl: 37, 88%, 32%;
  --yellow-570: hsl(var(--yellow-570-hsl));
  --yellow-620-hsl: 39, 91%, 27%;
  --yellow-620: hsl(var(--yellow-620-hsl));
  --yellow-660-hsl: 40, 95%, 23%;
  --yellow-660: hsl(var(--yellow-660-hsl));
  --yellow-800-hsl: 39, 100%, 15%;
  --yellow-800: hsl(var(--yellow-800-hsl));
  --yellow-890-hsl: 43, 100%, 5%;
  --yellow-890: hsl(var(--yellow-890-hsl));
  /* temporary base primitives */
  --base-0-hsl: 0, 0%, 100%;
  --base-10-hsl: 238, 10%, 98%;
  --base-10: hsl(var(--base-10-hsl));
  --base-20-hsl: 238, 15%, 96%;
  --base-20: hsl(var(--base-20-hsl));
  --base-30-hsl: 238, 13%, 94%;
  --base-30: hsl(var(--base-30-hsl));
  --base-40-hsl: 238, 10%, 90%;
  --base-40: hsl(var(--base-40-hsl));
  --base-100-hsl: 210, 15%, 87%;
  --base-100: hsl(var(--base-100-hsl));
  --base-110-hsl: 213, 14%, 85%;
  --base-110: hsl(var(--base-110-hsl));
  --base-120-hsl: 212, 15%, 83%;
  --base-120: hsl(var(--base-120-hsl));
  --base-200-hsl: 211, 15%, 65%;
  --base-200: hsl(var(--base-200-hsl));
  --base-320-hsl: 212, 15%, 56%;
  --base-320: hsl(var(--base-320-hsl));
  --base-340-hsl: 212, 15%, 44%;
  --base-340: hsl(var(--base-340-hsl));
  --base-360-hsl: 213, 22%, 34%;
  --base-360: hsl(var(--base-360-hsl));
  --base-380-hsl: 211, 20%, 30%;
  --base-380: hsl(var(--base-380-hsl));
  --base-400-hsl: 212, 30%, 22%;
  --base-400: hsl(var(--base-400-hsl));
  --base-410-hsl: 212, 33%, 20%;
  --base-410: hsl(var(--base-410-hsl));
  --base-420-hsl: 212, 35%, 19%;
  --base-420: hsl(var(--base-420-hsl));
  --base-500-hsl: 211, 39%, 17%;
  --base-500: hsl(var(--base-500-hsl));
  --base-900-hsl: 210, 55%, 13%;
  --base-900: hsl(var(--base-900-hsl));
  --base-910-hsl: 210, 64%, 11%;
  --base-910: hsl(var(--base-910-hsl));
  --base-920-hsl: 212, 70%, 9%;
  --base-920: hsl(var(--base-920-hsl));
  --gray-50-hsl: 240, 9%, 98%;
  --gray-50: hsl(var(--gray-50-hsl));
  --gray-100-hsl: 240, 14%, 96%;
  --gray-100: hsl(var(--gray-100-hsl));
  --gray-150-hsl: 240, 10%, 90%;
  --gray-150: hsl(var(--gray-150-hsl));
  --gray-800-hsl: 210, 40%, 17%;
  --gray-800: hsl(var(--gray-800-hsl));
  --gray-920-hsl: 212, 70%, 9%;
  --gray-920: hsl(var(--gray-920-hsl));
  --gray-970-hsl: 215, 67%, 4%;
  --gray-970: hsl(var(--gray-970-hsl));
}

/* stylelint-disable no-duplicate-selectors */
html {
  box-sizing: border-box;
}

*,
*::after,
*::before {
  box-sizing: inherit;
}

:root {
  /* px based spacing */
  --bfs0: 0px;
  --bfs2: 2px;
  --bfs4: 4px;
  --bfs6: 6px;
  --bfs8: 8px;
  --bfs12: 12px;
  --bfs16: 16px;
  --bfs24: 24px;
  --bfs28: 28px;
  --bfs32: 32px;
  --bfs40: 40px;
  --bfs48: 48px;
  --bfs52: 52px;
  --bfs56: 56px;
  --bfs80: 80px;
  /* dynamic spacing variables following browser font-size.
   * numbers assuming default root font-size of 16px */
  --rem0: 0rem;
  --rem2: 0.125rem;
  --rem4: 0.25rem;
  --rem6: 0.375rem;
  --rem8: 0.5rem;
  --rem12: 0.75rem;
  --rem16: 1rem;
  --rem24: 1.5rem;
  --rem28: 1.75rem;
  --rem32: 2rem;
  --rem40: 2.5rem;
  --rem48: 3rem;
  --rem52: 3.25rem;
  --rem56: 3.5rem;
  --rem80: 5rem;
  /* font sizes */
  --bf-font-size-s: 0.75rem; /* 12px - small, .bf-small */
  --bf-font-size-m: 0.875rem; /* 14px - p, body, label, .bf-medium */
  --bf-font-size-l: 1rem; /* 16px - input, big, .bf-large */
  --bf-font-size-h5: 1.125rem; /* 18px - h5 */
  --bf-font-size-h4: 1.25rem; /* 20px - h4 */
  --bf-font-size-h3: 1.5rem; /* 24px - h3 */
  --bf-font-size-h2: 1.8125rem; /* 29px - h2 */
  --bf-font-size-h1: 2rem; /* 32px - h1 */
  /* border radius */
  --bf-radius-none: 0px;
  --bf-radius-xs: 4px;
  --bf-radius-s: 8px;
  --bf-radius-m: 12px;
  --bf-radius-l: 16px;
  --bf-radius-xl: 24px;
  --bf-radius-full: 9999px;
  --bf-radius: var(--bf-radius-m);
  /* transition and animations */
  --bf-animation-duration: 0.2s;
  --bf-timing-function: ease;
}

/* general utility classes */
.bf-radius-xs {
  border-radius: var(--bf-radius-xs);
}

.bf-radius-s {
  border-radius: var(--bf-radius-s);
}

.bf-radius,
.bf-radius-m {
  border-radius: var(--bf-radius-m);
}

.bf-radius-l {
  border-radius: var(--bf-radius-l);
}

.bf-radius-xl {
  border-radius: var(--bf-radius-xl);
}

.bf-radius-full {
  border-radius: var(--bf-radius-full);
}

.bf-radius-none {
  border-radius: var(--bf-radius-none);
}

.bfl-border,
.bf-border {
  border: var(--bf-border);
}

.bf-border-top {
  border-top: var(--bf-border);
}

.bf-border-right {
  border-right: var(--bf-border);
}

.bf-border-bottom {
  border-bottom: var(--bf-border);
}

.bf-border-left {
  border-left: var(--bf-border);
}

/* disable bifrost css animation for users that prefers reduced motion */
@media (prefers-reduced-motion) {
  :root {
    --bf-animation-duration: 0s;
  }
}
:root,
.bf-darkmode {
  --bf-border: 1px solid var(--bfc-base-dimmed);
  --bfl-border: var(--bf-border);
  --bf-form-focus-outline: 0 0 0 4px var(--bfc-base-dimmed);
}

.bf-lightmode {
  --bf-border: 1px solid var(--bfc-base-dimmed);
  --bfl-border: var(--bf-border);
  --bf-form-focus-outline: 0 0 0 4px var(--bfc-base-dimmed);
}

/* responsive modal padding */
:root {
  --bfl-modal-padding: var(--bfs40);
}

@media (max-width: 599.9px), (max-height: 599.9px) {
  :root {
    --bfl-modal-padding: var(--bfs24);
  }
}
/* responsive page padding */
:root {
  /* page padding changes at 600px and 1920px screen width. 12 - 24 - 40 */
  --bf-page-padding: var(--bfs12);
  --bfl-page-padding: var(--bf-page-padding);
}

.bfl-page-padding,
.bf-page-padding {
  padding: var(--bf-page-padding, 12px);
}

.bfl-page-padding-x,
.bf-page-padding-x {
  padding-left: var(--bf-page-padding);
  padding-right: var(--bf-page-padding);
}

.bfl-page-padding-y,
.bf-page-padding-y {
  padding-top: var(--bf-page-padding);
  padding-bottom: var(--bf-page-padding);
}

.bf-notch:where(.bfl-page-padding,
.bfl-page-padding-x,
.bf-page-padding,
.bf-page-padding-x) {
  padding-left: calc(var(--bf-page-padding) + env(safe-area-inset-left));
  padding-right: calc(var(--bf-page-padding) + env(safe-area-inset-right));
}

@media (min-width: 600px) {
  :root {
    --bf-page-padding: var(--bfs24);
  }
}
@media (min-width: 1920px) {
  :root {
    --bf-page-padding: var(--bfs40);
  }
}
/* responsive box padding */
:root {
  /* box padding changes at 1280px screen width. 16 - 24 */
  --bf-box-padding: var(--bfs16);
  --bfl-box-padding: var(--bf-box-padding);
}

.bfl-padding,
.bf-padding {
  padding: var(--bf-box-padding);
}

.bfl-padding-x,
.bf-padding-x {
  padding-left: var(--bf-box-padding);
  padding-right: var(--bf-box-padding);
}

.bfl-padding-y,
.bf-padding-y {
  padding-top: var(--bf-box-padding);
  padding-bottom: var(--bf-box-padding);
}

.bf-notch:where(.bfl-padding, .bfl-padding-x, .bf-padding, .bf-padding-x) {
  padding-left: calc(var(--bf-box-padding) + env(safe-area-inset-left));
  padding-right: calc(var(--bf-box-padding) + env(safe-area-inset-right));
}

@media (min-width: 1280px) {
  :root {
    --bf-box-padding: var(--bfs24);
  }
}
/* responsive automatic columns
number of columns will be available width divided by autocol-width
each column will stretch to take up available space
if available width is less than autocol-width, minimum column width will not exceed 100%
prefer css grids because `gap` is well supported (compiles to include `grid-gap`), but not for flexbox or css columns
read more: https://css-tricks.com/snippets/css/complete-guide-grid/ */
:root {
  --bf-autocol-width: 300px;
  --bfl-autocol-width: var(--bf-autocol-width);
  --bf-autocol-gap: var(--bfs12, 12px);
  --bfl-autocol-gap: var(--bf-autocol-gap);
}

.bfl-autocol,
.bf-autocol {
  display: grid;
  gap: var(--bf-autocol-gap);
  grid-template-columns: repeat(auto-fill, minmax(min(var(--bf-autocol-width), 100%), 1fr));
}

/* column grid */
:root {
  /* default column count for .bfl-grid */
  --bfl-columns: 1;
}

.bfl-grid {
  --bfl-gap: var(--bfs12, 12px);
  display: grid;
  gap: var(--bfl-gap);
  grid-template-columns: repeat(var(--bfl-columns, 1), minmax(0, 1fr));
}

/* utility class to set display: block; for inline elements like `<a>` */
:where(.bf-block) {
  display: block;