/* ========================================
   COMPONENT: BREADCRUMBS
   Extracted from styles.css
   ======================================== */

/* ========================================
   Page Breadcrumb (content area component)
   ======================================== */

.page-breadcrumb {
    margin-bottom: var(--space-3);
}

.page-breadcrumb__list {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

.page-breadcrumb__item {
    display: flex;
    align-items: center;
}

.page-breadcrumb__item + .page-breadcrumb__item::before {
    content: '/';
    padding: 0 var(--space-2);
    color: var(--color-gray-300);
}

.page-breadcrumb__link {
    display: flex;
    align-items: center;
    color: var(--color-gray-600);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-base) var(--ease-out);
}

.page-breadcrumb__link:hover {
    color: var(--color-primary);
}

.page-breadcrumb__icon {
    color: var(--color-primary);
    font-size: var(--font-size-sm);
}

.page-breadcrumb__current {
    color: var(--color-gray-800);
    font-weight: var(--font-weight-semibold);
}