import * as React from 'react';
import PropTypes from 'prop-types';
import styled, { keyframes } from 'styled-components';
import { prop, theme } from '../../Tools/interpolation';
var stretchAnimation =
/*#__PURE__*/
keyframes(["\n  0%,\n  40%,\n  100% { transform: scaleY(0.4); }\n  20% { transform: scaleY(1); }\n"]);
var Container =
/*#__PURE__*/
styled.div.withConfig({
  componentId: "sc-1acfx00-0"
})(["\n  display: flex;\n  justify-content: space-around;\n  width: ", ";\n  height: ", ";\n  text-align: center;\n  font-size: 10px;\n"], prop('width'), prop('height'));
var Rectangle =
/*#__PURE__*/
styled.div.withConfig({
  componentId: "sc-1acfx00-1"
})(["\n  display: inline-block;\n  width: 15%;\n  height: 100%;\n  background-color: ", ";\n  animation: ", " 1.2s infinite ease-in-out;\n"], theme('loaderColor'), stretchAnimation);
var Rectangle1 =
/*#__PURE__*/
styled(Rectangle).withConfig({
  componentId: "sc-1acfx00-2"
})(["\n  animation-delay: -1.1s;\n"]);
var Rectangle2 =
/*#__PURE__*/
styled(Rectangle).withConfig({
  componentId: "sc-1acfx00-3"
})(["\n  animation-delay: -1s;\n"]);
var Rectangle3 =
/*#__PURE__*/
styled(Rectangle).withConfig({
  componentId: "sc-1acfx00-4"
})(["\n  animation-delay: -0.9s;\n"]);
var Rectangle4 =
/*#__PURE__*/
styled(Rectangle).withConfig({
  componentId: "sc-1acfx00-5"
})(["\n  animation-delay: -0.8s;\n"]);
var Rectangle5 =
/*#__PURE__*/
styled(Rectangle).withConfig({
  componentId: "sc-1acfx00-6"
})(["\n  animation-delay: -0.7s;\n"]);

var FlatLoader2 = function FlatLoader2(props) {
  return React.createElement(Container, props, React.createElement(Rectangle1, null), React.createElement(Rectangle2, null), React.createElement(Rectangle3, null), React.createElement(Rectangle4, null), React.createElement(Rectangle5, null));
};

FlatLoader2.propTypes = process.env.NODE_ENV !== "production" ? {
  height: PropTypes.string.isRequired,
  width: PropTypes.string.isRequired
} : {};
FlatLoader2.defaultProps = {
  height: '50px',
  width: '45px'
};
export default FlatLoader2;