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

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

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

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