/* Flat breadcrumbs: home and current page. */
.breadcrumbs ol,
.breadcrumbs li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.breadcrumbs ol {
    flex-wrap: wrap;
}

.breadcrumbs li {
    min-width: 0;
}

.breadcrumbs a {
    text-decoration: underline;
    text-underline-position: from-font;
}

.breadcrumbs img {
    flex: none;
    transform: rotate(-90deg);
}

.breadcrumbs [aria-current="page"] {
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

.breadcrumbs a:focus-visible {
    outline: 2px solid var(--color-brand-dark);
    outline-offset: 3px;
}

@media (hover: hover) {
    .breadcrumbs a:hover {
        color: var(--color-brand);
    }
}