import {keyframes} from '@emotion/react';
import styled from '@emotion/styled';

const spin = keyframes`
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
`;

const Spinner = styled('div')`
  animation: ${spin} 0.4s linear infinite;
  width: 18px;
  height: 18px;
  border-radius: 18px;
  border-top: 2px solid ${p => p.theme.border};
  border-right: 2px solid ${p => p.theme.border};
  border-bottom: 2px solid ${p => p.theme.border};
  border-left: 2px solid ${p => p.theme.purple300};
  margin-left: auto;
`;

export default Spinner;