import styled, { keyframes } from 'styled-components';
import { normalizeColor } from 'grommet/es6/utils';


var animationFadeIn = keyframes(['0%{opacity:0;}50%{opacity:0;}100%{opacity:1;}']);

var animationBounceDelay = keyframes(['0%,80%,100%{-webkit-transform:scale(0.0)}40%{-webkit-transform:scale(1.0)}']);

var animationScaleDelay = keyframes(['0%,70%,100%{-webkit-transform:scale3D(1.0,1.0,1.0)}35%{-webkit-transform:scale3D(0.0,0.0,1.0)}']);

var animationStretchDelay = keyframes(['0%,40%,100%{-webkit-transform:scaleY(0.4)}20%{-webkit-transform:scaleY(1.0)}']);

var animationFoldCubeAngle = keyframes(['0%,10%{-webkit-transform:perspective(140px) rotateX(-180deg);opacity:0;}25%,75%{-webkit-transform:perspective(140px) rotateX(0deg);opacity:1;}90%,100%{-webkit-transform:perspective(140px) rotateY(180deg);opacity:0;}']);

var animationBounce = keyframes(['0%,100%{-webkit-transform:scale(0.0);}50%{-webkit-transform:scale(1.0);}']);

var animationCubeMove = keyframes(['25%{-webkit-transform:translateX(42px) rotate(-90deg) scale(0.5);}50%{-webkit-transform:translateX(42px) translateY(42px) rotate(-179deg);}50.1%{-webkit-transform:translateX(42px) translateY(42px) rotate(-180deg);}75%{-webkit-transform:translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);}100%{-webkit-transform:rotate(-360deg);}']);

var animationRotate = keyframes(['100%{-webkit-transform:rotate(360deg)}']);

var animationRotatePlane = keyframes(['0%{-webkit-transform:perspective(120px) rotateX(0deg) rotateY(0deg);}50%{-webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg);}100%{-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);}']);

var animationScaleOut = keyframes(['0%{-webkit-transform:scale(0.0)}100%{-webkit-transform:scale(1.0);opacity:0;}']);

var animationInnerCircle = keyframes(['0%{-webkit-transform:rotate(0);}100%{-webkit-transform:rotate(360deg);}']);

export var ThreeBounceSpinner = styled.div.withConfig({
  displayName: 'StyledSpinning__ThreeBounceSpinner',
  componentId: 'sc-1opb7yr-0'
})(['', ' & >div{background-color:', ';}height:', ';& >div{width:', ';height:', ';background-color:', ';border-radius:100%;display:inline-block;animation:', ' 1.4s infinite ease-in-out;animation-fill-mode:both;};& >div:first-child{animation-delay:-0.32s;};& >div:nth-child(2){animation-delay:-0.16s;};animation:', ' 2s;'], function (props) {
  return normalizeColor(props.color, props.theme);
}, function (props) {
  return normalizeColor(props.color, props.theme);
}, function (props) {
  return props.theme.global.edgeSize[props.size];
}, function (props) {
  return props.theme.global.edgeSize[props.size];
}, function (props) {
  return props.theme.global.edgeSize[props.size];
}, function (props) {
  return normalizeColor(props.color, props.theme);
}, animationBounceDelay, animationFadeIn);

export var CircleSpinner = styled.div.withConfig({
  displayName: 'StyledSpinning__CircleSpinner',
  componentId: 'sc-1opb7yr-1'
})(['width:', ';height:', ';position:relative;& > div{background-color:initial;width:100%;height:100%;position:absolute;left:0;top:0;}& > div::before{content:\'\';display:block;margin:0 auto;width:20%;height:20%;background-color:', ';border-radius:100%;animation:', ' 1.2s infinite ease-in-out;animation-fill-mode:both;}& > div:nth-child(2){-webkit-transform:rotate(30deg);transform:rotate(30deg)}& > div:nth-child(3){-webkit-transform:rotate(60deg);transform:rotate(60deg)}& > div:nth-child(4){-webkit-transform:rotate(90deg);transform:rotate(90deg)}& > div:nth-child(5){-webkit-transform:rotate(120deg);transform:rotate(120deg)}& > div:nth-child(6){-webkit-transform:rotate(150deg);transform:rotate(150deg)}& > div:nth-child(7){-webkit-transform:rotate(180deg);transform:rotate(180deg)}& > div:nth-child(8){-webkit-transform:rotate(210deg);transform:rotate(210deg)}& > div:nth-child(9){-webkit-transform:rotate(240deg);transform:rotate(240deg)}& > div:nth-child(10){-webkit-transform:rotate(270deg);transform:rotate(270deg)}& > div:nth-child(11){-webkit-transform:rotate(300deg);transform:rotate(300deg)}& > div:nth-child(12){-webkit-transform:rotate(330deg);transform:rotate(330deg)}& > div:nth-child(2)::before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}& > div:nth-child(3)::before{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}& > div:nth-child(4)::before{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}& > div:nth-child(5)::before{-webkit-animation-delay:-0.8s;animation-delay:-0.8s}& > div:nth-child(6)::before{-webkit-animation-delay:-0.7s;animation-delay:-0.7s}& > div:nth-child(7)::before{-webkit-animation-delay:-0.6s;animation-delay:-0.6s}& > div:nth-child(8)::before{-webkit-animation-delay:-0.5s;animation-delay:-0.5s}& > div:nth-child(9)::before{-webkit-animation-delay:-0.4s;animation-delay:-0.4s}& > div:nth-child(10)::before{-webkit-animation-delay:-0.3s;animation-delay:-0.3s}& > div:nth-child(11)::before{-webkit-animation-delay:-0.2s;animation-delay:-0.2s}& > div:nth-child(12)::before{-webkit-animation-delay:-0.1s;animation-delay:-0.1s}'], function (props) {
  return props.theme.global.edgeSize[props.size];
}, function (props) {
  return props.theme.global.edgeSize[props.size];
}, function (props) {
  return normalizeColor(props.color, props.theme);
}, animationBounceDelay);

export var CubeGridSpinner = styled.div.withConfig({
  displayName: 'StyledSpinning__CubeGridSpinner',
  componentId: 'sc-1opb7yr-2'
})(['width:', ';height:', ';& > div{width:33%;height:33%;background-color:', ';float:left;animation:', ' 1.3s infinite ease-in-out;}& > div:nth-child(1){-webkit-animation-delay:0.2s;animation-delay:0.2s}& > div:nth-child(2){-webkit-animation-delay:0.3s;animation-delay:0.3s}& > div:nth-child(3){-webkit-animation-delay:0.4s;animation-delay:0.4s}& > div:nth-child(4){-webkit-animation-delay:0.1s;animation-delay:0.1s}& > div:nth-child(5){-webkit-animation-delay:0.2s;animation-delay:0.2s}& > div:nth-child(6){-webkit-animation-delay:0.3s;animation-delay:0.3s}& > div:nth-child(7){-webkit-animation-delay:0.0s;animation-delay:0.0s}& > div:nth-child(8){-webkit-animation-delay:0.1s;animation-delay:0.1s}& > div:nth-child(9){-webkit-animation-delay:0.2s;animation-delay:0.2s}'], function (props) {
  return props.theme.global.edgeSize[props.size];
}, function (props) {
  return props.theme.global.edgeSize[props.size];
}, function (props) {
  return normalizeColor(props.color, props.theme);
}, animationScaleDelay);

export var WaveSpinner = styled.div.withConfig({
  displayName: 'StyledSpinning__WaveSpinner',
  componentId: 'sc-1opb7yr-3'
})(['width:30px;height:27px;& > div{background-color:', ';height:100%;width:6px;display:inline-block;animation:', ' 1.2s infinite ease-in-out;}$ > div:nth-child(2){animation-delay:-1.1s;}& > div:nth-child(3){animation-delay:-1.0s;}& > div:nth-child(4){animation-delay:-0.9s;}& > div:nth-child(5){animation-delay:-0.8s;}'], function (props) {
  return normalizeColor(props.color, props.theme);
}, animationStretchDelay);

export var FoldingCubeSpinner = styled.div.withConfig({
  displayName: 'StyledSpinning__FoldingCubeSpinner',
  componentId: 'sc-1opb7yr-4'
})(['width:', ';height:', ';position:relative;transform:rotateZ(45deg);& > div{background-color:initial;float:left;width:50%;height:50%;position:relative;-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);}& > div::before{content:\'\';position:absolute;top:0;left:0;width:100%;height:100%;background-color:', ';animation:', ' 2.4s infinite linear both;transform-origin:100% 100%;}& > div:nth-child(2){transform:scale(1.1) rotateZ(90deg);}& > div:nth-child(4){transform:scale(1.1) rotateZ(180deg);}& > div:nth-child(3){transform:scale(1.1) rotateZ(270deg);}& > div:nth-child(2)::before{animation-delay:0.3s;}& > div:nth-child(4)::before{animation-delay:0.6s;}& > div:nth-child(3)::before{animation-delay:0.9s;}'], function (props) {
  return props.theme.global.edgeSize[props.size];
}, function (props) {
  return props.theme.global.edgeSize[props.size];
}, function (props) {
  return normalizeColor(props.color, props.theme);
}, animationFoldCubeAngle);

export var DoubleBounceSpinner = styled.div.withConfig({
  displayName: 'StyledSpinning__DoubleBounceSpinner',
  componentId: 'sc-1opb7yr-5'
})(['width:', ';height:', ';position:relative;& > div{width:100%;height:100%;border-radius:50%;background-color:', ';opacity:0.6;position:absolute;top:0;left:0;animation:', ' 2.0s infinite ease-in-out;}& > div:last-child{-webkit-animation-delay:-1.0s;animation-delay:-1.0s;}'], function (props) {
  return props.theme.global.edgeSize[props.size];
}, function (props) {
  return props.theme.global.edgeSize[props.size];
}, function (props) {
  return normalizeColor(props.color, props.theme);
}, animationBounce);

export var WanderingCubesSpinner = styled.div.withConfig({
  displayName: 'StyledSpinning__WanderingCubesSpinner',
  componentId: 'sc-1opb7yr-6'
})(['width:52px;height:52px;position:relative;& > div{background-color:', ';width:10px;height:10px;position:absolute;top:0;left:0;animation:', ' 1.8s infinite ease-in-out;}& > div:last-child{-webkit-animation-delay:-0.9s;animation-delay:-0.9s;}'], function (props) {
  return normalizeColor(props.color, props.theme);
}, animationCubeMove);

export var ChasingDotsSpinner = styled.div.withConfig({
  displayName: 'StyledSpinning__ChasingDotsSpinner',
  componentId: 'sc-1opb7yr-7'
})(['width:', ';height:', ';position:relative;animation:', ' 2.0s infinite linear;& > div{width:60%;height:60%;display:inline-block;position:absolute;top:0;background-color:', ';border-radius:100%;animation:', ' 2.0s infinite ease-in-out;}& > div:last-child{top:auto;bottom:0;-webkit-animation-delay:-1.0s;animation-delay:-1.0s;}'], function (props) {
  return props.theme.global.edgeSize[props.size];
}, function (props) {
  return props.theme.global.edgeSize[props.size];
}, animationRotate, function (props) {
  return normalizeColor(props.color, props.theme);
}, animationBounce);

export var RotatingPlaneSpinner = styled.div.withConfig({
  displayName: 'StyledSpinning__RotatingPlaneSpinner',
  componentId: 'sc-1opb7yr-8'
})(['width:', ';height:', ';background-color:', ';animation:', ' 1.2s infinite ease-in-out;'], function (props) {
  return props.theme.global.edgeSize[props.size];
}, function (props) {
  return props.theme.global.edgeSize[props.size];
}, function (props) {
  return normalizeColor(props.color, props.theme);
}, animationRotatePlane);

export var PulseSpinner = styled.div.withConfig({
  displayName: 'StyledSpinning__PulseSpinner',
  componentId: 'sc-1opb7yr-9'
})(['width:', ';height:', ';background-color:', ';border-radius:100%;animation:', ' 1.0s infinite ease-in-out;'], function (props) {
  return props.theme.global.edgeSize[props.size];
}, function (props) {
  return props.theme.global.edgeSize[props.size];
}, function (props) {
  return normalizeColor(props.color, props.theme);
}, animationScaleOut);

export var WordPressSpinner = styled.div.withConfig({
  displayName: 'StyledSpinning__WordPressSpinner',
  componentId: 'sc-1opb7yr-10'
})(['& > div{width:', ';height:', ';background-color:', ';display:inline-block;border-radius:', ';position:relative;animation:', ' 1s linear infinite;}& > div::after{content:\'\';display:block;background-color:#fff;width:8px;height:8px;position:absolute;border-radius:8px;top:5px;left:5px;}'], function (props) {
  return props.theme.global.edgeSize[props.size];
}, function (props) {
  return props.theme.global.edgeSize[props.size];
}, function (props) {
  return normalizeColor(props.color, props.theme);
}, function (props) {
  return props.theme.global.edgeSize[props.size];
}, animationInnerCircle);