import { jsx as _jsx } from "react/jsx-runtime";
import styled from "styled-components";
const composeStyle = (k, v) => (v ? `${k}: ${v};` : "");
const Wrapper = styled.div(({ theme: { mediaMobile, width, widthMobile, height, heightMobile, background, borderRadius, margin, }, }) => `
  position: relative;
  overflow: hidden;

  ${composeStyle("width", width)}
  ${composeStyle("height", height)}
  ${composeStyle("background", background)}
  ${composeStyle("border-radius", borderRadius)}
  ${composeStyle("margin", margin)}

  ::after {
    content: "";
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -200%;
    width: 200%;
    animation: flare 1.5s infinite ease-in;
    background: linear-gradient(270deg, ${background} 0%, rgba(255,255,255,1) 50%, ${background} 100%);
  }

  @keyframes flare {
    from {
      left: -200%;
    }
    to {
      left: 200%;
    }
  }

  @media (${mediaMobile}) {
    ${composeStyle("width", widthMobile)}
    ${composeStyle("height", heightMobile)}
  }
`);
const Loader = ({ theme }) => (_jsx(Wrapper, { theme: theme }));
// TODO: move to UI kit
export default Loader;
//# sourceMappingURL=index.js.map