.bf-page {
}
.bf-page-header {
    margin-inline: auto;
    padding-inline: var(--bf-page-padding);
    background-color: var(--bfc-base-2);
    border-bottom: var(--bf-border);
    margin-bottom: 1rem;
}
.bf-page-header-content {
    padding-block: var(--bf-page-padding);
    margin-inline: auto;
}
.bf-page-body {
    margin-inline: auto;
    padding-inline: var(--bf-page-padding);
}
.bf-page-body-content {
    margin: auto;
    padding-top: 0.5rem;
}
/* Loaded after bifrost-all.css, so these must not defeat bf-table-noborder. */
.bf-table:not(.bf-table-noborder) {
    border-bottom: var(--bf-border);
    border-right: var(--bf-border);
}
.bf-table:not(.bf-table-noborder) > * > tr > th {
    border-bottom: var(--bf-border);
    border-bottom-width: 2px;
}
/*
 * Positioning for tooltip and dropdown. bifrost-css styles their appearance but
 * contains no position rules at all, so placement is entirely up to the consumer.
 * An anchored wrapper is used rather than CSS anchor positioning, which Firefox
 * and Safari do not support yet, or the Popover API, which still needs anchoring.
 * Trade-off: a panel is clipped by an ancestor with overflow: hidden.
 */
.bf-anchor {
    position: relative;
    display: inline-block;
}
.bf-floating {
    position: absolute;
    z-index: 20;
}
.bf-floating-top {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: var(--bfs8);
}
.bf-floating-bottom {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: var(--bfs8);
}
.bf-floating-left {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: var(--bfs8);
}
.bf-floating-right {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: var(--bfs8);
}
/* Dropdown panels align to an edge of the trigger instead of centring on it. */
.bf-floating-align-start {
    left: 0;
    right: auto;
    transform: none;
}
.bf-floating-align-end {
    left: auto;
    right: 0;
    transform: none;
}

/* Tooltips show on hover and keyboard focus, with no state to track. */
.bf-tooltip-anchor > .bf-tooltip {
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--bf-animation-duration);
    pointer-events: none;
}
.bf-tooltip-anchor:hover > .bf-tooltip,
.bf-tooltip-anchor:focus-within > .bf-tooltip {
    visibility: visible;
    opacity: 1;
}

/* Catches clicks outside an open dropdown without needing JS. */
.bf-dropdown-backdrop {
    position: fixed;
    inset: 0;
    z-index: 19;
}

/* Bifrost has no modal footer class; this is ours, for a right-aligned button row. */
.bf-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--bfs8);
    padding-top: var(--bfs24);
}

/* Not a Bifrost class. Lets wide tables scroll instead of overflowing the page. */
.bf-table-wrapper {
    overflow-x: auto;
}
.bf-nav-top-content > .bf-nav-item {
    border-width: 0;
}

/*
 * Local extensions. These classes are NOT part of @intility/bifrost-css --
 * they are defined here because components in this library emit them.
 * Keep this list short, and prefer real Bifrost classes where they exist.
 */

/* Visually hidden, still announced by screen readers. Bifrost has no
   equivalent utility, so BfSpinner's label needs this one. */
.bf-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.bf-spinner {
    display: inline-flex;
    align-items: center;
    gap: var(--bfs8);
}

/*
 * Avatar is not a Bifrost component at all -- it does not appear in the design
 * system's component list, so the whole thing lives here. Sizing goes through a
 * custom property so callers can set --bf-avatar-size for anything in between.
 */
.bf-avatar {
    --bf-avatar-size: var(--bfs32);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--bf-avatar-size);
    height: var(--bf-avatar-size);
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--bfc-base-3);
    color: var(--bfc-base-c);
    font-size: var(--bf-font-size-s);
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    user-select: none;
}
img.bf-avatar {
    object-fit: cover;
}
.bf-avatar-small {
    --bf-avatar-size: var(--bfs24);
    font-size: var(--bf-font-size-s);
}
.bf-avatar-large {
    --bf-avatar-size: var(--bfs48);
    font-size: var(--bf-font-size-l);
}

/* Bifrost has bf-badge and bf-badge-pill only; compact is ours. */
.bf-badge-compact {
    padding: 0 var(--bfs4);
    font-size: var(--bf-font-size-s);
}

/* Split badge is not a Bifrost component; two bf-badge halves joined into one pill. */
.bf-badge-split {
    display: inline-flex;
    align-items: stretch;
}
.bf-badge-split > .bf-badge-split-left {
    border-radius: var(--bf-radius-xs) 0 0 var(--bf-radius-xs);
}
.bf-badge-split > .bf-badge-split-right {
    border-radius: 0 var(--bf-radius-xs) var(--bf-radius-xs) 0;
}

/* BfDrawer's Size parameter emits these classes, but bifrost-css only defines the
   550px default on :root — the parameter has done nothing since it was added (the
   demo page already documents 400/700/100dvw as the intent). Element-level
   declarations would beat :root's small-screen takeover (max-width/height 599.9px
   -> 100dvw), so the sizes only apply where that takeover does not. */
@media (min-width: 600px) and (min-height: 600px) {
    .bf-drawer.bf-drawer-small {
        --bf-drawer-width: 400px;
    }
    .bf-drawer.bf-drawer-medium {
        --bf-drawer-width: min(700px, 92dvw);
    }
    .bf-drawer.bf-drawer-full {
        --bf-drawer-width: 100dvw;
    }
}