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

/* 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;
}

/* 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;
}