/* ============================
   ScrollRow – waagrecht scrollende Reihe mit Pfeilen
   ============================
   scroll-row.js setzt an der Hülle data-oo-scroll-prev / data-oo-scroll-next, solange links bzw. rechts noch Inhalt liegt.
   Dort blendet der Rand aus; mit der Maus erscheint ein Pfeil-Button. */

.oo-scroll-row {
    --oo-scroll-row-fade: 3.5rem;
    --oo-scroll-row-arrow-top: 50%;
    --_oo-scroll-row-fade-prev: 0rem;
    --_oo-scroll-row-fade-next: 0rem;
    position: relative;
    min-width: 0;
}

.oo-scroll-row[data-oo-scroll-prev] {
    --_oo-scroll-row-fade-prev: var(--oo-scroll-row-fade);
}

.oo-scroll-row[data-oo-scroll-next] {
    --_oo-scroll-row-fade-next: var(--oo-scroll-row-fade);
}

/* Die Reihe selbst: scrollt waagrecht ohne sichtbaren Scrollbalken; die Einträge behalten ihre Breite */
.oo-scroll-row__track {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    mask-image: linear-gradient(to right,
        transparent,
        #000 var(--_oo-scroll-row-fade-prev),
        #000 calc(100% - var(--_oo-scroll-row-fade-next)),
        transparent);
}

.oo-scroll-row__track::-webkit-scrollbar {
    display: none;
}

.oo-scroll-row__track > * {
    flex-shrink: 0;
}

/* Pfeil-Buttons: am Rand, mittig auf --oo-scroll-row-arrow-top (ArrowTop), auf Fläche mit Schatten */
.oo-scroll-row__arrow {
    position: absolute;
    top: var(--oo-scroll-row-arrow-top);
    z-index: 1;
    display: none;
    transform: translateY(-50%);
    border-radius: var(--oo-radius-full);
    background-color: var(--oo-color-surface);
    box-shadow: var(--oo-shadow-sm);
}

.oo-scroll-row__arrow--prev {
    left: 0;
}

.oo-scroll-row__arrow--next {
    right: 0;
}

/* Pfeile nur mit der Maus; am Handy wischt man */
@media (hover: hover) {
    .oo-scroll-row[data-oo-scroll-prev] > .oo-scroll-row__arrow--prev,
    .oo-scroll-row[data-oo-scroll-next] > .oo-scroll-row__arrow--next {
        display: inline-flex;
    }
}