/* Breadcrumbs Base */
.breadcrumbs {
    position: relative;
    z-index: 2;
}

.breadcrumbs__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

/* Home Icon */
.breadcrumbs__home-icon {
    width: 16px;
    height: 16px;
    display: block;
    color: var(--color-text-inverse);
    transition: color var(--transition);
}

.breadcrumbs__link--home {
    line-height: 0;
    display: flex;
    align-items: center;
}

.breadcrumbs__link--home:hover .breadcrumbs__home-icon {
    color: var(--color-text-inverse);
    opacity: 1;
}

/* Breadcrumbs Links */
.breadcrumbs__link {
    color: var(--color-text-inverse);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: opacity var(--transition);
    opacity: 0.9;
}

.breadcrumbs__link:hover {
    opacity: 1;
}

/* Separator */
.breadcrumbs__separator {
    color: var(--color-text-inverse);
    opacity: 0.6;
    font-size: var(--text-sm);
}

/* Current Page */
.breadcrumbs__current {
    color: var(--color-text-inverse);
    font-size: var(--text-sm);
    font-weight:500;
}

/* Container Styles */
.breadcrumbs__container {
    position: relative;
    z-index: 2;
    padding-top: var(--spacing-4);
}

/* Breadcrumbs DARK */

.breadcrumbs--dark .breadcrumbs__home-icon {
    color:var(--color-primary);
    opacity: .8;
}

.breadcrumbs--dark .breadcrumbs__list > * {
    color:var(--color-primary);
    opacity: .8;
}


.breadcrumbs--dark .breadcrumbs__link--home:hover .breadcrumbs__home-icon {
    opacity: 1;
    color:var(--color-primary);
}

/* Responsive Styles */
@media (max-width: 768px) {
    .breadcrumbs__container {
        padding-top: var(--spacing-3);
    }

    .breadcrumbs__link,
    .breadcrumbs__separator,
    .breadcrumbs__current {
        font-size: var(--text-xs);
    }
}

@media (max-width: 480px) {
    .breadcrumbs__container {
        padding-top: var(--spacing-2);
    }
}