import { jsx as _jsx } from "react/jsx-runtime";
import styled from 'styled-components';
import { zIndex } from '../../style/theme';
import { spacing } from '../../spacing';
import { getThemePropSelector } from '../../utils';
import { Icon } from '../icon/Icon.component';
import { forwardRef } from 'react';
const StyledScrollButton = styled.div `
  display: flex;
  justify-content: center;
  align-items: center;
  width: ${spacing.r24};
  z-index: ${zIndex.scrollbarButton};
  color: ${getThemePropSelector('textSecondary')};
  background-color: ${getThemePropSelector('backgroundLevel3')};
  box-shadow: 0px 0px ${spacing.r2} rgba(0, 0, 0, 0.75);
  box-sizing: border-box;
  border: ${spacing.r1} solid transparent;
  cursor: pointer;

  &:hover {
    border-radius: ${spacing.r2};
    box-shadow: none;
    border: ${spacing.r1} solid ${getThemePropSelector('infoPrimary')};
  }
`;
const ScrollButton = forwardRef(({ direction, onClick }, ref) => {
    return (
    // @ts-ignore
    _jsx(StyledScrollButton, { direction: direction, onClick: onClick, ref: ref, children: _jsx(Icon, { name: `Chevron-${direction}` }) }));
});
export { ScrollButton };
