@lifarl/react-scroll-snap-slider/dist/styles.css

A performant React Slider / Carousel Component with CSS Scroll Snapping, Intersection Observer and Accessibility.

:where(.scs-carousel){--scs-gap:8px;--scs-arrow-bg:#fff;--scs-arrow-padding:0.5em;--scs-arrow-radius:4px;--scs-arrow-color:#676767;--scs-arrow-size:22px;--scs-scroll-behavior:smooth}.scs-carousel{align-items:center;display:flex;position:relative;width:100%}.scs-slider{overflow-x:scroll;width:100%;-webkit-overflow-scrolling:touch;overscroll-behavior:var(--scs-overscroll-behavior,auto);scroll-behavior:var(--scs-scroll-behavior,smooth);scroll-snap-type:var(--scs-snap-type,x mandatory);scrollbar-width:none;touch-action:var(--scs-touch-action,pan-x)}.scs-slider::-webkit-scrollbar{display:none}.scs-list{display:flex;flex-wrap:nowrap;list-style:none;margin:0;padding:0;white-space:nowrap;width:100%}.scs-slide{display:flex;flex:0 0 var(--scs-min-w,100%);justify-content:center;min-width:var(--scs-min-w,100%);scroll-snap-align:center;scroll-snap-stop:var(--scs-snap-stop,normal);width:var(--scs-min-w,100%)}.scs-slide[inert]{pointer-events:none}.scs-slide:not(:last-child){margin-right:var(--scs-gap,8px)}@media (min-width:512px){.scs-slide{flex-basis:var(--scs-min-w-512,var(--scs-min-w,100%));min-width:var(--scs-min-w-512,var(--scs-min-w,100%));width:var(--scs-min-w-512,var(--scs-min-w,100%))}}@media (min-width:753px){.scs-slide{flex-basis:var(--scs-min-w-753,var(--scs-min-w-512,var(--scs-min-w,100%)));min-width:var(--scs-min-w-753,var(--scs-min-w-512,var(--scs-min-w,100%)));width:var(--scs-min-w-753,var(--scs-min-w-512,var(--scs-min-w,100%)))}}@media (min-width:1232px){.scs-slide{flex-basis:var(--scs-min-w-1232,var(--scs-min-w-753,var(--scs-min-w-512,var(--scs-min-w,100%))));min-width:var(--scs-min-w-1232,var(--scs-min-w-753,var(--scs-min-w-512,var(--scs-min-w,100%))));width:var(--scs-min-w-1232,var(--scs-min-w-753,var(--scs-min-w-512,var(--scs-min-w,100%))))}}.scs-nav{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--scs-arrow-bg,#fff);border:0;border-radius:var(--scs-arrow-radius,4px);cursor:pointer;display:grid;line-height:0;outline:none;padding:var(--scs-arrow-padding,.5em);place-items:center;position:absolute;transition:all .1s ease-in-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:1}.scs-nav:disabled{opacity:66%}.scs-nav:active{transform:scale(.9)}@media (max-width:512px){.scs-nav{display:none!important}}.scs-nav.scs-nav--prev{left:5%}.scs-nav.scs-nav--next{right:5%}.scs-arrow{height:var(--scs-arrow-size,20px);width:var(--scs-arrow-size,20px);fill:var(--scs-arrow-color,#676767);display:block}.scs-nav--prev .scs-arrow{transform:translateX(-2px)}.scs-nav--next .scs-arrow{transform:translateX(2px)}.scs-nav:focus-visible{outline:2px solid hsla(0,0%,40%,.6);outline:2px solid color-mix(in oklab,var(--scs-arrow-color,#676767) 60%,transparent);outline-offset:2px}.scs-visually-hidden{height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;clip:rect(0,0,0,0)!important;border:0!important;clip-path:inset(50%)!important;white-space:nowrap!important}