.wtps-sliderSection {

    margin: 0 auto;
    position: relative;
    
    display: flex;
    align-items: stretch;
    gap: inherit;

    --sliderSectionnavdisplay: flex;
    --sliderSectiondotsdisplay: flex;

    img {
        -webkit-user-drag: none;
        -khtml-user-drag: none;
        -moz-user-drag: none;
        -o-user-drag: none;
    }

}

.wtps-sliderSection-container {

    display: flex;
    width: 100%;
    gap: inherit;
    cursor: grab;

    /* Disable native scroll */
    scrollbar-width: none;
    overflow-x: clip;
    scroll-snap-type: x mandatory;

}

.wtps-sliderSection.is-autofit .wtps-sliderSection-slides {
    width: fit-content;
}

.wtps-sliderSection.is-autofit [data-role="slide"] {
    width: var(--sliderSectionslidesize);
    max-width: var(--sliderSectionslidesize);
    min-width: var(--sliderSectionslidesize);
}

.wtps-sliderSection-slides {
    user-select: none;
    width: 100%;
    display: flex;
    transition: transform 300ms ease;
    will-change: transform;
    gap: var(--sliderSectiongap);
}

.wtps-sliderSection-arrow {
    display: var(--sliderSectionnavdisplay);
    position: absolute;
    border-radius: var(--sliderSectionnavradius);
    border: 0;
    background: var(--sliderSectionnavbg);
    color: var(--sliderSectionnavcolor);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
    padding: var(--sliderSectionnavpadding);

    svg {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--sliderSectionnavsize);
        height: var(--sliderSectionnavsize);
    }

    &.hide {
        display: none;
    }
}

.wtps-sliderSection-arrow-prev {
    left: var(--sliderSectionnavposition, 10px);
}

.wtps-sliderSection-arrow-next {
    right: var(--sliderSectionnavposition, 10px);
}

.wtps-sliderSection-pagination {
    display: var(--sliderSectiondotsdisplay);
    position: absolute;
    bottom: var(--sliderSectiondotsposition, 10px);
    display: flex;
    justify-content: center;
    width: 100%;
    gap: var(--sliderSectiondotsgap);
    
    &.hide {
        display: none;
    }
    
}

.wtps-sliderSection-dot {
    display: flex;
    width: var(--sliderSectiondotssize);
    height: var(--sliderSectiondotssize);
    padding: 0;
    border-radius: var(--sliderSectiondotsradius);
    border: 0;
    background: var(--sliderSectiondotsbg);
    cursor: pointer
}

.wtps-sliderSection-dot.active {
    background: var(--sliderSectiondotsactive);
}

@media (prefers-reduced-motion:reduce) {
    .wtps-sliderSection-slides {
        transition: none;
    }
}