/* =========================================================
   SLU Marquee Widget
   ========================================================= */

.slu-marquee {
    overflow: hidden;
    position: relative;
    width: 100%;
}

/* ── Track — flex row of two identical sets ────────────── */
.slu-marquee__track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: max-content;
    animation: var(--slu-marquee-anim, slu-marquee-left) var(--slu-marquee-duration, 75s) linear infinite;
}

/* ── Pause on hover ────────────────────────────────────── */
.slu-marquee--pause-hover:hover .slu-marquee__track {
    animation-play-state: paused;
}

/* ── Each set of items ─────────────────────────────────── */
.slu-marquee__set {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    gap: inherit;
}

/* ── Individual item & separator ───────────────────────── */
.slu-marquee__item,
.slu-marquee__sep {
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}

.slu-marquee__item--image {
    display: inline-flex;
    align-items: center;
}

.slu-marquee__sep-img {
    display: block;
    width: auto;
    height: 1em; /* scales with separator_size font-size */
    object-fit: contain;
    vertical-align: middle;
}

/* ── Animations ─────────────────────────────────────────── */
@keyframes slu-marquee-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

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