import styled, { keyframes } from 'styled-components';
import { Box } from '../Box';

const wave = keyframes`
  0%, 60%, 100% {
    transform: initial;
  }

  30% {
    transform: translateY(-15px);
  }
`;

export const Wrapper = styled(Box)`
  position: relative;
  text-align: center;
  width: 48px;
  height: 48px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
  span {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 2px;
    margin-top: 21px;
    animation: ${wave} 1.3s linear infinite;
    border: 2px solid ${({ theme }) => theme.colors.primary};
  }
  span:nth-child(2) {
    animation-delay: -1.1s;
  }
  span:nth-child(3) {
    animation-delay: -0.9s;
  }
`;
