.ticker {
    position: relative;
    overflow: hidden;
}

.ticker-horizontal {
    width: 100%;
}

.ticker-horizontal .ticker-inner {
    display: flex;
    width: max-content;
    animation: tickerScrollX var(--ticker-duration, 28s) linear infinite;
    will-change: transform;
}

.ticker-horizontal .ticker-content {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    white-space: nowrap;
    padding-right: 1.25rem;
}

.ticker-vertical {
    height: 250px;
}

.ticker-vertical .ticker-inner {
    display: flex;
    flex-direction: column;
    animation: tickerScrollY var(--ticker-duration, 24s) linear infinite;
    will-change: transform;
}

.ticker.ticker-paused .ticker-inner {
    animation-play-state: paused;   
}

@keyframes tickerScrollX {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(var(--ticker-shift-x, -50%));
    }
}

@keyframes tickerScrollY {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(var(--ticker-shift-y, -50%));
    }
}

.topbar-ticker {
    width: 270px;
    overflow: hidden;
}

.topbar-ticker__inner {
    display: inline-flex;
    align-items: center;
    width: max-content;
    animation: topbarTicker var(--topbar-duration, 14s) linear infinite;
    white-space: nowrap;
}

.topbar-ticker__segment {
    display: inline-flex;
    align-items: center;
}

.topbar-ticker__inner a {
    line-height: 1;
    border: none;
}

.topbar-ticker:hover .topbar-ticker__inner {
    animation-play-state: paused;
}

@keyframes topbarTicker {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(var(--topbar-shift, -50%));
    }
}

@media (prefers-reduced-motion: reduce) {
    .ticker-horizontal .ticker-inner,
    .ticker-vertical .ticker-inner,
    .topbar-ticker__inner {
        animation: none;
    }
}