import type { SxProps, Theme } from '@mui/material'
import { baseSkeletonStyles } from '../utils/skeleton'

export const styles = {
  skeleton: {
    item: {
      flex: 1,
      maxWidth: ({ spacing }) => spacing(12),

      '& + &': {
        marginLeft: ({ spacing }) => spacing(1),
      },
    },
    graph: {
      ...baseSkeletonStyles.graph,
      grid: {
        display: 'flex',
        justifyContent: 'space-between',
        flex: '1 1 auto',
        alignItems: 'flex-end',
        width: '100%',
      },
    },
    mask: {
      gray: {
        backgroundColor: ({ palette }) => palette.grey[100],
      },
      white: {
        backgroundColor: ({ palette }) => palette.common.white,
      },
    },
  },
} satisfies Record<string, SxProps<Theme>>