import { css, Theme } from '@emotion/react';

export const globalScrollbarCSS = (theme: Theme) => css`
  /* Scrollbar styling for WebKit browsers (Chrome, Safari, Edge) */
  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  /* Track styling for WebKit */
  ::-webkit-scrollbar-track {
    background: ${theme.colors.black900};
  }

  /* Handle styling for WebKit */
  ::-webkit-scrollbar-thumb {
    background: ${theme.colors.white800};
    border-radius: 2px;
  }

  /* Handle hover styling for WebKit */
  ::-webkit-scrollbar-thumb:hover {
    background: ${theme.colors.white700};
  }

  /* Scrollbar styling for Firefox */
  scrollbar-width: thin; /* Thin scrollbar */
  scrollbar-color: ${theme.colors.white800} ${theme.colors.black900}; /* Handle color / Track color */

  /* Optional: Styling for Firefox hover (not directly supported, but you can tweak it for consistency) */
  &:hover {
    scrollbar-color: ${theme.colors.white700} ${theme.colors.black900}; /* Adjust colors on hover */
  }
`;