import * as React from 'react';
import styled, { keyframes } from 'styled-components';
import { theme } from '../../Tools/interpolation';
var Wrapper =
/*#__PURE__*/
styled.div.withConfig({
  componentId: "sc-1dge9q5-0"
})(["\n  height: 40px;\n  width: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"]);
var ball1 =
/*#__PURE__*/
keyframes(["\n  0% {\n    opacity: 0.35;\n  }\n\n  50% {\n    top: -100%;\n    left: 200%;\n    opacity: 1;\n  }\n\n  100% {\n    top: 50%;\n    left: 100%;\n    z-index: 2;\n    opacity: 0.35;\n  }\n"]);
var ball2 =
/*#__PURE__*/
keyframes(["\n  0% {\n    opacity: 0.35;\n  }\n\n  50% {\n    top: 200%;\n    left: 200%;\n    opacity: 1;\n  }\n\n  100% {\n    top: 100%;\n    left: 50%;\n    z-index: 1;\n    opacity: 0.35;\n  }\n"]);
var ball3 =
/*#__PURE__*/
keyframes(["\n  0% {\n    opacity: 0.35;\n  }\n\n  50% {\n    top: 200%;\n    left: -100%;\n    opacity: 1;\n  }\n\n  100% {\n    top: 50%;\n    left: 0;\n    z-index: 2;\n    opacity: 0.35;\n  }\n"]);
var ball4 =
/*#__PURE__*/
keyframes(["\n  0% {\n    opacity: 0.35;\n  }\n\n  50% {\n    top: -100%;\n    left: -100%;\n    opacity: 1;\n  }\n\n  100% {\n    top: 0;\n    left: 50%;\n    z-index: 1;\n    opacity: 0.35;\n  }\n"]);
var Animation =
/*#__PURE__*/
styled.div.withConfig({
  componentId: "sc-1dge9q5-1"
})(["\n  width: 8px;\n  height: 8px;\n  position: relative;\n  box-sizing: border-box;\n\n  & > div {\n    position: absolute;\n    display: inline-block;\n    box-sizing: border-box;\n    width: 16px;\n    height: 16px;\n    border-radius: 100%;\n    background-color: ", ";\n    transform: translate(-50%, -50%);\n  }\n\n  & > div:nth-child(1) {\n    top: 0;\n    left: 50%;\n    z-index: 1;\n    animation: ", " 1s 0s ease infinite;\n  }\n\n  & > div:nth-child(2) {\n    top: 50%;\n    left: 100%;\n    z-index: 2;\n    animation: ", " 1s 0s ease infinite;\n  }\n\n  & > div:nth-child(3) {\n    top: 100%;\n    left: 50%;\n    z-index: 1;\n    animation: ", " 1s 0s ease infinite;\n  }\n\n  & > div:nth-child(4) {\n    top: 50%;\n    left: 0;\n    z-index: 2;\n    animation: ", " 1s 0s ease infinite;\n  }\n"], theme('loaderColor'), ball1, ball2, ball3, ball4);

var FussionLoader = function FussionLoader() {
  return React.createElement(Wrapper, null, React.createElement(Animation, null, React.createElement("div", null), React.createElement("div", null), React.createElement("div", null), React.createElement("div", null)));
};

export default FussionLoader;