import { alpha, type Theme } from '@mui/material';

/** Theme-aware native scrollbar overrides (WebKit + Firefox). */
export const getScrollbarStyles = ({ palette }: Theme) => {
  const trackColor =
    palette.new?.border?.neutral?.divider ?? alpha(palette.text.primary, 0.08);
  const thumbColor =
    palette.new?.icon?.neutral?.disabled ?? alpha(palette.text.primary, 0.4);
  const thumbHoverColor =
    palette.new?.icon?.neutral?.lighter ?? alpha(palette.text.primary, 0.6);

  return {
    '*': {
      scrollbarWidth: 'thin',
      scrollbarColor: `${thumbColor} ${trackColor}`,
    },
    '*::-webkit-scrollbar': {
      width: 8,
      height: 8,
    },
    '*::-webkit-scrollbar-track': {
      backgroundColor: trackColor,
    },
    '*::-webkit-scrollbar-thumb': {
      backgroundColor: thumbColor,
      borderRadius: 4,
      '&:hover': {
        backgroundColor: thumbHoverColor,
      },
    },
  };
};
