'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _themeGet = require('../../../extensions/themeGet');

var _themeGet2 = _interopRequireDefault(_themeGet);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var grow = (0, _styledComponents.keyframes)(['0%{transform:scale(0);}50%{opacity:1;transform:scale(1);}100%{opacity:0;}']);

var LoaderRing = _styledComponents2.default.div.withConfig({ displayName: 'LoaderRing' }).withConfig({
  displayName: 'LoaderRing'
})(['height:', ';width:', ';border-width:2px;border-style:solid;border-color:', ';border-radius:50%;margin:0 5px;transform:scale(0);animation:', ' 1000ms ease infinite 0ms;&:nth-child(2){animation-delay:300ms;}&:nth-child(3){animation-delay:600ms;}&:first-child{margin-left:0;}&:last-child{margin-right:0;}'], function (_ref) {
  var size = _ref.size;
  return size;
}, function (_ref2) {
  var size = _ref2.size;
  return size;
}, (0, _themeGet2.default)('colors.primary.default'), grow);

LoaderRing.defaultProps = {
  size: '20px',
  color: null
};

exports.default = LoaderRing;