/**
 * Copyright (c) 2015-present, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 */

var black = '#293238',
    darkGray = '#878e91',
    red = '#ce1126',
    redTransparent = 'rgba(206, 17, 38, 0.05)',
    lightRed = '#fccfcf',
    yellow = '#fbf5b4',
    yellowTransparent = 'rgba(251, 245, 180, 0.3)',
    white = '#ffffff';

var iframeStyle = {
  position: 'fixed',
  top: '0',
  left: '0',
  width: '100%',
  height: '100%',
  border: 'none',
  'z-index': 2147483647 - 1 // below the compile error overlay
};

var overlayStyle = {
  width: '100%',
  height: '100%',
  'box-sizing': 'border-box',
  'text-align': 'center',
  'background-color': white
};

var containerStyle = {
  position: 'relative',
  display: 'inline-flex',
  'flex-direction': 'column',
  height: '100%',
  width: '1024px',
  'max-width': '100%',
  'overflow-x': 'hidden',
  'overflow-y': 'auto',
  padding: '0.5rem',
  'box-sizing': 'border-box',
  'text-align': 'left',
  'font-family': 'Consolas, Menlo, monospace',
  'font-size': '11px',
  'white-space': 'pre-wrap',
  'word-break': 'break-word',
  'line-height': 1.5,
  color: black
};

var hintsStyle = {
  color: darkGray
};

var hintStyle = {
  padding: '0.5em 1em',
  cursor: 'pointer'
};

var closeButtonStyle = {
  color: black,
  'line-height': '1rem',
  'font-size': '1.5rem',
  padding: '1rem',
  cursor: 'pointer',
  position: 'absolute',
  right: 0,
  top: 0
};

var additionalChildStyle = {
  'margin-bottom': '0.5rem'
};

var headerStyle = {
  'font-size': '2em',
  'font-family': 'sans-serif',
  color: red,
  'white-space': 'pre-wrap',
  // Top bottom margin spaces header
  // Right margin revents overlap with close button
  margin: '0 2rem 0.75rem 0',
  flex: '0 0 auto',
  'max-height': '50%',
  overflow: 'auto'
};

var functionNameStyle = {};

var linkStyle = {
  'font-size': '0.9em',
  'margin-bottom': '0.9em'
};

var anchorStyle = {
  'text-decoration': 'none',
  color: darkGray
};

var traceStyle = {
  'font-size': '1em',
  flex: '0 1 auto',
  'min-height': '0px',
  overflow: 'auto'
};

var depStyle = {};

var primaryErrorStyle = {
  'background-color': lightRed
};

var secondaryErrorStyle = {
  'background-color': yellow
};

var omittedFramesCollapsedStyle = {
  color: black,
  cursor: 'pointer',
  'margin-bottom': '1.5em'
};

var omittedFramesExpandedStyle = {
  color: black,
  cursor: 'pointer',
  'margin-bottom': '0.6em'
};

var _preStyle = {
  display: 'block',
  padding: '0.5em',
  'margin-top': '0.5em',
  'margin-bottom': '0.5em',
  'overflow-x': 'auto',
  'white-space': 'pre-wrap',
  'border-radius': '0.25rem'
};
var primaryPreStyle = Object.assign({}, _preStyle, {
  'background-color': redTransparent
});
var secondaryPreStyle = Object.assign({}, _preStyle, {
  'background-color': yellowTransparent
});

var toggleStyle = {
  'margin-bottom': '1.5em',
  color: darkGray,
  cursor: 'pointer'
};

var codeStyle = {
  'font-family': 'Consolas, Menlo, monospace'
};

var hiddenStyle = {
  display: 'none'
};

var groupStyle = {
  'margin-right': '1em'
};

var _groupElemStyle = {
  'background-color': redTransparent,
  color: red,
  border: 'none',
  'border-radius': '4px',
  padding: '3px 6px',
  cursor: 'pointer'
};

var groupElemLeft = Object.assign({}, _groupElemStyle, {
  'border-top-right-radius': '0px',
  'border-bottom-right-radius': '0px',
  'margin-right': '1px'
});

var groupElemRight = Object.assign({}, _groupElemStyle, {
  'border-top-left-radius': '0px',
  'border-bottom-left-radius': '0px'
});

var footerStyle = {
  'font-family': 'sans-serif',
  color: darkGray,
  'margin-top': '0.5rem',
  flex: '0 0 auto'
};

export { containerStyle, iframeStyle, overlayStyle, hintsStyle, hintStyle, closeButtonStyle, additionalChildStyle, headerStyle, functionNameStyle, linkStyle, anchorStyle, traceStyle, depStyle, primaryErrorStyle, primaryPreStyle, secondaryErrorStyle, secondaryPreStyle, omittedFramesCollapsedStyle, omittedFramesExpandedStyle, toggleStyle, codeStyle, hiddenStyle, groupStyle, groupElemLeft, groupElemRight, footerStyle };