import CircleRoundedIcon from '@mui/icons-material/CircleRounded'
import { TimelineDot } from '@mui/lab'
import { Avatar, Box, styled } from '@mui/material'

export const StyledTimeLineDot = styled(TimelineDot)({
  width: '20px',
  height: '20px',
  boxShadow: 'none',
  backgroundColor: '#F5F5F5',
  border: '1px solid #12121233',
  borderRadius: '50%',
  margin: '5.5px 0',
})

export const StyledCircleIcon = styled(CircleRoundedIcon)({
  position: 'relative',
  left: '1px',
  top: '1px',
  color: 'black',
  width: '7px',
  height: '7px',
})

export const StyledAvatar = styled(Avatar)(({ theme }) => ({
  width: 30,
  height: 30,
  marginRight: '8px',
  fontSize: '14px',
}))

export const StyledSpinnerBox = styled(Box)({
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
})
