/* 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/. */

/* Statistics panel */

@import "chrome://devtools/skin/chart.css";

.statistics-panel {
  display: flex;
  height: 100vh;
}

.statistics-panel .devtools-toolbarbutton.back-button {
  min-width: 4em;
  margin: 0;
  padding: 0;
  border-radius: 0;
  border-top: none;
  border-bottom: none;
  border-inline-start: none;
}

.statistics-panel .splitter {
  border-color: rgba(0,0,0,0.2);
  cursor: default;
  pointer-events: none;
  height: 100%;
}

.statistics-panel .charts-container {
  display: flex;
  width: 100%;
}

.statistics-panel .charts,
.statistics-panel .pie-table-chart-container {
  width: 100%;
  height: 100%;
}

.statistics-panel .learn-more-link {
  font-weight: 400;
}

.statistics-panel .table-chart-title {
  display: flex;
}

.pie-table-chart-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.statistics-panel .pie-chart-container {
  margin-inline-start: 3vw;
  margin-inline-end: 1vw;
}

.statistics-panel .table-chart-container {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 240px;
  margin-inline-start: 1vw;
  margin-inline-end: 3vw;
}

.chart-colored-blob[name=html] {
  fill: var(--theme-highlight-bluegrey);
  background: var(--theme-highlight-bluegrey);
}

.chart-colored-blob[name=css] {
  fill: var(--theme-highlight-blue);
  background: var(--theme-highlight-blue);
}

.chart-colored-blob[name=js] {
  fill: var(--theme-highlight-lightorange);
  background: var(--theme-highlight-lightorange);
}

.chart-colored-blob[name=xhr] {
  fill: var(--theme-highlight-orange);
  background: var(--theme-highlight-orange);
}

.chart-colored-blob[name=fonts] {
  fill: var(--theme-highlight-purple);
  background: var(--theme-highlight-purple);
}

.chart-colored-blob[name=images] {
  fill: var(--theme-highlight-pink);
  background: var(--theme-highlight-pink);
}

.chart-colored-blob[name=media] {
  fill: var(--theme-highlight-green);
  background: var(--theme-highlight-green);
}

.chart-colored-blob[name=flash] {
  fill: var(--theme-highlight-red);
  background: var(--theme-highlight-red);
}

.table-chart-row {
  display: flex;
}

.table-chart-row-label[name=cached] {
  display: none;
}

.table-chart-row-label[name=count] {
  width: 3em;
  text-align: end;
}

.table-chart-row-label[name=label] {
  width: 7em;
  text-align: start;
}

.table-chart-row-label[name=size] {
  width: 7em;
  text-align: start;
}

.table-chart-row-label[name=time] {
  width: 7em;
  text-align: start;
}

.table-chart-totals {
  display: flex;
  flex-direction: column;
}

/* Firebug theme support for statistics panel charts */

.theme-firebug .chart-colored-blob[name=html] {
  fill: rgba(94, 136, 176, 0.8); /* Blue-Grey highlight */
  background: rgba(94, 136, 176, 0.8);
}

.theme-firebug .chart-colored-blob[name=css] {
  fill: rgba(70, 175, 227, 0.8); /* light blue */
  background: rgba(70, 175, 227, 0.8);
}

.theme-firebug .chart-colored-blob[name=js] {
  fill: rgba(235, 83, 104, 0.8); /* red */
  background: rgba(235, 83, 104, 0.8);
}

.theme-firebug .chart-colored-blob[name=xhr] {
  fill: rgba(217, 102, 41, 0.8); /* orange  */
  background: rgba(217, 102, 41, 0.8);
}

.theme-firebug .chart-colored-blob[name=fonts] {
  fill: rgba(223, 128, 255, 0.8); /* pink */
  background: rgba(223, 128, 255, 0.8);
}

.theme-firebug .chart-colored-blob[name=images] {
  fill: rgba(112, 191, 83, 0.8); /* pink */
  background: rgba(112, 191, 83, 0.8);
}

.theme-firebug .chart-colored-blob[name=media] {
  fill: rgba(235, 235, 84, 0.8); /* yellow */
  background: rgba(235, 235, 84, 0.8);
}

.theme-firebug .chart-colored-blob[name=flash] {
  fill: rgba(84, 235, 159, 0.8); /* cyan */
  background: rgba(84, 235, 159, 0.8);
}

/* Responsive web design support */

@media (max-width: 700px) {
  .statistics-panel .charts-container {
    flex-direction: column;
    /* Minus 4em for statistics back button width */
    width: calc(100% - 4em);
  }

  .statistics-panel .splitter {
    width: 100%;
    height: 1px;
  }
}
