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

@charset "UTF-8";
: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;
  }
}
/* https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ */
.bf-break-word {
  /* These are technically the same, but use both */
  /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
  overflow-wrap: break-word;
  overflow-wrap: break-word;
  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */
  word-break: break-word;
  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  hyphens: auto;
}

.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 */
/* used by Nav */
.bf-intility-logo > a {
  height: var(--bfs56);
  border-bottom: var(--bf-border);
  display: block;
  line-height: 1;
  cursor: pointer;
}

.bf-intility-logo > a:focus-visible {
  outline: 1px dashed var(--bfc-theme);
  outline-offset: -1px;
}

.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 */