import { skeletonClasses } from '@mui/material/Skeleton';
import { styled } from '../../../components/styled';
export const SkeletonWrapper = styled.div `
  display: grid;
  grid-template-columns: 240px 1fr 1fr 1fr;
  gap: ${({ theme }) => theme.spacing(2)};

  margin-top: ${({ theme }) => theme.spacing(4)};

  ${({ theme }) => theme.breakpoints.between('sm', 'laptop')} {
    grid-template-columns: 72px 0 0 0;
    gap: 0;

    margin: ${({ theme }) => theme.spacing(0, 2, 0)};
  }

  .${skeletonClasses.root} {
    height: 32px;
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    grid-template-columns: 1fr 40px 0 0;

    margin-top: 0;
    padding: ${({ theme }) => theme.spacing(1, 0, 4, 4)};

    .${skeletonClasses.root} {
      height: 40px;
    }
  }
`;
