.snb-bar{
    position: relative;
    z-index: 99999;
    width: 100%;
    height: 28px;
    min-height: 28px;
    overflow: hidden;
    background: var(--snb-bg);
    color: var(--snb-text);
    display: flex;
    align-items: center;
    box-sizing: border-box;
    font-size: 13px;
    line-height: 1;
    direction: ltr;
}

.snb-static-text{
    width: 100%;
    text-align: center;
    padding: 0 16px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;
}

.snb-track{
    display: flex;
    width: max-content;
    flex-shrink: 0;
    animation: snb-marquee var(--snb-speed) linear infinite;
    will-change: transform;
}

.snb-group{
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.snb-item{
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    height: 28px;
    padding: 0 34px;
    white-space: nowrap;
    direction: rtl;
}

.snb-item::after{
    content: "•";
    margin-right: 34px;
    opacity: .55;
}

.snb-item:last-child::after{
    content: "";
    margin: 0;
}

@keyframes snb-marquee{
    from{ transform: translateX(-50%); }
    to{ transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce){
    .snb-track{ animation-play-state: paused; }
}

@media (max-width: 600px){
    .snb-bar,
    .snb-item{
        height: 26px;
        min-height: 26px;
    }

    .snb-bar{
        font-size: 12px;
    }

    .snb-item{
        padding: 0 22px;
    }

    .snb-item::after{
        margin-right: 22px;
    }
}