"use strict";

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

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

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

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

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

var _debug = _interopRequireDefault(require("debug"));

var _classnames = _interopRequireDefault(require("classnames"));

var log = (0, _debug["default"])('pie-elements:config-ui:mui-box');
var MuiBox = (0, _styles.withStyles)(function (theme) {
  var light = theme.palette.type === 'light';
  var bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
  log(theme.palette.primary[theme.palette.type || 'light']);
  return {
    muiBox: {
      paddingTop: theme.spacing.unit,
      paddingBottom: theme.spacing.unit,
      position: 'relative',
      '&:before': {
        left: 0,
        right: 0,
        bottom: 0,
        height: '1px',
        content: '""',
        position: 'absolute',
        transition: 'background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
        pointerEvents: 'none',
        backgroundColor: bottomLineColor
      },
      '&:hover:before': {
        height: '2px'
      },
      '&:after': {
        left: 0,
        right: 0,
        bottom: 0,
        height: '2px',
        content: '""',
        position: 'absolute',
        transform: 'scaleX(0)',
        transition: 'transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',
        pointerEvents: 'none',
        backgroundColor: theme.palette.primary[theme.palette.type] //'#304ffe'

      }
    },
    focused: {
      '&:after': {
        transform: 'scaleX(1)'
      }
    }
  };
})(function (_ref) {
  var children = _ref.children,
      classes = _ref.classes,
      focused = _ref.focused;
  var names = (0, _classnames["default"])(classes.muiBox, focused && classes.focused);
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: names
  }, children);
});
MuiBox.propTypes = {
  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired,
  focused: _propTypes["default"].bool.isRequired
};
var _default = MuiBox;
exports["default"] = _default;
//# sourceMappingURL=index.js.map