import styled from 'styled-components';
import {
  fadeIn as fadeInAnimation,
  FADE_IN_TIME,
} from '../../animations/fadeIn';
import { spin, SPIN_TIMING } from '../../animations/spin';

export const CircleLoaderWrapper = styled.div<{ size: number }>`
  height: ${({ size }) => `${size}px`};
  width: ${({ size }) => `${size}px`};
  border-radius: 50%;
  animation: ${spin} ${SPIN_TIMING};
`;

export const LoaderTextContainer = styled.div<{ fadeIn?: boolean }>`
  display: flex;
  width: min-content;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: ${fadeInAnimation} ${FADE_IN_TIME} forwards;
`;