.breadcrumbs {
    width: 100%;
    min-width: 0;
    margin-bottom: var(--p-2);
    color: var(--text-muted);
    font-size: var(--small-font);
}

.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--p-1);
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumbs__item {
    display: flex;
    min-width: 0;
    max-width: 100%;
    align-items: baseline;
    overflow-wrap: anywhere;
}

.breadcrumbs__item + .breadcrumbs__item::before {
    content: "/";
    flex: 0 0 auto;
    margin-right: var(--p-1);
    color: var(--text-muted);
}

.breadcrumbs__item a,
.breadcrumbs__item span {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.breadcrumbs__item [aria-current="page"] {
    color: var(--text-muted);
}

.design-system-page .breadcrumbs {
    color: var(--color-text-muted);
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line-height);
    margin-bottom: var(--space-sm);
}

.design-system-page .breadcrumbs__list {
    gap: var(--space-xs);
}

.design-system-page .breadcrumbs__item + .breadcrumbs__item::before {
    color: var(--color-text-muted);
    margin-right: var(--space-xs);
}

.design-system-page .breadcrumbs__item a:link,
.design-system-page .breadcrumbs__item a:visited {
    color: var(--color-text-secondary);
    font-weight: 500;
}

.design-system-page .breadcrumbs__item a:hover,
.design-system-page .breadcrumbs__item a:focus-visible {
    color: var(--color-primary-700);
}

.design-system-page .breadcrumbs__item [aria-current="page"] {
    color: var(--color-text-muted);
}