@charset "UTF-8";
@layer bf-reset, bf-base, bf-auto, bf-tokens, bf-components, bf-utilities, bf-overrides;
@layer bf-components {
  /* Compact label component — pill-shaped status pellet matching "Response Due", "Draft", etc.
     Variants follow Radix Themes' four-axis system:
       • soft     (default — accent-3 fill, accent-11 text)
       • surface  (accent-2 fill + 1px inset accent-6 ring)
       • solid    (accent-9 fill, white text)
       • outline  (transparent fill, accent-8 ring) */
  .bf-badge {
    --_bg: var(--bf-color-bg-muted);
    --_fg: var(--bf-color-text-base);
    --_border: transparent;
    --_shadow: none;
    display: inline-flex;
    align-items: center;
    gap: var(--bf-space-1);
    padding: 2px var(--bf-space-2);
    background-color: var(--_bg);
    color: var(--_fg);
    border: 1px solid var(--_border);
    border-radius: var(--bf-radius-md);
    font-size: var(--bf-text-xs);
    font-weight: var(--bf-weight-medium);
    line-height: 1.4;
    white-space: nowrap;
    flex-shrink: 0;
    /* Make sure that the height is not stretched in a Flex/Grid layout */
    height: -moz-fit-content;
    height: fit-content;
    box-shadow: var(--_shadow);
  }
  /* Tones — soft fill is the default look for each accent. */
  .bf-badge--neutral {
    --_bg: var(--bf-color-bg-muted);
    --_fg: var(--bf-color-text-base);
  }
  .bf-badge--primary {
    --_bg: var(--bf-color-primary-soft);
    --_fg: var(--bf-color-primary-700);
  }
  .bf-badge--success {
    --_bg: var(--bf-color-success-bg);
    --_fg: var(--bf-color-success-fg);
  }
  .bf-badge--warning {
    --_bg: var(--bf-color-warning-bg);
    --_fg: var(--bf-color-warning-fg);
  }
  .bf-badge--danger {
    --_bg: var(--bf-color-danger-bg);
    --_fg: var(--bf-color-danger-fg);
  }
  .bf-badge--info {
    --_bg: var(--bf-color-info-bg);
    --_fg: var(--bf-color-info-fg);
  }
  /* Surface — subtler than soft; pairs a near-transparent fill with an inset hairline ring,
     like Radix's `surface` variant (accent-2 + inset accent-a6). */
  .bf-badge--surface {
    --_bg: var(--bf-color-bg-base);
    --_shadow: inset 0 0 0 1px var(--bf-color-border-base);
  }
  .bf-badge--surface.bf-badge--primary {
    --_shadow: inset 0 0 0 1px var(--bf-color-primary-6);
  }
  .bf-badge--surface.bf-badge--success {
    --_shadow: inset 0 0 0 1px var(--bf-color-success-border);
  }
  .bf-badge--surface.bf-badge--warning {
    --_shadow: inset 0 0 0 1px var(--bf-color-warning-border);
  }
  .bf-badge--surface.bf-badge--danger {
    --_shadow: inset 0 0 0 1px var(--bf-color-danger-border);
  }
  .bf-badge--surface.bf-badge--info {
    --_shadow: inset 0 0 0 1px var(--bf-color-info-border);
  }
  /* Solid — accent-9 fill with on-color text (Radix's "solid" variant). */
  .bf-badge--solid {
    --_bg: var(--bf-color-text-strong);
    --_fg: var(--bf-color-bg-base);
  }
  .bf-badge--solid.bf-badge--primary {
    --_bg: var(--bf-color-primary-9);
    --_fg: var(--bf-color-on-primary);
  }
  .bf-badge--solid.bf-badge--success {
    --_bg: var(--bf-color-success-solid);
    --_fg: #fff;
  }
  .bf-badge--solid.bf-badge--warning {
    --_bg: var(--bf-color-warning-solid);
    --_fg: #fff;
  }
  .bf-badge--solid.bf-badge--danger {
    --_bg: var(--bf-color-danger-solid);
    --_fg: #fff;
  }
  .bf-badge--solid.bf-badge--info {
    --_bg: var(--bf-color-info-solid);
    --_fg: #fff;
  }
  /* Outline — transparent fill, currentColor ring (Radix's `outline`). */
  .bf-badge--outline {
    --_bg: transparent;
    --_border: currentColor;
  }
  /* Numeric counter — used inside the bell, on tabs, etc. */
  .bf-badge--count {
    min-width: 18px;
    height: 18px;
    padding: 0 var(--bf-space-1);
    border-radius: var(--bf-radius-full);
    font-size: var(--bf-text-2xs);
    justify-content: center;
  }
  /* Pill — softer shape */
  .bf-badge--pill {
    border-radius: var(--bf-radius-pill);
  }
  /* Dot prefix — leading colored dot */
  .bf-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
    display: inline-block;
  }
  /* Sizes */
  .bf-badge--sm {
    font-size: var(--bf-text-2xs);
    padding: 1px var(--bf-space-1_5);
  }
  .bf-badge--lg {
    font-size: var(--bf-text-sm);
    padding: var(--bf-space-1) var(--bf-space-2_5);
  }
} /* end @layer */
/*# sourceMappingURL=bf.badge.css.map */