/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@import "resource://devtools/client/shared/components/splitter/SplitBox.css";
@import "resource://devtools/client/shared/components/tree/TreeView.css";
@import "resource://devtools/client/shared/components/tabs/Tabs.css";
@import "resource://devtools/client/shared/components/tabs/TabBar.css";
@import "chrome://devtools/skin/components-frame.css";
@import "chrome://devtools/content/sourceeditor/codemirror/lib/codemirror.css";
@import "chrome://devtools/content/sourceeditor/codemirror/addon/dialog/dialog.css";
@import "chrome://devtools/content/sourceeditor/codemirror/mozilla.css";

/* Network panel components & styles */
@import "chrome://devtools/content/netmonitor/src/assets/styles/variables.css";
@import "chrome://devtools/content/netmonitor/src/assets/styles/MdnLink.css";
@import "chrome://devtools/content/netmonitor/src/assets/styles/Toolbar.css";
@import "chrome://devtools/content/netmonitor/src/assets/styles/StatusBar.css";
@import "chrome://devtools/content/netmonitor/src/assets/styles/RequestList.css";
@import "chrome://devtools/content/netmonitor/src/assets/styles/NetworkDetailsPanel.css";
@import "chrome://devtools/content/netmonitor/src/assets/styles/StatisticsPanel.css";

/* General */

* {
  box-sizing: border-box;
}

html,
body,
#mount,
.launchpad-root,
.network-monitor,
.monitor-panel {
  flex: initial;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.split-box {
  overflow: hidden;
}

/* Drag and drop HAR files */

.network-monitor > div {
  height: 100%;
}

.network-monitor .dropHarFiles {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  text-align: center;
  top: 25px;
  right: 25px;
  bottom: 25px;
  left: 25px;
  z-index: 100;
  font-size: 3.5rem;
  color: gray;
  border: 4px dashed gray;
  pointer-events: none;
}

.network-monitor > div[dragging="true"] .dropHarFiles {
  display: flex;
}

.network-monitor > div[dragging="true"] {
  filter: opacity(50%);
}
