"use strict";

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

const styleh_components_1 = require("styleh-components");
/**
 * @todo - should be using fill: white; fill: transparent; when we have as svg
 */


const DominoLoaderStyles = styleh_components_1.styled.todo`.domino-loader-parent{position:relative;padding:0;width:100px;height:25px;list-style:none;li{display:block;position:absolute;right:0;width:3px;height:25px;border-radius:1px;transform-origin:50% 100%;background-color:black;animation:bar linear 2.8s infinite;will-change:transform;&:nth-child(1){transform:translateX(0) rotate(0deg);opacity:0.2;}&:nth-child(2){transform:translateX(-15px) rotate(0deg);animation-delay:-0.4s;}&:nth-child(3){transform:translateX(-30px) rotate(0deg);animation-delay:-0.8s;}&:nth-child(4){transform:translateX(-45px) rotate(10deg);animation-delay:-1.2s;}&:nth-child(5){transform:translateX(-60px) rotate(40deg);animation-delay:-1.6s;}&:nth-child(6){transform:translateX(-75px) rotate(62deg);animation-delay:-2s;}&:nth-child(7){transform:translateX(-90px) rotate(72deg);animation-delay:-2.4s;}}}@keyframes bar{0%{transform:translateX(0) rotate(0deg);opacity:0;}14.28%{transform:translateX(-15px) rotate(0deg);opacity:1;}28.56%{transform:translateX(-30px) rotate(0deg);opacity:1;}37.12%{transform:translateX(-39px) rotate(0deg);opacity:1;}42.84%{transform:translateX(-45px) rotate(10deg);opacity:1;}57.12%{transform:translateX(-60px) rotate(40deg);opacity:1;}71.4%{transform:translateX(-75px) rotate(62deg);opacity:1;}85.68%{transform:translateX(-90px) rotate(72deg);opacity:1;}100%{transform:translateX(-105px) rotate(74deg);opacity:0;}}`;
exports.DominoLoaderStyles = DominoLoaderStyles;
exports.default = DominoLoaderStyles; //# sourceMappingURL=styled.js.map