import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

var _templateObject, _templateObject2, _templateObject3;

import { useConfigState } from '@sentecacommerce-theme/lib';
import React from 'react';
import styled from 'styled-components';
import { Placeholder } from '../Placeholder';
export var LineItemPlaceholder = () => {
  var {
    imagesConfig
  } = useConfigState();
  var ratio = imagesConfig.ratio.height / imagesConfig.ratio.width;
  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Image, {
    style: {
      paddingBottom: ratio * 100 + "%"
    }
  }, /*#__PURE__*/React.createElement(Placeholder, {
    absolute: true
  })), /*#__PURE__*/React.createElement(ContentContainer, null, /*#__PURE__*/React.createElement(Placeholder, {
    width: "80%",
    className: "mt-3"
  }), /*#__PURE__*/React.createElement(Placeholder, {
    width: "75%",
    className: "mt-2"
  }), /*#__PURE__*/React.createElement(Placeholder, {
    width: "35%",
    className: "mt-2"
  }), /*#__PURE__*/React.createElement("div", {
    className: "pt-2"
  }), /*#__PURE__*/React.createElement(Placeholder, {
    width: "20%",
    className: "mt-3",
    style: {
      height: '2rem'
    }
  })));
};
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n"])));
var Image = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  padding-bottom: 100%;\n  position: relative;\n"])));
var ContentContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  min-height: 13rem;\n"])));
//# sourceMappingURL=index.js.map