import styled from '@emotion/styled';

const OverscrollFade = styled.div<{
  above: boolean;
  height: number;
  fadeHeight: number;
  color: string;
}>`
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  ${({ above }) => (above ? 'top: 0;' : 'bottom: 0;')}
  height: ${({ height, fadeHeight }) => height + fadeHeight}px;
  background-image: linear-gradient(
    to ${({ above }) => (above ? 'bottom' : 'top')},
    ${({ color }) => color}ff 0%,
    ${({ color }) => color}ff
      ${({ height, fadeHeight }) => (100 * height) / (height + fadeHeight)}%,
    ${({ color }) => color}00 100%
  );
`;

export default OverscrollFade;