@layer components {
    .breadcrumbs ol {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-1);
        font-size: var(--size-small);
        color: var(--fog);
    }

    .breadcrumbs li {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        min-height: var(--touch-target);
    }

    .breadcrumbs li + li::before {
        content: "/";
        color: var(--line);
    }

    .breadcrumbs a {
        display: inline-flex;
        align-items: center;
        min-height: var(--touch-target);
        min-width: var(--touch-target);
        color: var(--fog);
    }

    .breadcrumbs a:hover {
        color: var(--sky);
    }
}