/* Breadcrumb Component Styles */

/* Main breadcrumb container */
.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
    padding: 12px 0;
}

/* Breadcrumb list (semantic <ol> element) */
.breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Individual breadcrumb item */
.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Breadcrumb link (clickable) */
.breadcrumb-link {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.breadcrumb-link:hover {
    color: var(--color-accent);
}

.breadcrumb-link:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Current page (non-clickable) */
.breadcrumb-current {
    color: var(--color-text);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Separator between items */
.breadcrumb-separator {
    color: var(--color-text-secondary);
    user-select: none;
    display: inline-flex;
    align-items: center;
}

.breadcrumb-separator svg {
    width: 16px;
    height: 16px;
}

/* Icon styles */
.breadcrumb-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* SVG icons within links and current page */
.breadcrumb-link svg,
.breadcrumb-current svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Separator Variants */

/* Slash separator variant */
.breadcrumb.separator-slash .breadcrumb-separator::before {
    content: '/';
}

.breadcrumb.separator-slash .breadcrumb-separator svg {
    display: none;
}

/* Greater-than separator variant */
.breadcrumb.separator-gt .breadcrumb-separator::before {
    content: '>';
}

.breadcrumb.separator-gt .breadcrumb-separator svg {
    display: none;
}

/* Chevron separator (default) */
.breadcrumb.separator-chevron .breadcrumb-separator::before {
    content: none;
}

/* Compact Variant */
.breadcrumb.compact {
    font-size: 13px;
    gap: 4px;
    padding: 8px 0;
}

.breadcrumb.compact .breadcrumb-list {
    gap: 4px;
}

.breadcrumb.compact .breadcrumb-item {
    gap: 4px;
}

.breadcrumb.compact .breadcrumb-icon,
.breadcrumb.compact .breadcrumb-link svg,
.breadcrumb.compact .breadcrumb-current svg {
    width: 14px;
    height: 14px;
}

/* Ellipsis for truncated breadcrumbs */
.breadcrumb-ellipsis {
    display: none;
    color: var(--color-text-secondary);
}

/* Mobile Responsive Behavior */
@media (max-width: 768px) {
    .breadcrumb {
        font-size: 13px;
    }

    /* Hide middle items on mobile, keep first and last */
    .breadcrumb-item.truncate-mobile {
        display: none;
    }

    .breadcrumb-item.truncate-mobile.always-show {
        display: flex;
    }

    .breadcrumb-separator.truncate-mobile {
        display: none;
    }

    /* Show ellipsis when items are hidden */
    .breadcrumb-ellipsis {
        display: inline-flex;
    }
}