"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.ProgressBar = void 0;

var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));

var _react = _interopRequireDefault(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _Icons = require("../../../../../Common/Icons");

var _Common = require("../../../../../Common");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;

var ProgressBar = function ProgressBar(_ref) {
  var status = _ref.status;
  return /*#__PURE__*/_react["default"].createElement(Progress, null, /*#__PURE__*/_react["default"].createElement(Bar, null, /*#__PURE__*/_react["default"].createElement(Progress1, {
    status: status
  }), /*#__PURE__*/_react["default"].createElement(Progress2, {
    status: status
  }), /*#__PURE__*/_react["default"].createElement(Progress3, {
    status: status
  }), /*#__PURE__*/_react["default"].createElement(_Common.Orders, null), /*#__PURE__*/_react["default"].createElement(_Icons.IconDelivery, null), /*#__PURE__*/_react["default"].createElement(_Icons.IconStore, null)), /*#__PURE__*/_react["default"].createElement(Status, null, status));
};

exports.ProgressBar = ProgressBar;

var Progress = _styledComponents["default"].div.attrs({
  className: 'd-flex '
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  & svg {\n    height: 3rem;\n    position: absolute;\n  }\n  & svg:first-of-type {\n    left: 1.1rem;\n  }\n  & svg:nth-of-type(2) {\n    left: 8.6rem;\n  }\n  & svg:last-of-type {\n    height: 2.6rem;\n    left: 16.3rem;\n    top: 0.2rem;\n  }\n"])));

var Bar = _styledComponents["default"].div.attrs({
  className: 'd-flex my-2'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 100%;\n  position: relative;\n"])));

var Progress1 = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 4.5rem;\n  height: 4.5rem;\n  position: absolute;\n  border-radius: 50%;\n  border: 2px solid\n    ", ";\n  left: 0rem;\n  top: -0.8rem;\n\n  &::after {\n    content: '';\n    width: 80%;\n    border: 2px solid\n      ", ";\n    position: absolute;\n    top: 50%;\n    right: -80%;\n  }\n"])), function (props) {
  return props.status === 'Confirmed' ? '#000' : '#ccc';
}, function (props) {
  return props.status === 'Confirmed' ? '#000' : '#ccc';
});

var Progress2 = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 4.5rem;\n  height: 4.5rem;\n  position: absolute;\n  border-radius: 50%;\n  border: 2px solid\n    ", ";\n  left: 7.4rem;\n  top: -0.8rem;\n  &::after {\n    content: '';\n    width: 90%;\n    border: 2px solid\n      ", ";\n    position: absolute;\n    top: 50%;\n    right: -90%;\n  }\n"])), function (props) {
  return props.status === 'Confirmed' ? '#000' : '#ccc';
}, function (props) {
  return props.status === 'Confirmed' ? '#000' : '#ccc';
});

var Progress3 = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 4.5rem;\n  height: 4.5rem;\n  position: absolute;\n  border-radius: 50%;\n  border: 2px solid\n    ", ";\n  left: 15.3rem;\n  top: -0.8rem;\n"])), function (props) {
  return props.status === 'Complete' ? '#000' : '#ccc';
});

var Status = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  line-height: 4.5rem;\n  font-size: 1.8rem;\n  font-weight: 550;\n  margin-left: 21rem;\n  @media (max-width: ", ") {\n    margin: 5rem 0 0 0;\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.xs.max;
});
//# sourceMappingURL=index.js.map