.uniScroll,
.uniScrollWrap {
    grid-template-columns: auto 1fr auto;
    grid-template-rows:    auto 1fr auto;
}

.uniScrollWrap,
.uniScrollThumb { box-sizing: border-box; }

.uniScrollWrap {
    display: grid;
    box-sizing: border-box;
    pointer-events: none;
    user-select: none;
    z-index: 10;
    transform: translate3d(0, 0, 0);
    transform-style: preserve-3d;
}

/* Body scroll settings */

.uniScrollBody {
    display: block;
    width:  0;
    height: 0;
}

.uniScrollBody > .uniScrollWrap {
    position: fixed;
    top:  0;
    left: 0;
    width:  100%;
    height: 100%;
    z-index: 99;
    padding-top: var(--elzEPSize, 0);
}

@media (pointer: coarse) {
    .uniScrollIn.scrollHideFine     ~ .uniScrollWrap,
    .uniScrollIn.uniScrollHideTouch ~ .uniScrollWrap,
    :root.scrollHideFine     > body > .uniScrollBody,
    :root.uniScrollHideTouch > body > .uniScrollBody { display: none; }
}

@media (pointer: fine) {
    .uniScrollIn.scrollHideTouch   ~ .uniScrollWrap,
    .uniScrollIn.uniScrollHideFine ~ .uniScrollWrap,
    :root.scrollHideTouch   > body > .uniScrollBody,
    :root.uniScrollHideFine > body > .uniScrollBody { display: none; }
}

/* end */

.uniScrollIn,
.uniScrollWrap { grid-area: 1 / 1 / 4 / 4; }

.uniScrollWrap > .scrollX { grid-area: 3 / 2 / 4 / 3; }
.uniScrollWrap > .scrollY { grid-area: 2 / 4 / 3 / 4; }
.uniScrollWrap > .scrollC { grid-area: 4 / 3 / 4 / 4; }

.uniScroll:is(.scrollXRev, .scrollRev) > .uniScrollWrap > .scrollX { grid-row-start:    1; grid-row-end:    2; }
.uniScroll:is(.scrollYRev, .scrollRev) > .uniScrollWrap > .scrollY { grid-column-start: 1; grid-column-end: 2; }

.uniScroll:is(.scrollXRev, .scrollRev) > .uniScrollWrap > .scrollC { grid-row-start:    1; grid-row-end:    2; }
.uniScroll:is(.scrollYRev, .scrollRev) > .uniScrollWrap > .scrollC { grid-column-start: 1; grid-column-end: 2; }

.uniScrollbar {
    position: relative;
    display: flex;
    pointer-events: auto;
    cursor: default;
}

.uniScrollbar.scrollX, .uniScrollbar.scrollX .uniScrollThumb { flex-direction: row; }
.uniScrollbar.scrollY, .uniScrollbar.scrollY .uniScrollThumb { flex-direction: column; }

.uniScrollArrow,
.uniScrollCorner,
.uniScrollTrack,
.uniScrollSize {
    position: relative;
    display: block;
}

.uniScrollArrow,
.uniScrollCorner { flex-shrink: 0; }

.uniScrollTrack { flex-grow: 1; }

.uniScrollSize { height: 100%; }

.uniScrollThumb {
    position: absolute;
    display: flex;
    top:  0;
    left: 0;
    will-change: transform;
}

.uniScrollThumb:before {
    content: "";
    flex-grow: 1;
}

.uniScrollbar.scrollX .uniScrollThumb { bottom: 0; }
.uniScrollbar.scrollY .uniScrollThumb { right:  0; }

.uniScrollWrap:not(.visY)      .uniScrollbar.scrollY,
.uniScrollWrap:not(.visX)      .uniScrollbar.scrollX,
.uniScrollWrap:not(.visX.visY) .uniScrollCorner.scrollC { display: none; }









/* Simple style */

.scrollSimple > .uniScrollWrap {
    visibility: hidden;
    --uniScrollSize: 12px;
    --uniScrollThumb: 4px;
}

.scrollSimple:is(:hover, :active)  > .uniScrollWrap,
:root:hover > body > .uniScrollBody.scrollSimple > .uniScrollWrap { visibility: visible; }


.scrollSimple > .uniScrollWrap .uniScrollCorner { visibility: hidden; }
.scrollSimple > .uniScrollWrap .uniScrollArrow { display: none; }

.scrollSimple > .uniScrollWrap .uniScrollThumb { padding: 2px; }

.scrollSimple > .uniScrollWrap .uniScrollThumb:before {
    border-radius: 1024px;
    transition-duration: 0.1s;
    align-self: flex-end;
    background-color: currentColor;
    opacity: 0.25;
}

.scrollSimple:is(.scrollXRev, .scrollRev) > .uniScrollWrap .scrollX .uniScrollThumb:before,
.scrollSimple:is(.scrollYRev, .scrollRev) > .uniScrollWrap .scrollY .uniScrollThumb:before { align-self: flex-start; }

.scrollSimple > .uniScrollWrap .uniScrollThumb:is(:hover, :active):before { opacity: 0.5; }

.scrollSimple > .uniScrollWrap .scrollX { height: var(--uniScrollSize); }
.scrollSimple > .uniScrollWrap .scrollY { width:  var(--uniScrollSize); }

.scrollSimple > .uniScrollWrap .scrollX .uniScrollThumb:before { height: var(--uniScrollThumb); }
.scrollSimple > .uniScrollWrap .scrollY .uniScrollThumb:before { width:  var(--uniScrollThumb); }

/* uDragScroll compability */

.uDragToScroll.dragging {
    scroll-snap-type: none;
    scroll-behavior: auto;
}








/* Dev mode colors */
/*
.uniScrollbar    { background: #f0f; }
.uniScrollArrow  { background: #f00; }
.uniScrollThumb  { background: #0ff; }
.uniScrollSize   { background: #00f; }
.uniScrollTrack   { background: #0f0; }
.uniScrollCorner { background: yellow; }
*/