
.nativeScroll {
    position: relative;
    --nsItems: 5;
    --nsItemMinHeight: 150px;
    --nsItemMinWidth: 150px;
    --nsItemGap: 20px;
    --nsItemTail: .2; /* "0" - 0%, "1" ~ 100% */
    --nsProgressWidth: 300px;
    --nsProgressHeight: 4px;
    --nsProgressRadius: 0px;
    --nsProgressVOffset: 0px;
    --nsProgressHOffset: 0px;
    --nsProgressTranslateX: 0px;
    --nsProgressTranslateY: 0px;
    --nsProgressLeftPosition: calc(50% + var(--nsProgressHOffset));
    --nsProgressTopPosition: calc(100% + var(--nsProgressVOffset));
    --nsProgressBarVOffset: 0px;
    --nsProgressBarTranslateX: 0px;
    --nsProgressBarTranslateY: -50%;
    --nsProgressBarTopPosition: calc(50% + var(--nsProgressBarVOffset));
    --nsScrollSnap: inline mandatory; /* "none", "inline mandatory" */
    --nsScrollSnapMode: center; /* "start", "center", "end" */
    --nsScrollPadding: 0px;
    --nsScrollBlockPadding: 0px;
    --arrow-display: inline-flex;
    --arrow-opacity: 1;
    --arrow-icon-size: 25px;
    --arrow-translate-x: 0px;
    --arrow-translate-y: -50%;
    --arrow-v-offset: 0px;
    --arrow-h-offset: 10px;
    --arrow-color: var(--the7-title-color);
    --progress-display: inline-flex;
    --progress-opacity: 1;
    opacity: 0;
    transition: opacity 200ms;
    -webkit-transform: translate3d(0, 0, 0);
}

.nsContent {
    cursor: grab;
    margin: 0 !important;
    padding-block: var(--nsScrollBlockPadding);
    padding-inline: var(--nsScrollPadding);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(100%, max(var(--nsItemMinWidth), (100% / (var(--nsItems) + var(--nsItemTail))) - var(--nsItemGap) * (var(--nsItems) - 1) / var(--nsItems)));
    min-height: var(--nsItemMinHeight);
    gap: var(--nsItemGap);
    overflow-x: auto;
    overflow-y: hidden;
    overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
    scroll-snap-type: var(--nsScrollSnap);
    overscroll-behavior-inline: contain;
    scroll-padding-inline: var(--nsScrollPadding);
    position: relative;
    z-index: 1;
}

.nsContent::-webkit-scrollbar {
    display: none;
}

.nsContent > .nsItem {
    display: flex;
    scroll-snap-align: var(--nsScrollSnapMode);
    transition: background-color .3s;
}

.nsArrow {
    position: absolute;
    display: var(--arrow-display);
    z-index: 2;
    cursor: pointer;
    color: var(--arrow-color);
    opacity: var(--arrow-opacity);
    justify-content: center;
    -ms-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    transform: translate3d(var(--arrow-translate-x), var(--arrow-translate-y), 0);
    transition: all 0.3s;
    top: calc(50% + var(--arrow-v-offset));
    --arrow-translate-y: -50%;
}

.nsArrow > i {
    font-size: var(--arrow-icon-size);
    transition: all 0.3s;
}

.nsArrow > svg {
    width: var(--arrow-icon-size);
    height: var(--arrow-icon-size);
    transition: fill 0.3s, color 0.3s;
    fill: var(--arrow-color);
    color: var(--arrow-color);
}

.nsArrow:hover {
    color: var(--the7-accent-color);
}

.nsArrow:hover > svg {
    fill: var(--the7-accent-color);
    color: var(--the7-accent-color);
}

.nativeScroll:hover .nsArrow {
    opacity: 1;
}

.nsArrow.nsDisabled {
    cursor: auto;
}

.nsProgressTrack {
    position: absolute;
    width: min(var(--nsProgressWidth), 100%);
    height: var(--nsProgressHeight);
    border-radius: var(--nsProgressRadius);
    left: var(--nsProgressLeftPosition);
    top: var(--nsProgressTopPosition);
    background: #88888840;
    display: var(--progress-display);
    opacity: var(--progress-opacity);
    transition: all 0.3s;
    transform: translate3d(var(--nsProgressTranslateX), var(--nsProgressTranslateY), 0);
    z-index: 2;
}

.nativeScroll:hover .nsProgressTrack {
    opacity: 1;
}

.nsProgressIndicator {
    width: 0%;
    height: var(--nsProgressHeight);
    border-radius: var(--nsProgressRadius);
    background: #888888C2;
    transition: all 0.3s ease-in-out, transform 1ms;
    position: absolute;
    top: var(--nsProgressBarTopPosition);
    transform: translate3d(var(--nsProgressBarTranslateX), var(--nsProgressBarTranslateY), 0);
}

.nsContent.nsGrab {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
}


.nsNoScroll .nsProgressTrack,
.nsNoScroll .nsArrow {
    display: none;
}