.breadcrumbs {
    padding-block:
        var(--space-sm);

    color:
        var(--color-text-muted);
}

.breadcrumbs__list {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        var(--space-xs);

    margin:
        0;

    padding:
        0;

    list-style:
        none;
}

.breadcrumbs__item {
    display:
        inline-flex;

    align-items:
        center;
}

.breadcrumbs__item + .breadcrumbs__item::before {
    content: '›';
    display: inline-block;
    margin-inline: 0.25rem;
    color: var(--color-text-muted);
}

.breadcrumbs__link {
    color:
        inherit;

    text-decoration:
        underline;

    text-decoration-thickness:
        0.0625rem;

    text-underline-offset:
        0.2em;
}

.breadcrumbs__link:hover {
    color:
        var(--color-text);
}

.breadcrumbs__link:focus-visible {
    outline:
        0.125rem solid currentColor;

    outline-offset:
        0.1875rem;
}