+
+
+
+@code {
+ [Parameter] public string Title { get; set; }
+ [Parameter] public string Description { get; set; }
+ [Parameter] public RenderFragment ChildContent { get; set; }
+}
diff --git a/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Active/RadioGroup.razor b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Active/RadioGroup.razor
new file mode 100644
index 0000000..90c1917
--- /dev/null
+++ b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Active/RadioGroup.razor
@@ -0,0 +1,25 @@
+@namespace Styx
+@Description
+ @ChildContent
+
+ This component is defined in the Styx library.
+
diff --git a/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Component1.razor.css b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Component1.razor.css
new file mode 100644
index 0000000..c6afca4
--- /dev/null
+++ b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Component1.razor.css
@@ -0,0 +1,6 @@
+.my-component {
+ border: 2px dashed red;
+ padding: 1em;
+ margin: 1em 0;
+ background-image: url('background.png');
+}
diff --git a/src/apps/Altinn.Authorization.AccessPackages/src/Styx/ExampleJsInterop.cs b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/ExampleJsInterop.cs
new file mode 100644
index 0000000..efcf79a
--- /dev/null
+++ b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/ExampleJsInterop.cs
@@ -0,0 +1,37 @@
+using Microsoft.JSInterop;
+
+namespace Styx
+{
+ // This class provides an example of how JavaScript functionality can be wrapped
+ // in a .NET class for easy consumption. The associated JavaScript module is
+ // loaded on demand when first needed.
+ //
+ // This class can be registered as scoped DI service and then injected into Blazor
+ // components for use.
+
+ public class ExampleJsInterop : IAsyncDisposable
+ {
+ private readonly Lazy
+
+ @ChildContent
+
+
+
+@code {
+
+ [Parameter] public RenderFragment ChildContent { get; set; }
+ [Parameter] public bool MultiOpen { get; set; }
+ public string ActiveItem { get; set; } = "";
+
+ public void SetActiveItem(string title)
+ {
+ ActiveItem = title;
+ }
+}
diff --git a/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Interactive/AccordionItem.razor b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Interactive/AccordionItem.razor
new file mode 100644
index 0000000..4183ff3
--- /dev/null
+++ b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Interactive/AccordionItem.razor
@@ -0,0 +1,70 @@
+
+
+
+@code {
+
+ [CascadingParameter] public Accordion Parent { get; set; }
+
+ [Parameter] public string Title { get; set; }
+ [Parameter] public string Icon { get; set; }
+ [Parameter] public RenderFragment ChildContent { get; set; }
+ [Parameter] public bool IsOpen { get; set; } = false;
+ [Parameter] public string Url { get; set; }
+ [Parameter] public List
+
+
+
+
+
+
+@code {
+
+ [Parameter] public string Title { get; set; }
+ [Parameter] public RenderFragment ChildContent { get; set; }
+ [Parameter] public string Icon { get; set; }
+ [Parameter] public string Url { get; set; }
+ [Parameter] public List
+
+
+ @if (ChildContent != null)
+ {
+
+ @ChildContent
+
+ }
+
+ @ChildContent
+
+
+@code {
+ [Parameter] public string Url { get; set; }
+ [Parameter] public RenderFragment ChildContent { get; set; }
+}
diff --git a/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Layout/Grid.razor b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Layout/Grid.razor
new file mode 100644
index 0000000..3261ff5
--- /dev/null
+++ b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Layout/Grid.razor
@@ -0,0 +1,29 @@
+@namespace Styx
+
+
+ @ChildContent
+
+
+@code {
+
+ [Parameter] public RenderFragment ChildContent { get; set; }
+
+ private int? _small { get; set; }
+ [Parameter] public int Small { get { return _small ?? 1; } set { _small = value; } }
+
+ private int? _medium { get; set; }
+ [Parameter] public int Medium { get { return _medium ?? Small; } set { _medium = value; } }
+
+ private int? _large { get; set; }
+ [Parameter] public int Large { get { return _large ?? Medium; } set { _large = value; } }
+
+ private int? _big { get; set; }
+ [Parameter] public int Big { get { return _big ?? Large; } set { _big = value; } }
+
+ private int? _huge { get; set; }
+ [Parameter] public int Huge { get { return _huge ?? Big; } set { _huge = value; } }
+
+ public string Style => $"--bf-grid-cols: {Small}; --bf-grid-s-cols: {Small}; --bf-grid-m-cols: {Medium}; --bf-grid-l-cols: {Large}; --bf-grid-xl-cols: {Big}; --bf-grid-xxl-cols: {Huge};";
+
+
+}
diff --git a/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Layout/GridSpan.razor b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Layout/GridSpan.razor
new file mode 100644
index 0000000..9e22193
--- /dev/null
+++ b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Layout/GridSpan.razor
@@ -0,0 +1,14 @@
+@namespace Styx
+
+
+ @ChildContent
+
+
+@code {
+ [Parameter] public RenderFragment ChildContent { get; set; }
+ [Parameter] public int Columns { get; set; } = 1;
+ [Parameter] public int Rows { get; set; } = 1;
+
+ public string Style() => $"grid-column: span {Columns};grid-row: span {Rows}; ";
+
+}
diff --git a/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Layout/NavGroup.razor b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Layout/NavGroup.razor
new file mode 100644
index 0000000..8656125
--- /dev/null
+++ b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Layout/NavGroup.razor
@@ -0,0 +1,34 @@
+@namespace Styx
+
+
+
+
+
+
+@code {
+ [Parameter]
+ public string Title { get; set; } = "Group";
+ [Parameter]
+ public string Icon { get; set; } = "pen-ruler";
+ [Parameter]
+ public RenderFragment ChildContent { get; set; }
+
+ [Parameter]
+ public bool IsOpen { get; set; } = false;
+ [Parameter]
+ public string ContentStyle { get; set; }
+}
diff --git a/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Layout/NavItem.razor b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Layout/NavItem.razor
new file mode 100644
index 0000000..9fafe47
--- /dev/null
+++ b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Layout/NavItem.razor
@@ -0,0 +1,14 @@
+@namespace Styx
+
+
+
+
+ @ChildContent
+
+
+
+@code {
+ [Parameter] public string Url { get; set; } = "#";
+ [Parameter] public string Icon { get; set; } = "bars";
+ [Parameter] public RenderFragment ChildContent { get; set; }
+}
diff --git a/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Layout/NavigationLayout.razor b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Layout/NavigationLayout.razor
new file mode 100644
index 0000000..60bf89a
--- /dev/null
+++ b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Layout/NavigationLayout.razor
@@ -0,0 +1,58 @@
+@namespace Styx
+
+
+
+
+
+
+
+ @AppTitle
+
+ @TopContent
+
+@ChildContent
+ +@code { + [Parameter] public RenderFragment ChildContent { get; set; } +} diff --git a/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Text/H2.razor b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Text/H2.razor new file mode 100644 index 0000000..c792970 --- /dev/null +++ b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Text/H2.razor @@ -0,0 +1,5 @@ +@ChildContent
+ +@code { + [Parameter] public RenderFragment ChildContent { get; set; } +} diff --git a/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Text/H3.razor b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Text/H3.razor new file mode 100644 index 0000000..229dbbb --- /dev/null +++ b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Text/H3.razor @@ -0,0 +1,5 @@ +@ChildContent
+ +@code { + [Parameter] public RenderFragment ChildContent { get; set; } +} diff --git a/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Text/H4.razor b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Text/H4.razor new file mode 100644 index 0000000..50e9397 --- /dev/null +++ b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Text/H4.razor @@ -0,0 +1,5 @@ +@ChildContent
+ +@code { + [Parameter] public RenderFragment ChildContent { get; set; } +} diff --git a/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Text/H5.razor b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Text/H5.razor new file mode 100644 index 0000000..109c99d --- /dev/null +++ b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Text/H5.razor @@ -0,0 +1,5 @@ +@ChildContent
+ +@code { + [Parameter] public RenderFragment ChildContent { get; set; } +} diff --git a/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Text/H6.razor b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Text/H6.razor new file mode 100644 index 0000000..05d4ffc --- /dev/null +++ b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Text/H6.razor @@ -0,0 +1,6 @@ +@ChildContent
+ +@code { + [Parameter] public RenderFragment ChildContent { get; set; } +} + diff --git a/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Visual/Badge.razor b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Visual/Badge.razor new file mode 100644 index 0000000..5135ac3 --- /dev/null +++ b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Visual/Badge.razor @@ -0,0 +1,49 @@ +@namespace Styx +@ChildContent +@code { + + [Parameter] public RenderFragment ChildContent { get; set; } + [Parameter] public string Title { get; set; } + [Parameter] public BadgeState State { get; set; } = BadgeState.Theme; + [Parameter] public bool Inverted { get; set; } + [Parameter] public bool Pill { get; set; } + + public enum BadgeState { Theme, Success, Warning, Alert, Attn, Chill, Dimmed }; + + public string ClassStyle() + { + string res = "bf-badge"; + switch (State) + { + case BadgeState.Theme: + res += Inverted ? " bfc-theme-bg" : " bfc-theme-fade-bg"; + break; + case BadgeState.Success: + res += Inverted ? " bfc-success-bg" : " bfc-success-fade-bg"; + break; + case BadgeState.Warning: + res += Inverted ? " bfc-warning-bg" : " bfc-warning-fade-bg"; + break; + case BadgeState.Alert: + res += Inverted ? " bfc-alert-bg" : " bfc-alert-fade-bg"; + break; + case BadgeState.Attn: + res += Inverted ? " bfc-base-c-attn-bg" : " bfc-attn-c-bg"; + break; + case BadgeState.Chill: + res += Inverted ? " bfc-base-c-chill-bg" : " bfc-chill-c-bg"; + break; + case BadgeState.Dimmed: + res += Inverted ? " bfc-base-c-2-bg" : " bfc-dimmed-bg"; + break; + } + + if (Pill) + { + res += " bf-badge-pill"; + } + + return res; + } + +} diff --git a/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Visual/Icon.razor b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Visual/Icon.razor new file mode 100644 index 0000000..c00be30 --- /dev/null +++ b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Visual/Icon.razor @@ -0,0 +1,8 @@ +@namespace Styx + + + +@code { + + [Parameter] public string Name { get; set; } +} diff --git a/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Visual/Message.razor b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Visual/Message.razor new file mode 100644 index 0000000..bc28fb9 --- /dev/null +++ b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Visual/Message.razor @@ -0,0 +1,48 @@ +@namespace Styx +@* + + + + *@ + + + +@code { + + [Parameter] public string Title { get; set; } + [Parameter] public RenderFragment ChildContent { get; set; } + [Parameter] public MsgState State { get; set; } + + private string cssClass() + { + switch (State) + { + default: + case MsgState.Default: + return "bfc-theme-fade-bg"; + case MsgState.Success: + return "bfc-success-fade-bg"; + case MsgState.Warning: + return "bfc-warning-fade-bg"; + case MsgState.Alert: + return "bfc-alert-fade-bg"; + case MsgState.Neutral: + return "bfc-dimmed-bg"; + } + } + + public enum MsgState { Default, Success, Warning, Alert, Neutral } + +} diff --git a/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Visual/SplitBadge.razor b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Visual/SplitBadge.razor new file mode 100644 index 0000000..708d4c1 --- /dev/null +++ b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Visual/SplitBadge.razor @@ -0,0 +1,44 @@ +@namespace Styx + + @Key + @Value + +@code { + public enum BadgeState { Theme, Success, Warning, Alert, Attn, Chill, Dimmed }; + + [Parameter] public string Key { get; set; } + [Parameter] public string Value { get; set; } + [Parameter] public BadgeState State { get; set; } = BadgeState.Theme; + [Parameter] public bool Inverted { get; set; } + + public string ClassStyle() + { + string res = ""; + switch (State) + { + case BadgeState.Theme: + res += Inverted ? " bfc-theme-bg" : " bfc-theme-fade-bg"; + break; + case BadgeState.Success: + res += Inverted ? " bfc-success-bg" : " bfc-success-fade-bg"; + break; + case BadgeState.Warning: + res += Inverted ? " bfc-warning-bg" : " bfc-warning-fade-bg"; + break; + case BadgeState.Alert: + res += Inverted ? " bfc-alert-bg" : " bfc-alert-fade-bg"; + break; + case BadgeState.Attn: + res += Inverted ? " bfc-base-c-attn-bg" : " bfc-attn-c-bg"; + break; + case BadgeState.Chill: + res += Inverted ? " bfc-base-c-chill-bg" : " bfc-chill-c-bg"; + break; + case BadgeState.Dimmed: + res += Inverted ? " bfc-base-c-2-bg" : " bfc-dimmed-bg"; + break; + } + + return res; + } +} diff --git a/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Visual/SvgIcon.razor b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Visual/SvgIcon.razor new file mode 100644 index 0000000..1e098cc --- /dev/null +++ b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/Visual/SvgIcon.razor @@ -0,0 +1,57 @@ +
+ )
+
+
+@code {
+
+ [Parameter] public string Path { get; set; }
+
+ [Parameter] public SvgIconCategory Category { get; set; }
+ [Parameter] public string Name { get; set; }
+
+ [Parameter] public bool Small { get; set; }
+
+ public string ImgHeight { get { return Small ? "21" : "42"; } }
+
+ public string IconPath()
+ {
+ try
+ {
+
+ if (string.IsNullOrEmpty(Path))
+ {
+ return $"resources/aksel-icons/{Category.ToString().Replace("_", " ")}/{Name}.svg";
+ }
+ else
+ {
+ var parts = Path.Split(':');
+ return $"resources/aksel-icons/{parts[0].Replace("_", " ")}/{parts[1]}.svg";
+ }
+ }
+ catch
+ {
+ return $"resources/aksel-icons/workplace/buildings2.svg";
+ }
+ }
+
+
+ public enum SvgIconCategory
+ {
+Accessibility,
+Arrows,
+Development,
+Files_and_application,
+Home,
+Interface,
+Law_and_security,
+Media,
+Money,
+Nature_and_animals,
+People,
+Statistics_and_math,
+Status,
+Transportation,
+Wellness,
+Workplace
+ }
+}
diff --git a/src/apps/Altinn.Authorization.AccessPackages/src/Styx/_Imports.razor b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/_Imports.razor
new file mode 100644
index 0000000..7728512
--- /dev/null
+++ b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/_Imports.razor
@@ -0,0 +1 @@
+@using Microsoft.AspNetCore.Components.Web
diff --git a/src/apps/Altinn.Authorization.AccessPackages/src/Styx/libman.json b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/libman.json
new file mode 100644
index 0000000..29631a9
--- /dev/null
+++ b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/libman.json
@@ -0,0 +1,21 @@
+{
+ "version": "1.0",
+ "defaultProvider": "unpkg",
+ "libraries": [
+ {
+ "provider": "unpkg",
+ "library": "@intility/bifrost-css@latest",
+ "destination": "wwwroot/css/bifrost/",
+ "files": [
+ "dist/bifrost-all.css",
+ "dist/bifrost-base.css",
+ "dist/bifrost-breakpoints.css",
+ "dist/bifrost-bundle.css",
+ "dist/bifrost-colors.css",
+ "dist/bifrost-components.css",
+ "dist/bifrost-layout.css",
+ "dist/font-imports.css"
+ ]
+ }
+ ]
+}
\ No newline at end of file
diff --git a/src/apps/Altinn.Authorization.AccessPackages/src/Styx/wwwroot/background.png b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/wwwroot/background.png
new file mode 100644
index 0000000..e15a3bd
Binary files /dev/null and b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/wwwroot/background.png differ
diff --git a/src/apps/Altinn.Authorization.AccessPackages/src/Styx/wwwroot/css/all.css b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/wwwroot/css/all.css
new file mode 100644
index 0000000..4f8c9d4
--- /dev/null
+++ b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/wwwroot/css/all.css
@@ -0,0 +1,23 @@
+@import url("bifrost/dist/bifrost-all.css");
+
+.bf-split-badge {
+ display: flex;
+ font-size: var(--bf-font-size-m);
+ font-weight: 600;
+ margin: 4px 0px;
+}
+
+.bf-split-badge-key {
+ padding: 2px 4px 2px 8px;
+ border-top-left-radius: 4px 4px;
+ border-bottom-left-radius: 4px 4px;
+}
+
+.bf-split-badge-value {
+ padding: 2px 8px 2px 4px;
+ border-top-right-radius: 4px 4px;
+ border-bottom-right-radius: 4px 4px;
+}
+.bf-badge {
+ margin: 4px 2px;
+}
\ No newline at end of file
diff --git a/src/apps/Altinn.Authorization.AccessPackages/src/Styx/wwwroot/css/bifrost/dist/bifrost-all.css b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/wwwroot/css/bifrost/dist/bifrost-all.css
new file mode 100644
index 0000000..4ad8009
--- /dev/null
+++ b/src/apps/Altinn.Authorization.AccessPackages/src/Styx/wwwroot/css/bifrost/dist/bifrost-all.css
@@ -0,0 +1,6008 @@
+@charset "UTF-8";
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700&display=swap");
+@import url("https://api.fontshare.com/v2/css?f[]=satoshi@1,2&display=swap");
+/* global bifrost css, bundled in @intility/bifrost-css package */
+/* font imports needs to at the top of output bundle */
+/* bifrost font imports, included in both @intility/bifrost-react and @intility/bifrost-css packages */
+/* all bifrost css, except react-specific (tooltip, select, datepicker) */
+/* global bifrost css, included in both @intility/bifrost-react and @intility/bifrost-css packages */
+:root {
+ /* ~1px at 14px font-size */
+ --bf-underline-offset: 0.0714em;
+ --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(--bfs12));
+ /* 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-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 .tippy-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 .tippy-content)::-webkit-scrollbar {
+ height: 18px;
+ width: 18px;
+ background-color: transparent;
+ }
+ :is(.bf-scrollbar,
+ .bf-scrollbar-small,
+ .bf-dropdown .tippy-content)::-webkit-scrollbar-corner {
+ background-color: transparent;
+ }
+ :is(.bf-scrollbar,
+ .bf-scrollbar-small,
+ .bf-dropdown .tippy-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 .tippy-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 */
+ overflow-wrap: break-word;
+ word-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: */
+ 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 */
+:where(.bf-content, .bf-elements) a,
+.bf-link {
+ cursor: pointer;
+ color: var(--bff-theme);
+ text-decoration-line: underline;
+ text-decoration-style: solid;
+ text-underline-offset: var(--bf-underline-offset);
+}
+
+.bf-link:is(:hover, :active),
+:where(.bf-content, .bf-elements) a:is(:hover, :active) {
+ text-decoration-style: dashed;
+}
+
+:is(.bf-link, .bf-title-link):focus,
+:where(.bf-content, .bf-elements) a:focus {
+ outline: none;
+}
+
+:is(.bf-link, .bf-title-link, .bf-neutral-link):focus-visible,
+:where(.bf-content, .bf-elements) a:focus-visible {
+ outline: 2px dotted currentcolor;
+ outline-offset: 2px;
+ -moz-outline-radius: var(--bf-radius-xs);
+ border-radius: var(--bf-radius-xs);
+}
+
+.bf-title-link {
+ color: var(--bff-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;
+}
+
+:where(button).bf-neutral-link {
+ text-align: inherit;
+ background: none;
+ border: none;
+ font: inherit;
+ cursor: pointer;
+ padding: 0;
+ outline: none;
+}
+
+.bf-neutral-link:hover .bf-neutral-link-text {
+ text-decoration-line: underline;
+ text-decoration-style: solid;
+ text-underline-offset: var(--bf-underline-offset);
+}
+
+/* link styling for buttons */
+button:is(.bf-link, .bf-title-link) {
+ border: none;
+ background: inherit;
+ padding: 0;
+ font: inherit;
+}
+
+button:is(.bf-link, .bf-title-link):disabled {
+ background: inherit;
+ color: var(--bfc-base-c-disabled);
+ text-decoration-line: none;
+ cursor: default;
+}
+
+/* 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;
+}
+
+/* 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);
+ display: inline-block;
+ padding: 0 0.2rem;
+ margin: 0 0.1rem;
+ border-radius: var(--bf-radius-xs);
+}
+
+: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-theme);
+}
+
+:where(.bf-content, .bf-elements) li,
+:is(.bf-ul, .bf-ol) li,
+.bf-li {
+ margin: 0;
+}
+
+:where(.bf-content) li {
+ margin: var(--bfs12) 0;
+}
+
+/* nested lists */
+:where(.bf-content, .bf-elements) li :is(ul, ol),
+:is(.bf-ul, .bf-ol) :is(ul, ol) {
+ margin: 0;
+}
+
+/* #region Table of contents */
+/* first level */
+.bf-toc {
+ padding: 0;
+ margin: 0;
+ display: grid;
+ gap: 12px;
+}
+
+.bf-toc li {
+ position: relative;
+ list-style: none;
+ margin: 0;
+}
+
+/* second level */
+.bf-toc :is(ul, ol) {
+ display: grid;
+ margin-top: 8px;
+ gap: 8px;
+ 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) {
+ margin-top: var(--bfs4);
+ gap: var(--bfs4);
+}
+
+.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);
+}
+
+:root,
+::backdrop {
+ --bfc-overlay: rgba(0, 0, 0, 0.7);
+ --bfc-overlay-c: white;
+}
+
+html,
+.bf-darkmode {
+ color-scheme: only dark;
+ --bfc-base-hs: 212, 70%;
+ --bfc-base-hsl: var(--bfc-base-hs), 9%;
+ --bfc-base-1: hsl(var(--bfc-base-hsl));
+ --bfc-base-2-hsl: 210, 64%, 11%;
+ --bfc-base-2: hsl(var(--bfc-base-2-hsl));
+ --bfc-base-3-hsl: 210, 55%, 13%;
+ --bfc-base-3: hsl(var(--bfc-base-3-hsl));
+ --bfc-base: var(--bfc-base-1);
+ --bfc-base-c-hsl: 240, 14%, 96%;
+ --bfc-base-c-1: hsl(var(--bfc-base-c-hsl));
+ --bfc-base-c-2: hsl(212, 15%, 60%);
+ --bfc-base-c: var(--bfc-base-c-1);
+ --bfc-base-c-theme: var(--bfc-theme);
+ --bfc-base-c-success: hsl(var(--bfc-success-hs), 48%);
+ --bfc-base-c-warning: hsl(49, 100%, 79%);
+ --bfc-base-c-alert: hsl(7, 100%, 60%);
+ --bfc-base-c-attn: hsl(324, 100%, 60%);
+ --bfc-base-c-chill: var(--bfc-chill);
+ --bfc-base-c-wcag: hsl(220, 10%, 43%);
+ --bfc-base-c-dimmed: var(--bfc-base-dimmed);
+ --bfc-base-c-disabled: hsl(212, 18%, 35%);
+ --bfc-base-dimmed-hsl: 212, 29%, 20%;
+ --bfc-base-dimmed: hsl(var(--bfc-base-dimmed-hsl));
+ --bfc-base-dimmed-1: var(var(--bfc-base-dimmed));
+ --bfc-base-dimmed-2-hsl: 210, 39%, 17%;
+ --bfc-base-dimmed-2: hsl(var(--bfc-base-dimmed-2-hsl));
+ --bfc-base-dimmed-c: var(--bfc-base-c-1);
+ --bfc-base-dimmed-3-hsl: 210, 29%, 22%;
+ --bfc-base-dimmed-3: hsl(var(--bfc-base-dimmed-3-hsl));
+ --bfc-base-disabled-hsl: 212, 22%, 34%;
+ --bfc-base-disabled: hsl(var(--bfc-base-disabled-hsl));
+ --bfc-base-disabled-c: var(--bfc-base-c-2);
+ --bfc-base-c-inverted-hsl: 0, 0%, 100%;
+ --bfc-base-c-inverted-1: hsl(var(--bfc-base-c-inverted-hsl));
+ --bfc-base-c-inverted-2: hsl(235, 16%, 85%);
+ --bfc-base-c-inverted-3: hsl(216, 7%, 86%);
+ --bfc-base-c-inverted: var(--bfc-base-c-inverted-1);
+ --bfc-theme-hs: 173, 90%;
+ --bfc-theme-hsl: var(--bfc-theme-hs), 50%;
+ --bfc-theme-1: hsl(var(--bfc-theme-hsl));
+ --bfc-theme-2: hsl(var(--bfc-theme-hs), 70%);
+ --bfc-theme-3: hsl(var(--bfc-theme-hs), 80%);
+ --bfc-theme: var(--bfc-theme-1);
+ --bfc-theme-c-hsl: 188, 100%, 15%;
+ --bfc-theme-c-1: hsl(var(--bfc-theme-c-hsl));
+ --bfc-theme-c-2-hsl: 188, 100%, 25%;
+ --bfc-theme-c-2: hsl(var(--bfc-theme-c-2-hsl));
+ --bfc-theme-c-base-3: var(--bfc-base-3);
+ --bfc-theme-c: var(--bfc-theme-c-1);
+ --bfc-theme-gradient: linear-gradient(
+ 90deg,
+ var(--bfc-theme-3),
+ var(--bfc-theme-1)
+ );
+ --bfc-theme-grad: var(--bfc-theme-gradient);
+ --bfc-success-hs: 157, 100%;
+ --bfc-success-hsl: var(--bfc-success-hs), 48%;
+ --bfc-success: hsl(var(--bfc-success-hsl));
+ --bfc-success-c-hsl: var(--bfc-success-hs), 10%;
+ --bfc-success-c: hsl(var(--bfc-success-c-hsl));
+ --bfc-success-fade-hsl: var(--bfc-success-hs), 23%;
+ --bfc-success-fade: hsl(var(--bfc-success-fade-hsl));
+ --bfc-success-fade-c-hsl: var(--bfc-success-hs), 80%;
+ --bfc-success-fade-c: hsl(var(--bfc-success-fade-c-hsl));
+ --bfc-warning-hs: 43, 100%;
+ --bfc-warning-hsl: var(--bfc-warning-hs), 66%;
+ --bfc-warning: hsl(var(--bfc-warning-hsl));
+ --bfc-warning-c-hsl: var(--bfc-warning-hs), 5%;
+ --bfc-warning-c: hsl(var(--bfc-warning-c-hsl));
+ --bfc-warning-fade-hsl: 39, 100%, 20%;
+ --bfc-warning-fade: hsl(var(--bfc-warning-fade-hsl));
+ --bfc-warning-fade-c-hsl: 49, 100%, 79%;
+ --bfc-warning-fade-c: hsl(var(--bfc-warning-fade-c-hsl));
+ --bfc-alert-hsl: 8, 75%, 45%;
+ --bfc-alert: hsl(var(--bfc-alert-hsl));
+ --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-fade-hsl: 346, 26%, 23%;
+ --bfc-alert-fade-1: hsl(var(--bfc-alert-fade-hsl));
+ --bfc-alert-fade-2: hsl(7, 100%, 13%);
+ --bfc-alert-fade: var(--bfc-alert-fade-1);
+ --bfc-alert-fade-c-hsl: 7, 100%, 70%;
+ --bfc-alert-fade-1-c: hsl(var(--bfc-alert-fade-c-hsl));
+ --bfc-alert-fade-2-c-hsl: 7, 100%, 70%;
+ --bfc-alert-fade-2-c: hsl(var(--bfc-alert-fade-2-c-hsl));
+ --bfc-alert-fade-c: var(--bfc-alert-fade-1-c);
+ --bfc-attn-hsl: 324, 100%, 64%;
+ --bfc-attn: hsl(var(--bfc-attn-hsl));
+ --bfc-attn-c: hsl(324, 100%, 15%);
+ --bfc-chill-hsl: 259, 100%, 73%;
+ --bfc-chill: hsl(var(--bfc-chill-hsl));
+ --bfc-chill-c: hsl(259, 89%, 21%);
+ --bfc-theme-fade-hsl: var(--bfc-theme-c-hsl);
+ --bfc-theme-fade: hsl(var(--bfc-theme-fade-hsl));
+ --bfc-theme-fade-c-hsl: var(--bfc-theme-hsl);
+ --bfc-theme-fade-c: hsl(var(--bfc-theme-fade-c-hsl));
+ --bff-base: var(--bfc-base-c);
+ --bff-base-2: var(--bfc-base-c-2);
+ --bff-theme: var(--bfc-base-c-theme);
+ --bff-attn: var(--bfc-base-c-attn);
+ --bff-success: var(--bfc-base-c-success);
+ --bff-warning: var(--bfc-base-c-warning);
+ --bff-alert: var(--bfc-base-c-alert);
+ --bff-wcag: var(--bfc-base-c-wcag);
+ --bff-dimmed: var(--bfc-base-c-dimmed);
+ --bff-disabled: var(--bfc-base-c-disabled);
+ --bff-inverted: var(--bfc-base-c-inverted);
+ --bff-inverted-2: var(--bfc-base-c-inverted-2);
+ --bff-chill: var(--bfc-base-c-chill);
+ --bft-base: var(--bfc-base-c);
+ --bft-base-2: var(--bfc-base-c-2);
+ --bft-theme: var(--bfc-base-c-theme);
+ --bft-disabled: var(--bfc-base-c-disabled);
+ --bfc-shadow: rgba(0, 0, 0, 0.3);
+ --bf-shadow-blur: 8px;
+ --bf-shadow: 0 0 var(--bf-shadow-blur) var(--bfc-shadow);
+ --bf-shadow-top: 0 -4px var(--bf-shadow-blur) var(--bfc-shadow);
+ --bf-shadow-right: 4px 0 var(--bf-shadow-blur) var(--bfc-shadow);
+ --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-lightmode {
+ color-scheme: only light;
+ --bfc-base-hs: 238, 15%;
+ --bfc-base-hsl: var(--bfc-base-hs), 96%;
+ --bfc-base-1: hsl(var(--bfc-base-hsl));
+ --bfc-base-2-hsl: 238, 10%, 98%;
+ --bfc-base-2: hsl(var(--bfc-base-2-hsl));
+ --bfc-base-3-hsl: 0, 0%, 100%;
+ --bfc-base-3: hsl(var(--bfc-base-3-hsl));
+ --bfc-base: var(--bfc-base-1);
+ --bfc-base-c-hsl: 212, 70%, 9%;
+ --bfc-base-c-1: hsl(var(--bfc-base-c-hsl));
+ --bfc-base-c-2: hsl(238, 16%, 40%);
+ --bfc-base-c: var(--bfc-base-c-1);
+ --bfc-base-c-theme: var(--bfc-theme);
+ --bfc-base-c-success: hsl(var(--bfc-success-hs), 24%);
+ --bfc-base-c-warning: hsl(42, 82%, 30%);
+ --bfc-base-c-alert: hsl(7, 77%, 41%);
+ --bfc-base-c-attn: hsl(324, 100%, 40%);
+ --bfc-base-c-chill: var(--bfc-chill);
+ --bfc-base-c-wcag: hsl(240, 5%, 57%);
+ --bfc-base-c-dimmed: var(--bfc-base-dimmed);
+ --bfc-base-c-disabled: hsl(238, 18%, 65%);
+ --bfc-base-dimmed-hsl: 238, 16%, 85%;
+ --bfc-base-dimmed: hsl(var(--bfc-base-dimmed-hsl));
+ --bfc-base-dimmed-1: var(var(--bfc-base-dimmed));
+ --bfc-base-dimmed-2-hsl: 216, 7%, 86%;
+ --bfc-base-dimmed-2: hsl(var(--bfc-base-dimmed-2-hsl));
+ --bfc-base-dimmed-c: var(--bfc-base-c-1);
+ --bfc-base-dimmed-3-hsl: 210, 7%, 77%;
+ --bfc-base-dimmed-3: hsl(var(--bfc-base-dimmed-3-hsl));
+ --bfc-base-disabled-hsl: 238, 18%, 65%;
+ --bfc-base-disabled: hsl(var(--bfc-base-disabled-hsl));
+ --bfc-base-disabled-c: var(--bfc-base-c-2);
+ --bfc-base-c-inverted-hsl: 210, 55%, 13%;
+ --bfc-base-c-inverted-1: hsl(var(--bfc-base-c-inverted-hsl));
+ --bfc-base-c-inverted-2: hsl(212, 29%, 26%);
+ --bfc-base-c-inverted-3: hsl(210, 39%, 17%);
+ --bfc-base-c-inverted: var(--bfc-base-c-inverted-1);
+ --bfc-theme-hs: 238, 90%;
+ --bfc-theme-hsl: var(--bfc-theme-hs), 50%;
+ --bfc-theme-1: hsl(var(--bfc-theme-hsl));
+ --bfc-theme-2: hsl(var(--bfc-theme-hs), 40%);
+ --bfc-theme-3: hsl(var(--bfc-theme-hs), 25%);
+ --bfc-theme: var(--bfc-theme-1);
+ --bfc-theme-c-hsl: 238, 100%, 93%;
+ --bfc-theme-c-1: hsl(var(--bfc-theme-c-hsl));
+ --bfc-theme-c-2-hsl: 238, 100%, 85%;
+ --bfc-theme-c-2: hsl(var(--bfc-theme-c-2-hsl));
+ --bfc-theme-c-base-3: var(--bfc-base-3);
+ --bfc-theme-c: var(--bfc-theme-c-1);
+ --bfc-theme-gradient: linear-gradient(
+ 90deg,
+ var(--bfc-theme-3),
+ var(--bfc-theme-1)
+ );
+ --bfc-theme-grad: var(--bfc-theme-gradient);
+ --bfc-success-hs: 157, 100%;
+ --bfc-success-hsl: var(--bfc-success-hs), 48%;
+ --bfc-success: hsl(var(--bfc-success-hsl));
+ --bfc-success-c-hsl: var(--bfc-success-hs), 10%;
+ --bfc-success-c: hsl(var(--bfc-success-c-hsl));
+ --bfc-success-fade-hsl: 144, 100%, 82%;
+ --bfc-success-fade: hsl(var(--bfc-success-fade-hsl));
+ --bfc-success-fade-c-hsl: 144, 100%, 20%;
+ --bfc-success-fade-c: hsl(var(--bfc-success-fade-c-hsl));
+ --bfc-warning-hs: 42, 100%;
+ --bfc-warning-hsl: var(--bfc-warning-hs), 66%;
+ --bfc-warning: hsl(var(--bfc-warning-hsl));
+ --bfc-warning-c-hsl: var(--bfc-warning-hs), 5%;
+ --bfc-warning-c: hsl(var(--bfc-warning-c-hsl));
+ --bfc-warning-fade-hsl: var(--bfc-warning-hs), 90%;
+ --bfc-warning-fade: hsl(var(--bfc-warning-fade-hsl));
+ --bfc-warning-fade-c-hsl: var(--bfc-warning-hs), 20%;
+ --bfc-warning-fade-c: hsl(var(--bfc-warning-fade-c-hsl));
+ --bfc-alert-fade-hsl: 8, 100%, 94%;
+ --bfc-alert-fade-1: hsl(var(--bfc-alert-fade-hsl));
+ --bfc-alert-fade-2: hsl(7, 100%, 95%);
+ --bfc-alert-fade: var(--bfc-alert-fade-1);
+ --bfc-alert-fade-c-hsl: 7, 77%, 41%;
+ --bfc-alert-fade-1-c: hsl(var(--bfc-alert-fade-c-hsl));
+ --bfc-alert-fade-2-c-hsl: 7, 100%, 40%;
+ --bfc-alert-fade-2-c: hsl(var(--bfc-alert-fade-2-c-hsl));
+ --bfc-alert-fade-c: var(--bfc-alert-fade-1-c);
+ --bfc-attn-hsl: 324, 100%, 36%;
+ --bfc-attn: hsl(var(--bfc-attn-hsl));
+ --bfc-attn-c: hsl(324, 100%, 90%);
+ --bfc-chill-hsl: 259, 62%, 46%;
+ --bfc-chill: hsl(var(--bfc-chill-hsl));
+ --bfc-chill-c: hsl(259, 100%, 89%);
+ --bfc-theme-fade-hsl: var(--bfc-theme-c-hsl);
+ --bfc-theme-fade: hsl(var(--bfc-theme-fade-hsl));
+ --bfc-theme-fade-c-hsl: var(--bfc-theme-hsl);
+ --bfc-theme-fade-c: hsl(var(--bfc-theme-fade-c-hsl));
+ --bff-base: var(--bfc-base-c);
+ --bff-base-2: var(--bfc-base-c-2);
+ --bff-theme: var(--bfc-base-c-theme);
+ --bff-attn: var(--bfc-base-c-attn);
+ --bff-success: var(--bfc-base-c-success);
+ --bff-warning: var(--bfc-base-c-warning);
+ --bff-alert: var(--bfc-base-c-alert);
+ --bff-wcag: var(--bfc-base-c-wcag);
+ --bff-dimmed: var(--bfc-base-c-dimmed);
+ --bff-disabled: var(--bfc-base-c-disabled);
+ --bff-inverted: var(--bfc-base-c-inverted);
+ --bff-inverted-2: var(--bfc-base-c-inverted-2);
+ --bff-chill: var(--bfc-base-c-chill);
+ --bft-base: var(--bfc-base-c);
+ --bft-base-2: var(--bfc-base-c-2);
+ --bft-theme: var(--bfc-base-c-theme);
+ --bft-disabled: var(--bfc-base-c-disabled);
+ --bfc-shadow: rgba(0, 0, 0, 0.1);
+ --bf-shadow: 0 0 var(--bf-shadow-blur) var(--bfc-shadow);
+ --bf-shadow-top: 0 -4px var(--bf-shadow-blur) var(--bfc-shadow);
+ --bf-shadow-right: 4px 0 var(--bf-shadow-blur) var(--bfc-shadow);
+ --bf-shadow-bottom: 0 4px var(--bf-shadow-blur) var(--bfc-shadow);
+ --bf-shadow-left: -4px 0 var(--bf-shadow-blur) var(--bfc-shadow);
+}
+
+@media (prefers-color-scheme: light) {
+ html {
+ color-scheme: only light;
+ --bfc-base-hs: 238, 15%;
+ --bfc-base-hsl: var(--bfc-base-hs), 96%;
+ --bfc-base-1: hsl(var(--bfc-base-hsl));
+ --bfc-base-2-hsl: 238, 10%, 98%;
+ --bfc-base-2: hsl(var(--bfc-base-2-hsl));
+ --bfc-base-3-hsl: 0, 0%, 100%;
+ --bfc-base-3: hsl(var(--bfc-base-3-hsl));
+ --bfc-base: var(--bfc-base-1);
+ --bfc-base-c-hsl: 212, 70%, 9%;
+ --bfc-base-c-1: hsl(var(--bfc-base-c-hsl));
+ --bfc-base-c-2: hsl(238, 16%, 40%);
+ --bfc-base-c: var(--bfc-base-c-1);
+ --bfc-base-c-theme: var(--bfc-theme);
+ --bfc-base-c-success: hsl(var(--bfc-success-hs), 24%);
+ --bfc-base-c-warning: hsl(42, 82%, 30%);
+ --bfc-base-c-alert: hsl(7, 77%, 41%);
+ --bfc-base-c-attn: hsl(324, 100%, 40%);
+ --bfc-base-c-chill: var(--bfc-chill);
+ --bfc-base-c-wcag: hsl(240, 5%, 57%);
+ --bfc-base-c-dimmed: var(--bfc-base-dimmed);
+ --bfc-base-c-disabled: hsl(238, 18%, 65%);
+ --bfc-base-dimmed-hsl: 238, 16%, 85%;
+ --bfc-base-dimmed: hsl(var(--bfc-base-dimmed-hsl));
+ --bfc-base-dimmed-1: var(var(--bfc-base-dimmed));
+ --bfc-base-dimmed-2-hsl: 216, 7%, 86%;
+ --bfc-base-dimmed-2: hsl(var(--bfc-base-dimmed-2-hsl));
+ --bfc-base-dimmed-c: var(--bfc-base-c-1);
+ --bfc-base-dimmed-3-hsl: 210, 7%, 77%;
+ --bfc-base-dimmed-3: hsl(var(--bfc-base-dimmed-3-hsl));
+ --bfc-base-disabled-hsl: 238, 18%, 65%;
+ --bfc-base-disabled: hsl(var(--bfc-base-disabled-hsl));
+ --bfc-base-disabled-c: var(--bfc-base-c-2);
+ --bfc-base-c-inverted-hsl: 210, 55%, 13%;
+ --bfc-base-c-inverted-1: hsl(var(--bfc-base-c-inverted-hsl));
+ --bfc-base-c-inverted-2: hsl(212, 29%, 26%);
+ --bfc-base-c-inverted-3: hsl(210, 39%, 17%);
+ --bfc-base-c-inverted: var(--bfc-base-c-inverted-1);
+ --bfc-theme-hs: 238, 90%;
+ --bfc-theme-hsl: var(--bfc-theme-hs), 50%;
+ --bfc-theme-1: hsl(var(--bfc-theme-hsl));
+ --bfc-theme-2: hsl(var(--bfc-theme-hs), 40%);
+ --bfc-theme-3: hsl(var(--bfc-theme-hs), 25%);
+ --bfc-theme: var(--bfc-theme-1);
+ --bfc-theme-c-hsl: 238, 100%, 93%;
+ --bfc-theme-c-1: hsl(var(--bfc-theme-c-hsl));
+ --bfc-theme-c-2-hsl: 238, 100%, 85%;
+ --bfc-theme-c-2: hsl(var(--bfc-theme-c-2-hsl));
+ --bfc-theme-c-base-3: var(--bfc-base-3);
+ --bfc-theme-c: var(--bfc-theme-c-1);
+ --bfc-theme-gradient: linear-gradient(
+ 90deg,
+ var(--bfc-theme-3),
+ var(--bfc-theme-1)
+ );
+ --bfc-theme-grad: var(--bfc-theme-gradient);
+ --bfc-success-hs: 157, 100%;
+ --bfc-success-hsl: var(--bfc-success-hs), 48%;
+ --bfc-success: hsl(var(--bfc-success-hsl));
+ --bfc-success-c-hsl: var(--bfc-success-hs), 10%;
+ --bfc-success-c: hsl(var(--bfc-success-c-hsl));
+ --bfc-success-fade-hsl: 144, 100%, 82%;
+ --bfc-success-fade: hsl(var(--bfc-success-fade-hsl));
+ --bfc-success-fade-c-hsl: 144, 100%, 20%;
+ --bfc-success-fade-c: hsl(var(--bfc-success-fade-c-hsl));
+ --bfc-warning-hs: 42, 100%;
+ --bfc-warning-hsl: var(--bfc-warning-hs), 66%;
+ --bfc-warning: hsl(var(--bfc-warning-hsl));
+ --bfc-warning-c-hsl: var(--bfc-warning-hs), 5%;
+ --bfc-warning-c: hsl(var(--bfc-warning-c-hsl));
+ --bfc-warning-fade-hsl: var(--bfc-warning-hs), 90%;
+ --bfc-warning-fade: hsl(var(--bfc-warning-fade-hsl));
+ --bfc-warning-fade-c-hsl: var(--bfc-warning-hs), 20%;
+ --bfc-warning-fade-c: hsl(var(--bfc-warning-fade-c-hsl));
+ --bfc-alert-fade-hsl: 8, 100%, 94%;
+ --bfc-alert-fade-1: hsl(var(--bfc-alert-fade-hsl));
+ --bfc-alert-fade-2: hsl(7, 100%, 95%);
+ --bfc-alert-fade: var(--bfc-alert-fade-1);
+ --bfc-alert-fade-c-hsl: 7, 77%, 41%;
+ --bfc-alert-fade-1-c: hsl(var(--bfc-alert-fade-c-hsl));
+ --bfc-alert-fade-2-c-hsl: 7, 100%, 40%;
+ --bfc-alert-fade-2-c: hsl(var(--bfc-alert-fade-2-c-hsl));
+ --bfc-alert-fade-c: var(--bfc-alert-fade-1-c);
+ --bfc-attn-hsl: 324, 100%, 36%;
+ --bfc-attn: hsl(var(--bfc-attn-hsl));
+ --bfc-attn-c: hsl(324, 100%, 90%);
+ --bfc-chill-hsl: 259, 62%, 46%;
+ --bfc-chill: hsl(var(--bfc-chill-hsl));
+ --bfc-chill-c: hsl(259, 100%, 89%);
+ --bfc-theme-fade-hsl: var(--bfc-theme-c-hsl);
+ --bfc-theme-fade: hsl(var(--bfc-theme-fade-hsl));
+ --bfc-theme-fade-c-hsl: var(--bfc-theme-hsl);
+ --bfc-theme-fade-c: hsl(var(--bfc-theme-fade-c-hsl));
+ --bff-base: var(--bfc-base-c);
+ --bff-base-2: var(--bfc-base-c-2);
+ --bff-theme: var(--bfc-base-c-theme);
+ --bff-attn: var(--bfc-base-c-attn);
+ --bff-success: var(--bfc-base-c-success);
+ --bff-warning: var(--bfc-base-c-warning);
+ --bff-alert: var(--bfc-base-c-alert);
+ --bff-wcag: var(--bfc-base-c-wcag);
+ --bff-dimmed: var(--bfc-base-c-dimmed);
+ --bff-disabled: var(--bfc-base-c-disabled);
+ --bff-inverted: var(--bfc-base-c-inverted);
+ --bff-inverted-2: var(--bfc-base-c-inverted-2);
+ --bff-chill: var(--bfc-base-c-chill);
+ --bft-base: var(--bfc-base-c);
+ --bft-base-2: var(--bfc-base-c-2);
+ --bft-theme: var(--bfc-base-c-theme);
+ --bft-disabled: var(--bfc-base-c-disabled);
+ --bfc-shadow: rgba(0, 0, 0, 0.1);
+ --bf-shadow: 0 0 var(--bf-shadow-blur) var(--bfc-shadow);
+ --bf-shadow-top: 0 -4px var(--bf-shadow-blur) var(--bfc-shadow);
+ --bf-shadow-right: 4px 0 var(--bf-shadow-blur) var(--bfc-shadow);
+ --bf-shadow-bottom: 0 4px var(--bf-shadow-blur) var(--bfc-shadow);
+ --bf-shadow-left: -4px 0 var(--bf-shadow-blur) var(--bfc-shadow);
+ }
+ html:not(.bf-darkmode) .bf-dark-only {
+ display: none !important;
+ }
+}
+@media (prefers-color-scheme: dark) {
+ html:not(.bf-lightmode) .bf-light-only {
+ display: none !important;
+ }
+}
+html.bf-darkmode .bf-light-only {
+ display: none !important;
+}
+
+html.bf-lightmode .bf-dark-only {
+ display: none !important;
+}
+
+.bfc-base-1-bg,
+.bfc-base-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-base-c-1-bg,
+.bfc-base-c-bg {
+ background-color: var(--bfc-base-c);
+ color: var(--bfc-base-3);
+}
+
+.bfc-base-c-2-bg {
+ background-color: var(--bfc-base-c-2);
+ color: var(--bfc-base-3);
+}
+
+.bfc-dimmed-bg {
+ background-color: var(--bfc-base-dimmed);
+ color: var(--bfc-base-dimmed-c);
+}
+
+.bfc-dimmed-c-bg {
+ background-color: var(--bfc-base-dimmed-c);
+ color: var(--bfc-base-dimmed);
+}
+
+.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-c-base-3);
+}
+
+.bfc-theme-fade-bg {
+ background-color: var(--bfc-theme-fade);
+ color: var(--bfc-theme-fade-c);
+}
+
+.bfc-success-bg {
+ background-color: var(--bfc-success);
+ color: var(--bfc-success-c);
+}
+
+.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-c);
+}
+
+.bfc-warning-fade-bg {
+ background-color: var(--bfc-warning-fade);
+ color: var(--bfc-warning-fade-c);
+}
+
+.bfc-alert-bg {
+ background-color: var(--bfc-alert);
+ color: var(--bfc-alert-c);
+}
+
+.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-c);
+}
+
+.bfc-attn-c-bg {
+ background-color: var(--bfc-attn-c);
+ color: var(--bfc-attn);
+}
+
+.bfc-chill-bg {
+ background-color: var(--bfc-chill);
+ color: var(--bfc-chill-c);
+}
+
+.bfc-chill-c-bg {
+ background-color: var(--bfc-chill-c);
+ color: var(--bfc-chill);
+}
+
+.bfc-base-c-attn-bg {
+ background-color: var(--bfc-base-c-attn);
+ color: var(--bfc-base-3);
+}
+
+.bfc-base-c-chill-bg {
+ background-color: var(--bfc-base-c-chill);
+ color: var(--bfc-base-3);
+}
+
+:where(.bfc-dimmed-bg,
+.bfc-dimmed-c-bg,
+.bfc-inverted-bg,
+.bfc-inverted-2-bg,
+.bfc-theme-bg,
+.bfc-theme-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,
+.bfc-attn-bg,
+.bfc-attn-c-bg,
+.bfc-chill-bg,
+.bfc-chill-c-bg,
+.bfc-base-c-attn-bg,
+.bfc-base-c-chill-bg,
+.bfc-base-c-bg,
+.bfc-base-c-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-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);
+}
+
+/* stylelint-disable no-duplicate-selectors */
+html {
+ box-sizing: border-box;
+}
+
+*,
+*::after,
+*::before {
+ box-sizing: inherit;
+}
+
+:root {
+ /* spacing */
+ --bfs0: 0rem;
+ --bfs2: 0.125rem;
+ --bfs4: 0.25rem;
+ --bfs6: 0.375rem;
+ --bfs8: 0.5rem;
+ --bfs12: 0.75rem;
+ --bfs16: 1rem;
+ --bfs24: 1.5rem;
+ --bfs28: 1.75rem;
+ --bfs32: 2rem;
+ --bfs40: 2.5rem;
+ --bfs48: 3rem;
+ --bfs52: 3.25rem;
+ --bfs56: 3.5rem;
+ --bfs80: 5rem;
+ /* font sizes */
+ --bf-font-size-s: var(--bfs12); /* 12px - small, .bf-small */
+ --bf-font-size-m: 0.875rem; /* 14px - p, body, label, .bf-medium */
+ --bf-font-size-l: var(--bfs16); /* 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: var(--bfs24); /* 24px - h3 */
+ --bf-font-size-h2: 1.8125rem; /* 29px - h2 */
+ --bf-font-size-h1: var(--bfs32); /* 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);
+ /**
+ * @deprecated Use `--bf-radius-xs` instead!
+ */
+ --bfl-border-radius: var(--bf-radius-xs);
+ /* transition and animations */
+ --bf-animation-duration: 0.2s;
+ --bf-timing-function: ease;
+}
+
+/* general utility classes */
+/**
+* @deprecated Use `.bf-radius-xs` instead!
+*/
+.bfl-border-radius,
+.bf-border-radius {
+ border-radius: var(--bf-radius-xs);
+ --deprecated: "Use `.bf-radius-xs` instead!";
+}
+
+.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 `` */
+:where(.bf-block) {
+ display: block;
+}
+
+/* since buttons behave differently than all other inline elements, explicitly
+set full width to make it behave like a block level element */
+:where(button.bf-block) {
+ width: 100%;
+}
+
+/* branding logo color */
+svg:where(.bf-it-logo, .bf-intility-logo) {
+ fill: currentcolor;
+}
+
+/* #region scren/viewport media queries */
+@media (max-width: 599.9px) {
+ .from-small {
+ display: none !important;
+ }
+}
+@media (min-width: 600px) {
+ .to-small {
+ display: none !important;
+ }
+}
+@media (max-width: 959.9px) {
+ .from-medium {
+ display: none !important;
+ }
+}
+@media (min-width: 960px) {
+ .to-medium {
+ display: none !important;
+ }
+}
+@media (max-width: 1279.9px) {
+ .from-large {
+ display: none !important;
+ }
+}
+@media (min-width: 1280px) {
+ .to-large {
+ display: none !important;
+ }
+}
+@media (max-width: 1599.9px) {
+ .from-xl {
+ display: none !important;
+ }
+}
+@media (min-width: 1600px) {
+ .to-xl {
+ display: none !important;
+ }
+}
+@media (max-width: 1919.9px) {
+ .from-xxl {
+ display: none !important;
+ }
+}
+@media (min-width: 1920px) {
+ .to-xxl {
+ display: none !important;
+ }
+}
+/* #endregion */
+/* #region container queries */
+@supports (container-type: inline-size) {
+ :where(.bf-container) {
+ container-name: bf-container;
+ container-type: inline-size;
+ }
+ @container bf-container (width < 300px) {
+ .from-xs-container {
+ display: none !important;
+ }
+ }
+ @container bf-container (300px <= width) {
+ .to-xs-container {
+ display: none !important;
+ }
+ }
+ @container bf-container (width < 600px) {
+ .from-s-container,
+ .from-small-container {
+ display: none !important;
+ }
+ }
+ @container bf-container (600px <= width) {
+ .to-s-container,
+ .to-small-container {
+ display: none !important;
+ }
+ }
+ @container bf-container (width < 960px) {
+ .from-m-container,
+ .from-medium-container {
+ display: none !important;
+ }
+ }
+ @container bf-container (960px <= width) {
+ .to-m-container,
+ .to-medium-container {
+ display: none !important;
+ }
+ }
+ @container bf-container (width < 1280px) {
+ .from-l-container,
+ .from-large-container {
+ display: none !important;
+ }
+ }
+ @container bf-container (1280px <= width) {
+ .to-l-container,
+ .to-large-container {
+ display: none !important;
+ }
+ }
+ @container bf-container (width < 1600px) {
+ .from-xl-container {
+ display: none !important;
+ }
+ }
+ @container bf-container (1600px <= width ) {
+ .to-xl-container {
+ display: none !important;
+ }
+ }
+ @container bf-container (width < 1920px) {
+ .from-xxl-container {
+ display: none !important;
+ }
+ }
+ @container bf-container (1920px <= width) {
+ .to-xxl-container {
+ display: none !important;
+ }
+ }
+}
+/* fall back to media queries if container queries are not supported */
+@supports not (container-type: inline-size) {
+ @media (max-width: 299.9px) {
+ .from-xs-container {
+ display: none !important;
+ }
+ }
+ @media (min-width: 300px) {
+ .to-xs-container {
+ display: none !important;
+ }
+ }
+ @media (max-width: 599.9px) {
+ .from-s-container,
+ .from-small-container {
+ display: none !important;
+ }
+ }
+ @media (min-width: 600px) {
+ .to-s-container,
+ .to-small-container {
+ display: none !important;
+ }
+ }
+ @media (max-width: 959.9px) {
+ .from-m-container,
+ .from-medium-container {
+ display: none !important;
+ }
+ }
+ @media (min-width: 960px) {
+ .to-m-container,
+ .to-medium-container {
+ display: none !important;
+ }
+ }
+ @media (max-width: 1279.9px) {
+ .from-l-container,
+ .from-large-container {
+ display: none !important;
+ }
+ }
+ @media (min-width: 1280px) {
+ .to-l-container,
+ .to-large-container {
+ display: none !important;
+ }
+ }
+ @media (max-width: 1599.9px) {
+ .from-xl-container {
+ display: none !important;
+ }
+ }
+ @media (min-width: 1600px) {
+ .to-xl-container {
+ display: none !important;
+ }
+ }
+ @media (max-width: 1919.9px) {
+ .from-xxl-container {
+ display: none !important;
+ }
+ }
+ @media (min-width: 1920px) {
+ .to-xxl-container {
+ display: none !important;
+ }
+ }
+}
+/* #endregion */
+/* stylelint-disable selector-class-pattern */
+.bf-textarea-container,
+.bf-input-container,
+.bf-select-container,
+.bf-datepicker-container {
+ font-size: var(--bf-font-size-m);
+}
+
+/* REQUIRED TEXT */
+.bf-label-required {
+ color: var(--bfc-base-c-2);
+ font-weight: normal;
+ font-style: italic;
+ margin-left: var(--bfs4);
+}
+
+/* DESCRIPTION */
+.bf-label-description {
+ color: var(--bfc-base-c-2);
+ font-weight: normal;
+ font-size: var(--bf-font-size-m);
+}
+
+/* PLACEHOLDER TEXT */
+.bf-input::placeholder,
+.bf-textarea::placeholder,
+.bf-datepicker::placeholder {
+ color: var(--bfc-base-c-2);
+ opacity: 1;
+}
+
+/* DISABLED */
+.bf-input-disabled.bf-input-container .bf-input,
+.bf-input-disabled.bf-input-container .bf-input:hover,
+.bf-datepicker-disabled.bf-datepicker-container .bf-datepicker,
+.bf-datepicker-disabled.bf-datepicker-container .bf-datepicker:hover,
+.bf-textarea:disabled,
+.bf-textarea-disabled.bf-textarea-container .bf-textarea:hover {
+ cursor: default;
+ color: var(--bfc-base-c);
+ border-color: transparent;
+ background: var(--bfc-base-dimmed);
+}
+
+.bf-input-disabled.bf-input-container .bf-input::placeholder,
+.bf-datepicker-disabled.bf-datepicker-container .bf-datepicker::placeholder,
+.bf-textarea:disabled::placeholder {
+ color: var(--bfc-base-c-2);
+}
+
+/* DISABLED LABEL ICON */
+.bf-label > .bf-input-disabled-icon {
+ color: var(--bfc-base-c-2);
+ margin: 0 var(--bfs4);
+}
+
+/* INPUT FIELD */
+.bf-textarea,
+.bf-input,
+.bf-select,
+.bf-datepicker {
+ background: var(--bfc-base-3);
+ color: var(--bfc-base-c);
+ border: 1px solid var(--bfc-base-c-wcag);
+ border-radius: var(--bf-radius-s);
+ font-family: inherit;
+ font-size: var(--bf-font-size-l);
+ padding: 7px var(--bfs12);
+ width: 100%;
+}
+
+/* INPUT FIELD HOVER */
+.bf-textarea:hover,
+.bf-input:hover,
+.bf-select:hover,
+.bf-datepicker:hover {
+ border-color: var(--bfc-base-c-inverted);
+}
+
+/* INPUT FIELD FOCUS */
+.bf-textarea:focus,
+.bf-input:focus,
+.bf-select:focus,
+.bf-input-focus,
+.bf-datepicker:focus {
+ border-color: var(--bfc-base-c-inverted);
+ outline: none;
+ box-shadow: inset 0 0 0 1px var(--bfc-base-c-inverted);
+}
+
+/* loading spinner */
+.bf-input-loading-icon {
+ font-size: var(--bf-font-size-l);
+}
+
+.bf-input-icon-button .bf-input-loading-icon {
+ color: inherit;
+}
+
+.bf-select-container .bf-input-loading-icon {
+ margin-top: 3px;
+ margin-right: 3px;
+}
+
+/* FEEDBACK TEXT */
+.bf-label-feedback {
+ color: var(--bfc-base-c);
+ text-align: right;
+ font-size: var(--bf-font-size-s);
+ margin-top: 4px;
+}
+
+.bf-label-feedback > :first-child {
+ margin: 0;
+}
+
+/* ALERT BORDER COLOR */
+.bf-input-alert .bf-input,
+.bf-textarea-alert .bf-textarea,
+.bf-select-alert .bf-select__control,
+.bf-datepicker-alert .bf-datepicker {
+ border-color: var(--bfc-base-c-alert);
+}
+
+.bf-input-alert .bf-input:hover,
+.bf-textarea-alert .bf-textarea:hover,
+.bf-select-alert .bf-select__control:hover,
+.bf-datepicker-alert .bf-datepicker:hover {
+ border-color: var(--bfc-alert-2);
+}
+
+.bf-input-alert .bf-input:focus,
+.bf-textarea-alert .bf-textarea:focus,
+.bf-select-alert .bf-select__control.bf-select__control--is-focused,
+.bf-datepicker-alert .bf-datepicker:focus {
+ border-color: var(--bfc-base-c-inverted);
+ box-shadow: inset 0 0 0 1px var(--bfc-base-c-inverted);
+}
+
+/* ALERT SVG COLOR */
+.bf-textarea-alert svg,
+.bf-datepicker-alert svg {
+ color: var(--bfc-base-c-alert);
+}
+
+/* label, fieldset and legend */
+.bf-fieldset,
+:where(.bf-content, .bf-elements) fieldset {
+ padding: 0;
+ margin: 0;
+ border: none;
+}
+
+.bf-legend,
+:where(.bf-content, .bf-elements) legend {
+ font-size: var(--bf-font-size-h3);
+ color: var(--bfc-base-c-2);
+ padding: 0;
+ margin: 0;
+}
+
+:where(.bf-content) legend {
+ margin: 0 0 var(--bfs16) 0;
+}
+
+.bf-label,
+:where(.bf-content, .bf-elements) label {
+ font-size: var(--bf-font-size-m);
+ font-weight: 600;
+ color: var(--bfc-base-c);
+ display: block;
+}
+
+/* space between label and input */
+.bf-legend.bf-label,
+:where(.bf-content, .bf-elements) legend.bf-label {
+ margin: 0 0 var(--bfs4) 0;
+}
+
+.bf-label ~ :is(.bf-input,
+.bf-select,
+.bf-input-icon-container,
+.bf-textarea,
+.bf-textarea-icon-container,
+.bf-datepicker-icon-container) {
+ /* Select gets this space from selectStyles object. See Select.tsx */
+ margin-top: var(--bfs4);
+}
+
+/* #region native