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

export const styles = {
  skeleton: {
    graph: {
      container: {
        ...baseSkeletonStyles.graph.container,
        position: 'relative',
      },
      grid: {
        display: 'flex',
        justifyContent: 'space-between',
        flex: '1 1 auto',
        alignItems: 'flex-end',
        width: '100%',
      },
    },
    histogram: {
      item: {
        flex: 1,
        maxWidth: ({ spacing }) => spacing(8),

        '& + &': {
          marginLeft: '1px',
        },
      },
    },
    legend: {
      display: 'flex',
      alignItems: 'center',
      gap: ({ spacing }) => spacing(2),
      height: ({ spacing }) => spacing(5),
    },
  },
} satisfies Record<string, SxProps<Theme>>