import styled from 'styled-components/macro';

import { color } from '../../theme';

export const trackWidth = 6;
export const trackColor = color('sys/color/transparent');
export const thumbColor = color('ref/palette/gray/600');

export const StyledScrollbar = styled.div`
  overflow: auto;
  scrollbar-color: ${thumbColor} ${trackColor};
  scrollbar-width: none;

  &::-webkit-scrollbar {
    height: 0;
    width: 0;
  }

  &::-webkit-scrollbar-track {
    background-color: ${trackColor};
  }

  &::-webkit-scrollbar-thumb {
    background-color: ${thumbColor};
    border-radius: 100px;
  }
`;