@charset "UTF-8";
@layer bf-reset, bf-base, bf-auto, bf-tokens, bf-components, bf-utilities, bf-overrides;
@layer bf-components {
  .bf-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--bf-space-1);
    font-size: var(--bf-text-sm);
    color: var(--bf-color-text-muted);
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
  }
  .bf-breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: var(--bf-space-1_5);
    min-width: 0;
  }
  .bf-breadcrumb__link {
    display: inline-flex;
    align-items: center;
    gap: var(--bf-space-1_5);
    color: var(--bf-color-text-link);
    font-weight: var(--bf-weight-medium);
    padding: var(--bf-space-1) var(--bf-space-1_5);
    border-radius: var(--bf-radius-sm);
    text-decoration: none;
    white-space: nowrap;
  }
  .bf-breadcrumb__link:hover {
    color: var(--bf-color-text-link-hover);
    background-color: var(--bf-color-surface-hover);
    text-decoration: none;
  }
  .bf-breadcrumb__current {
    color: var(--bf-color-text-strong);
    font-weight: var(--bf-weight-medium);
    padding: var(--bf-space-1) var(--bf-space-1_5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bf-breadcrumb__sep {
    color: var(--bf-color-text-subtle);
    font-size: var(--bf-text-xs);
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
  /* Truncated middle items — appear as "…" */
  .bf-breadcrumb__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 var(--bf-space-2);
    border-radius: var(--bf-radius-sm);
    color: var(--bf-color-text-subtle);
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  .bf-breadcrumb__ellipsis:hover {
    background-color: var(--bf-color-surface-hover);
  }
} /* end @layer */
/* Opt-in inferred children (see card/index.scss). <a> → link, an element
   with [aria-current] → current, and "/" separators are generated between
   items so the host writes only the anchors. */
@layer bf-auto {
  :where(.bf-breadcrumb--auto) > :where(a) {
    display: inline-flex;
    align-items: center;
    gap: var(--bf-space-1_5);
    color: var(--bf-color-text-link);
    font-weight: var(--bf-weight-medium);
    padding: var(--bf-space-1) var(--bf-space-1_5);
    border-radius: var(--bf-radius-sm);
    text-decoration: none;
    white-space: nowrap;
  }
  :where(.bf-breadcrumb--auto) > :where(a):hover {
    color: var(--bf-color-text-link-hover);
    background-color: var(--bf-color-surface-hover);
    text-decoration: none;
  }
  :where(.bf-breadcrumb--auto) > :where([aria-current]) {
    color: var(--bf-color-text-strong);
    font-weight: var(--bf-weight-medium);
    padding: var(--bf-space-1) var(--bf-space-1_5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  :where(.bf-breadcrumb--auto) > :where(*:not(:first-child))::before {
    content: "/";
    color: var(--bf-color-text-subtle);
    font-size: var(--bf-text-xs);
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    margin-inline-end: var(--bf-space-1);
  }
}
/*# sourceMappingURL=bf.breadcrumb.css.map */