text: /*eslint-env browser*/
  
  var clientOverlay = document.createElement('div');
  clientOverlay.id = 'webpack-hot-middleware-clientOverlay';
  var styles = {
    background: 'rgba(0,0,0,0.85)',
    color: '#e8e8e8',
    lineHeight: '1.6',
    whiteSpace: 'pre',
    fontFamily: 'Menlo, Consolas, monospace',
    fontSize: '13px',
    position: 'fixed',
    zIndex: 9999,
    padding: '10px',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    overflow: 'auto',
    dir: 'ltr',
    textAlign: 'left',
  };
  
  var ansiHTML = require('ansi-html');
  var colors = {
    reset: ['transparent', 'transparent'],
    black: '181818',
    red: 'ff3348',
    green: '3fff4f',
    yellow: 'ffd30e',
    blue: '169be0',
    magenta: 'f840b7',
    cyan: '0ad8e9',
    lightgrey: 'ebe7e3',
    darkgrey: '6d7891',
  };
  
  var Entities = require('html-entities').AllHtmlEntities;
  var entities = new Entities();
  
  function showProblems(type, lines) {
    clientOverlay.innerHTML = '';
    lines.forEach(function(line) {
      var isNested = typeof line === 'object';
      var msg = isNested ? line.moduleName + '\n\n' + line.message : line;
      msg = ansiHTML(entities.encode(msg));
      var div = document.createElement('div');
      div.style.marginBottom = '26px';
      div.innerHTML = problemType(type) + ' in ' + msg;
      clientOverlay.appendChild(div);
    });
    if (document.body) {
      document.body.appendChild(clientOverlay);
    }
  }
  
  function clear() {
    if (document.body && clientOverlay.parentNode) {
      document.body.removeChild(clientOverlay);
    }
  }
  
  function problemType(type) {
    var problemColors = {
      errors: colors.red,
      warnings: colors.yellow,
    };
    var color = problemColors[type] || colors.red;
    return (
      '<span style="background-color:#' +
      color +
      '; color:#000000; padding:3px 6px; border-radius: 4px;">' +
      type.slice(0, -1).toUpperCase() +
      '</span>'
    );
  }
  
  module.exports = function(options) {
    for (var color in options.ansiColors) {
      if (color in colors) {
        colors[color] = options.ansiColors[color];
      }
      ansiHTML.setColors(colors);
    }
  
    for (var style in options.overlayStyles) {
      styles[style] = options.overlayStyles[style];
    }
  
    for (var key in styles) {
      clientOverlay.style[key] = styles[key];
    }
  
    return {
      showProblems: showProblems,
      clear: clear,
    };
  };
  
  module.exports.clear = clear;
  module.exports.showProblems = showProblems;
  