/* Breadcrumb Component */
.breadcrumb {
    /* Container sizing and positioning */
    width: min(100%, calc(var(--size-content-5) * 0.9));
    margin-inline: auto;
    margin-bottom: 0; /* Small gap before the sheet */
    
    /* Surface styling - one level below sheet */
    background-color: var(--layer-surface);
    border-radius: var(--radius-medium) var(--radius-medium) 0 0;
    padding: var(--size-3) var(--size-4);
    
    /* Elevation - lower than sheet */
    box-shadow: var(--shadow-lg);
    border: 1px solid rgb(128 128 128 / 0.25);
    border-block-end: none;
    
    /* Typography */
    font-size: var(--font-size-body-medium);
    color: var(--on-surface-variant);
    
    /* Flexbox for breadcrumb items */
    display: flex;
    align-items: center;
    justify-content: center;;
    gap: var(--size-1);
}

/* Breadcrumb items and separators */
.breadcrumb-item {
    color: var(--on-surface-variant);
    text-decoration: none;
    transition: color 0.15s var(--ease-standard);
    
    &:hover {
        color: var(--on-surface);
    }
    
    /* Current/active item */
    &.current {
        color: var(--on-surface);
        font-weight: var(--font-weight-5);
    }
}

.breadcrumb-separator {
    color: var(--outline);
    font-size: var(--font-size-body-small);
    opacity: 0.6;
}

/* Alternative approach using surface-container-lowest for even more contrast */
.breadcrumb.elevated {
    background-color: var(--layer-surface-container);
}

/* For dark mode, create the semi-transparent effect you mentioned */
[data-color-scheme="dark"] .breadcrumb {
    background-color: rgb(from var(--layer-surface) r g b / 0.66);
    backdrop-filter: blur(8px);
}