// Breadcrumb
:root {
    /* Spacing */
    --csd-breadcrumb-padding: 0.75rem;
    --csd-breadcrumb-padding-sm: 0.5rem;
    --csd-breadcrumb-item-gap: 0.5rem;
    --csd-breadcrumb-separator-margin: 0 0.5rem;
    --csd-breadcrumb-separator-margin-sm: 0 0.25rem;
    
    /* Typography */
    --csd-breadcrumb-font-size: 0.875rem;
    --csd-breadcrumb-icon-size: 1rem;
    
    /* Layout */
    --csd-breadcrumb-border-radius: 10px;
    
    /* Colors */
    --csd-breadcrumb-bg: var(--bg-light);
    --csd-breadcrumb-border-color: var(--gray-200);
    --csd-breadcrumb-color: var(--gray-500);
    --csd-breadcrumb-active-color: var(--csd-color-primary);
    --csd-breadcrumb-hover-color: var(--csd-color-primary);
    --csd-breadcrumb-separator-color: var(--gray-300);
}

.csd-breadcrumb {
    background-color: var(--csd-breadcrumb-bg);
    font-size: var(--csd-breadcrumb-font-size);

    .csd-breadcrumb-list {
        display: flex;
        align-items: center;
        list-style: none;
        margin: 0;
        padding: 0;
        flex-wrap: wrap;
    }

    .csd-breadcrumb-item {
        display: flex;
        align-items: center;
        color: var(--csd-breadcrumb-color);

        &:not(:last-child)::after {
            content: '/';
            margin: var(--csd-breadcrumb-separator-margin);
            color: var(--csd-breadcrumb-separator-color);
            font-weight: 300;

            @media (max-width: 768px) {
                margin: var(--csd-breadcrumb-separator-margin-sm);
            }
        }

        &.active {
            color: var(--csd-breadcrumb-active-color);
            font-weight: 500;
        }

        a {
            display: inline-flex;
            align-items: center;
            gap: var(--csd-breadcrumb-item-gap);
            color: inherit;
            text-decoration: none;
            transition: color 0.2s ease-in-out;

            &:hover {
                color: var(--csd-breadcrumb-hover-color);
            }

            @media (max-width: 768px) {
                gap: calc(var(--csd-breadcrumb-item-gap) / 2);
            }
        }

        ion-icon {
            color: inherit;
            font-size: var(--csd-breadcrumb-icon-size);
            --ionicon-stroke-width: 48px;
            margin-bottom: 3px;
        }
    }
}