import styled from "styled-components";
export const Wrapper = styled.div `
  position: relative;
  overflow: hidden;

  width: ${({ theme, width }) => width ?? theme.new?.textLoader?.width};
  height: ${({ theme, height }) => height ?? theme.new?.textLoader?.height};
  background: ${({ theme, background }) => background ?? theme.new?.textLoader?.background};
  border-radius: ${({ theme, borderRadius }) => borderRadius ?? theme.new?.textLoader?.borderRadius};
  margin: ${({ theme, margin }) => margin ?? theme.new?.textLoader?.margin};

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

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

  @media (max-width: 1023px) {
    width: ${({ theme, widthMobile }) => widthMobile ?? theme.new?.textLoader?.widthMobile};
    height: ${({ theme, heightMobile }) => heightMobile ?? theme.new?.textLoader?.heightMobile};
  }
`;
//# sourceMappingURL=text-loader.styled.js.map