.text-ticker {
    --text-ticker-gap: .25em;
    --text-ticker-distance: 0px;
    --text-ticker-duration: 20s;

    position: relative;
    width: 100%;
    overflow: hidden;
}

.text-ticker__track {
    display: flex;
    width: max-content;
    will-change: transform;
}

.text-ticker__group {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--text-ticker-gap);

    /*
     * Important:
     * Gives us exactly the same spacing between
     * group A and group B as between individual items.
     */
    padding-right: var(--text-ticker-gap);
}

.text-ticker__item {
    flex-shrink: 0;
    white-space: nowrap;
}


/*
 * LEFT
 */

.text-ticker.is-ready[data-direction="left"] .text-ticker__track {
    animation:
        text-ticker-left
        var(--text-ticker-duration)
        linear
        infinite;
}

@keyframes text-ticker-left {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform:
            translate3d(
                calc(var(--text-ticker-distance) * -1),
                0,
                0
            );
    }
}


/*
 * RIGHT
 */

.text-ticker.is-ready[data-direction="right"] .text-ticker__track {
    animation:
        text-ticker-right
        var(--text-ticker-duration)
        linear
        infinite;
}

@keyframes text-ticker-right {
    from {
        transform:
            translate3d(
                calc(var(--text-ticker-distance) * -1),
                0,
                0
            );
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}


/*
 * Pause
 */

.text-ticker[data-pause-on-hover="true"]:hover .text-ticker__track {
    animation-play-state: paused;
}


/*
 * Accessibility
 */

.text-ticker__accessible {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/*
 * Reduced motion
 */

@media (prefers-reduced-motion: reduce) {

    .text-ticker__track {
        animation: none !important;
        transform: none !important;
    }

}