.app-breadcrumbs {
    --breadcrumb-font-size: clamp(0.72rem, 1vw, 0.9rem);
    --breadcrumb-icon-size: clamp(0.65rem, 0.9vw, 0.8rem);
    --breadcrumb-separator-size: clamp(0.52rem, 0.75vw, 0.65rem);
    --breadcrumb-item-height: clamp(1.55rem, 2.8vw, 2rem);
    --breadcrumb-item-gap: clamp(0.25rem, 0.65vw, 0.5rem);
    --breadcrumb-item-padding-x: clamp(0.22rem, 0.7vw, 0.6rem);
    --breadcrumb-list-gap: clamp(0.1rem, 0.35vw, 0.25rem);
}

.app-breadcrumbs .app-breadcrumb-list {
    gap: var(--breadcrumb-list-gap);
}

.app-breadcrumbs .app-breadcrumb-link,
.app-breadcrumbs .app-breadcrumb-current {
    min-height: var(--breadcrumb-item-height);
    gap: var(--breadcrumb-item-gap);
    padding-inline: var(--breadcrumb-item-padding-x);
    font-size: var(--breadcrumb-font-size) !important;
    line-height: 1.05;
}

.app-breadcrumbs .app-breadcrumb-link {
    min-width: 1.5rem;
}

.app-breadcrumbs .app-breadcrumb-link i,
.app-breadcrumbs .app-breadcrumb-current i {
    font-size: var(--breadcrumb-icon-size) !important;
}

.app-breadcrumbs .app-breadcrumb-separator {
    margin-inline: clamp(0.08rem, 0.35vw, 0.25rem);
    font-size: var(--breadcrumb-separator-size) !important;
    line-height: 1;
}

.app-breadcrumbs .app-breadcrumb-label {
    min-width: 0;
    line-height: 1.05;
}

@media (min-width: 20rem) and (max-width: 39.999rem) {
    .app-breadcrumbs .app-breadcrumb-current .app-breadcrumb-label {
        max-width: 8rem;
    }
}