Add Fade Without PseudoElements

src/shared/components/Carousel/Carousel.style.ts

@@ -5,6 +5,22 @@ export const Container = styled.div`
   position: relative;
 `
 
+export const BackgroundGradient = styled.div<{ direction: 'prev' | 'next' }>`
+  position: absolute;
+  top: 0;
+  left: ${(props) => (props.direction === 'prev' ? 0 : 'auto')};
+  right: ${(props) => (props.direction === 'next' ? 0 : 'auto')};
+  bottom: 0;
+  width: 10%;
+  z-index: 1;
+  background-image: linear-gradient(
+    ${(props) => (props.direction === 'prev' ? 270 : 90)}deg,
+    transparent,
+    var(--gradientColor, transparent)
+  );
+  pointer-events: none;
+`
+
 export const Arrow = styled(Button)`
   position: absolute;
   width: 48px;
@@ -12,7 +28,7 @@ export const Arrow = styled(Button)`
   transition: none;
 
   &.disabled {
-    opacity: 0;
+    display: none;
   }
 
   &.glider-prev {
@@ -21,6 +37,12 @@ export const Arrow = styled(Button)`
   &.glider-next {
     right: 0;
   }
+  + ${BackgroundGradient} {
+    --gradientColor: black;
+  }
+  &.disabled + ${BackgroundGradient} {
+    --gradientColor: transparent;
+  }
 `
 
 export const GliderContainer = styled.div`

src/shared/components/Carousel/Carousel.tsx

@@ -2,7 +2,7 @@ import React, { useRef } from 'react'
 
 import { useGlider, GliderProps } from '../Glider'
 
-import { Container, GliderContainer, Arrow, Track } from './Carousel.style'
+import { Container, GliderContainer, Arrow, Track, BackgroundGradient } from './Carousel.style'
 
 type CarouselProps = {
   trackPadding?: string
@@ -28,10 +28,12 @@ const Carousel: React.FC<CarouselProps> = ({
   return (
     <Container {...getContainerProps({ className })}>
       <Arrow {...getPrevArrowProps<React.ComponentProps<typeof Arrow>>({ icon: 'chevron-left' })} ref={prevArrowRef} />
+      <BackgroundGradient direction="prev" />
       <GliderContainer {...getGliderProps()} ref={ref}>
         <Track {...getTrackProps({ trackPadding })}>{children}</Track>
       </GliderContainer>
       <Arrow {...getNextArrowProps<React.ComponentProps<typeof Arrow>>({ icon: 'chevron-right' })} ref={nextArrowRef} />
+      <BackgroundGradient direction="next" />
     </Container>
   )
 }