"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

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

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styles = require("@material-ui/core/styles");

var _mathInput = require("@pie-lib/math-input");

var MathTemplated = function MathTemplated(_ref) {
  var attributes = _ref.attributes,
      value = _ref.value,
      classes = _ref.classes,
      keyToDisplay = _ref.keyToDisplay;
  return /*#__PURE__*/_react["default"].createElement("span", (0, _extends2["default"])({}, attributes, {
    className: classes.spanContainer
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.responseBox
  }, keyToDisplay), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.mathBlock
  }, /*#__PURE__*/_react["default"].createElement(_mathInput.mq.Static, {
    latex: value
  })));
};

MathTemplated.propTypes = {
  attributes: _propTypes["default"].object,
  classes: _propTypes["default"].object.isRequired,
  value: _propTypes["default"].string,
  keyToDisplay: _propTypes["default"].string
};

var styles = function styles(theme) {
  return {
    responseBox: {
      background: theme.palette.grey['A100'],
      color: theme.palette.grey['A700'],
      display: 'inline-flex',
      borderRight: '2px solid #C0C3CF',
      boxSizing: 'border-box',
      overflow: 'hidden',
      fontSize: '12px',
      minHeight: '36px',
      height: '100%',
      alignItems: 'center',
      fontFamily: 'Symbola, Times New Roman, serif',
      padding: '0 2px'
    },
    spanContainer: {
      display: 'inline-flex',
      border: '1px solid #C0C3CF',
      margin: '1px 5px',
      cursor: 'pointer',
      alignItems: 'center',
      justifyContent: 'center',
      minWidth: '50px',
      minHeight: '36px',
      height: 'fit-content'
    },
    mathBlock: {
      flex: 8,
      color: 'var(--pie-text, black)',
      padding: '4px !important',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: 'var(--pie-background, rgba(255, 255, 255, 0))',
      '& > .mq-math-mode sup.mq-nthroot': {
        fontSize: '70% !important',
        verticalAlign: '1em !important'
      },
      '& > .mq-math-mode .mq-sqrt-stem': {
        borderTop: '0.07em solid',
        marginLeft: '-1.5px',
        marginTop: '-2px !important',
        paddingTop: '5px !important'
      },
      '& .mq-overarrow-inner': {
        paddingTop: '0 !important',
        border: 'none !important'
      },
      '& .mq-overarrow.mq-arrow-both': {
        marginTop: '0px',
        minWidth: '1.23em',
        '& *': {
          lineHeight: '1 !important'
        },
        '&:before': {
          top: '-0.4em',
          left: '-1px'
        },
        '&:after': {
          top: '0px !important',
          position: 'absolute !important',
          right: '-2px'
        },
        '&.mq-empty:after': {
          top: '-0.45em'
        }
      },
      '& .mq-overarrow.mq-arrow-right': {
        '&:before': {
          top: '-0.4em',
          right: '-1px'
        }
      },
      '& .mq-overarrow-inner-right': {
        display: 'none !important'
      },
      '& .mq-overarrow-inner-left': {
        display: 'none !important'
      }
    }
  };
};

var _default = (0, _styles.withStyles)(styles)(MathTemplated);

exports["default"] = _default;
//# sourceMappingURL=index.js.map