.store-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    color: var(--black--black40);
    font-size: 12px;
    line-height: 120%;
}

.store-breadcrumbs__item {
    color: inherit;
}

.store-breadcrumbs__item--link {
    transition: color 0.2s ease;
}

.store-breadcrumbs__item--link:hover,
.store-breadcrumbs__item--link:focus,
.store-breadcrumbs__item--link:active {
    color: var(--azure--azure50);
}

.store-breadcrumbs__separator {
    color: var(--black--black40);
}

@media (max-width: 768px) {
    .store-breadcrumbs {
        width: 100%;
        font-size: 13px;
        gap: 4px;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-mask-image: linear-gradient(
                to right,
                rgba(0, 0, 0, 1) 0%,
                rgba(0, 0, 0, 1) calc(100% - 28px),
                rgba(0, 0, 0, 0) 100%
        );
        mask-image: linear-gradient(
                to right,
                rgba(0, 0, 0, 1) 0%,
                rgba(0, 0, 0, 1) calc(100% - 28px),
                rgba(0, 0, 0, 0) 100%
        );
    }

    .store-breadcrumbs__item,
    .store-breadcrumbs__separator {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .store-breadcrumbs::-webkit-scrollbar {
        display: none;
    }

    .store-breadcrumbs.store-breadcrumbs--no-fade {
        -webkit-mask-image: none;
        mask-image: none;
    }
}