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

interface IProps {
  size?: number|string;
  noButton?: boolean;
}

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

const animation = css`
  animation: ${ loadingAnimation} 1.1s infinite linear;
`;

const Loading = styled.div<IProps>`
  ${({ noButton }) => noButton ? `
    z-index: 999;
    border-top: 0.5em solid ${Colors.lochmara};
    border-right: 0.5em solid ${Colors.lochmara};
    border-bottom: 0.5em solid ${Colors.lochmara};
    border-left: 0.5em solid ${Colors.white};
    margin: 67px auto;
  ` : `
    z-index: 999;
    font-size: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -7.5px;
    margin-left: -7.5px;
    text-indent: -9999em;
    border-top: 0.5em solid rgba(255, 255, 255, 0.2);
    border-right: 0.5em solid rgba(255, 255, 255, 0.2);
    border-bottom: 0.5em solid rgba(255, 255, 255, 0.2);
    border-left: 0.5em solid #fff;
    transform: translateZ(0);
  `}
  ${animation};

  &:after, & {
		border-radius: 50%;
	  width: ${({ size }) => size ? size : '15px' };
	  height: ${({ size }) => size ? size : '15px' };
  }
`;

export default Loading;