"use strict";

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

var _ThemeProvider = require("../ThemeProvider");

var updateBrowserStyle = function updateBrowserStyle() {
  return {
    style: {
      bg: 'transparent',
      position: 'fixed',
      left: 0,
      top: 0,
      width: '100%',
      height: '100%',
      textAlign: 'center',
      display: 'table'
    }
  };
}; // explicitly set px units - IE 6-8 doesn't support rem


exports.updateBrowserStyle = updateBrowserStyle;
var browserBoxStyle = {
  bg: 'gray.50',
  padding: '32px',
  margin: '16px',
  height: '175px',
  width: '200px',
  textAlign: 'center',
  display: 'inline-block',
  boxSizing: 'border-box'
};

var useUpdateBrowserStyle = function useUpdateBrowserStyle(props) {
  var theme = (0, _ThemeProvider.useTheme)();
  var styles = theme['styles'].updateBrowser ? theme['styles'].updateBrowser(props, theme) : updateBrowserStyle(props, theme);
  return {
    updateBrowserStyleProps: styles.style,
    browserBoxStyleProps: browserBoxStyle
  };
};

var _default = useUpdateBrowserStyle;
exports["default"] = _default;
//# sourceMappingURL=styles.js.map