import { styled } from '../@styles';
import type { Theme } from '../@styles';

export const StyledLoading = styled('div', {
  label: 'Loading'
})(({ theme }: { theme: Theme }) => ({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  margin: `${theme.spacing(11.25)} auto`,
  height: theme.spacing(4.375),
  minHeight: theme.spacing(4.375),
  '& > .line': {
    display: 'inline-block',
    margin: theme.spacing(0, 0.25),
    borderRadius: theme.spacing(0, 0.25),
    backgroundColor: theme.palette.chart.grid,
    width: theme.spacing(0.5),
    height: theme.spacing(4.375),
    animation: 'line-animation 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85)',
    animationFillMode: 'both',
    '&:nth-of-type(2), &:nth-of-type(4)': {
      animationDelay: '-0.4s'
    },
    '&:nth-of-type(1), &:nth-of-type(5)': {
      animationDelay: '-0.2s'
    }
  },
  '&.invert > .line': {
    backgroundColor: theme.palette.common.white
  },
  '&.small': {
    margin: 0,
    height: theme.spacing(2.875),
    minHeight: theme.spacing(2.875),
    '& > .line': {
      height: theme.spacing(2.25),
      minHeight: theme.spacing(2.25)
    }
  },
  '@keyframes line-animation': {
    '0%': {
      transform: 'scaleY(1)'
    },
    '50%': {
      transform: 'scaleY(0.4)'
    },
    '100%': {
      transform: 'scaleY(1)'
    }
  }
}));