horizontal-scroll {
    display: block;
    white-space: nowrap;
    overflow-x: hidden;
    position: relative;
    user-select: none;
    -ms-overflow-style: none;
    width: 100%;
    box-sizing: border-box;
    .scrollable-track {
        display: block;
        white-space: nowrap;
        scrollbar-width: none;
        position: relative;
        margin-bottom: 2em;
        > * {
            display: inline-grid;
            place-items: center;
            vertical-align: middle;
        }
        .scrollable-track {
            cursor: grab;
        }
    }
    &.active {
        .scrollable-track {
            cursor: grabbing;
            > * {
                pointer-events: none;
                user-select: none;
            }
        }
    }

    > img {
        pointer-events: none;
    }

    &[pagination-behavior="snap-after-drag"] {
        .scrollable-track {
            scroll-snap-type: x proximity;
        }
        &.active {
            .scrollable-track {
                scroll-snap-type: none;
            }
        }
        > * {
            scroll-snap-align: left;
        }
    }
}

horizontal-scroll ul.pagination-controls {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    bottom: 0;
    left: 50%;
    translate: -50%;
    gap: .5em;
}

horizontal-scroll ul.pagination-controls li button {
    width: .8em;
    height: .8em;
    border-radius: 0.5em;
    cursor: pointer;
    padding: 0;
    opacity: .3;
    transition: opacity .3s;
}

horizontal-scroll ul.pagination-controls li.current button {
    opacity: 1;
}

horizontal-scroll li button.pagination--go:is([data-index="previous"],[data-index="next"]) {
    background: transparent;
    line-height: 0;
    text-align: center;
    border: 1px solid transparent;
    display: grid;
    justify-content: center;
    align-content: center;
    &:hover {
        border: 1px solid transparent;
        color: var(--font-body-color);
    }
}