.kg-schuif {
--kg-schuif-grond: var(--kg-vlak);
--kg-schuif-rand: clamp(1.5rem, 5%, 4rem);
--kg-knoprij: 0rem;
position: relative;
padding-top: var(--kg-knoprij);
}
.kg-schuif--js::before,
.kg-schuif--js::after {
content: "";
position: absolute;
inset-block: var(--kg-knoprij) 0;
z-index: 1;
width: var(--kg-schuif-rand);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.kg-schuif--js::before {
left: 0;
background: linear-gradient(to right, var(--kg-schuif-grond), transparent);
}
.kg-schuif--js::after {
right: 0;
background: linear-gradient(to left, var(--kg-schuif-grond), transparent);
}
.kg-schuif--terug::before,
.kg-schuif--verder::after {
opacity: 1;
}
.kg-schuif__rij {
padding-block: 1.25rem 1rem;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.kg-schuif__rij::-webkit-scrollbar {
display: none;
}
.kg-schuif .kg-schuif__spoor {
display: flex;
width: max-content;
margin: 0;
padding: 0;
list-style: none;
}
@media (hover: hover) and (pointer: fine) {
.kg-schuif--js .kg-schuif__rij {
cursor: grab;
}
.kg-schuif__rij.is-slepen,
.kg-schuif__rij.is-slepen * {
cursor: grabbing;
}
}
.kg-schuif__rij.is-slepen {
scroll-snap-type: none;
-webkit-user-select: none;
user-select: none;
}
.kg-schuif__rij.is-slepen [data-kantel],
.kg-schuif__rij.is-slepen [data-kantel-voor] {
transform: none;
}
.kg-schuif__pijl {
display: none;
}
@media (hover: hover) and (pointer: fine) {
.kg-schuif {
--kg-knoprij: 2.25rem;
}
.kg-schuif--js .kg-schuif__pijl {
position: absolute;
top: 0;
z-index: 2;
display: grid;
place-items: center;
width: var(--kg-knoprij);
height: var(--kg-knoprij);
padding: 0;
border: 0;
background: none;
color: var(--kg-zacht);
opacity: 0.32;
pointer-events: none;
transition:
opacity 0.2s ease,
color 0.18s ease;
}
.kg-schuif__pijl--terug {
right: var(--kg-knoprij);
}
.kg-schuif__pijl--verder {
right: 0;
}
.kg-schuif--terug .kg-schuif__pijl--terug,
.kg-schuif--verder .kg-schuif__pijl--verder {
opacity: 1;
pointer-events: auto;
cursor: pointer;
}
.kg-schuif--terug .kg-schuif__pijl--terug:hover,
.kg-schuif--verder .kg-schuif__pijl--verder:hover {
color: var(--kg-rood);
}
.kg-schuif--js:not(.kg-schuif--terug):not(.kg-schuif--verder) .kg-schuif__pijl {
display: none;
}
}