1import { css } from '@emotion/react';
2import { theme } from '@expo/styleguide';
3import React, { HTMLAttributes, PropsWithChildren } from 'react';
4
5type LayoutScrollProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
6
7export function LayoutScroll({ children, ...rest }: LayoutScrollProps) {
8  return (
9    <div css={scrollStyle} {...rest}>
10      {children}
11    </div>
12  );
13}
14
15const scrollStyle = css({
16  height: '100%',
17  scrollBehavior: 'smooth',
18  overflowY: 'auto',
19  /* width */
20  '::-webkit-scrollbar': {
21    width: '6px',
22  },
23  /* Track */
24  '::-webkit-scrollbar-track': {
25    backgroundColor: 'transparent',
26    cursor: 'pointer',
27  },
28  /* Handle */
29  '::-webkit-scrollbar-thumb': {
30    backgroundColor: theme.background.tertiary,
31    borderRadius: '10px',
32  },
33  /* Handle on hover */
34  '::-webkit-scrollbar-thumb:hover': {
35    backgroundColor: theme.background.quaternary,
36  },
37});
38