// @flow
import styled from 'styled-components'
import theme from 'theme'

export const Spinner = styled.div`
  animation: spin 1.4s infinite linear;
  background: ${theme.colors.white};
  background: linear-gradient(
    to right,
    ${theme.colors.white} 10%,
    rgba(255, 255, 255, 0) 42%
  );
  border-radius: 50%;
  display: inline-block;
  height: 16px;
  margin-left: 10px;
  position: relative;
  transform: translateZ(0);
  width: 16px;

  &::before {
    background: ${theme.colors.white};
    border-radius: 100% 0 0;
    content: '';
    height: 50%;
    left: 0;
    position: absolute;
    top: 0;
    width: 50%;
  }

  &::after {
    background: ${theme.colors['blue-ribbon-spinner']};
    border-radius: 50%;
    bottom: 0;
    content: '';
    height: 75%;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 75%;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }
`
export default Spinner
