@layer components {
    .breadcrumbs {
        padding-block: var(--spacing-md) var(--spacing-xs);
    }

    .breadcrumbs__list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--spacing-xs);
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .breadcrumbs__item {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
    }

    .breadcrumbs__link {
        color: var(--color-muted);
        text-decoration: none;
        transition: color var(--transition-speed);
    }

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

    .breadcrumbs__text {
        color: var(--color-text);
    }

    .breadcrumbs__item--current .breadcrumbs__text {
        font-weight: var(--font-weight-heading);
    }

    .breadcrumbs__separator,
    .breadcrumbs__separator-icon {
        color: var(--color-muted);
        opacity: 0.5;
        flex-shrink: 0;
    }

    /* Sizes */
    .breadcrumbs--sm {
        font-size: var(--font-size-body-sm);
    }

    .breadcrumbs--md {
        font-size: var(--font-size-body);
    }

    /* Styles */
    .breadcrumbs--pills .breadcrumbs__link,
    .breadcrumbs--pills .breadcrumbs__text {
        padding: var(--spacing-xs) var(--spacing-sm);
        border-radius: var(--radius-full);
        background: var(--color-surface);
        transition: color var(--transition-speed), background var(--transition-speed);
    }

    .breadcrumbs--pills .breadcrumbs__link:hover {
        background: var(--color-border);
    }

    .breadcrumbs--pills .breadcrumbs__item--current .breadcrumbs__text {
        background: var(--color-text);
        color: var(--color-background);
    }

    .breadcrumbs--minimal .breadcrumbs__link {
        color: var(--color-muted);
    }

    .breadcrumbs--minimal .breadcrumbs__item--current .breadcrumbs__text {
        font-weight: var(--font-weight-body);
        color: var(--color-muted);
    }
}