import styled from 'styled-components';

const css = styled.div;

export default css<any>`
   display: table;

   .loading-icon-loader {
      background-image: url('data:image/svg+xml,\\
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="-20 -20 40 40">\\
        <style> /* ...YO DAWG... */ circle { animation: 4s a infinite linear, 3s o infinite linear; }\\
        @keyframes a {from{stroke-dasharray:100 0}50%25{stroke-dasharray:0 100}to{stroke-dasharray:100 0}}\\
        @keyframes o {from{stroke-dashoffset:75}to{stroke-dashoffset:375}}\\
        <%2Fstyle><circle r="13.9" stroke-width="5" fill="none" stroke="${(props) =>
         (props.color || props.theme.primary || '#eee').replace('#', '%23')}" />\\
        </svg>');
      background-position: center center;
      background-repeat: no-repeat;
      width: ${(props) => props.size || 32}px;
      height: ${(props) => props.size || 32}px;
   }
`;
