/* 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;
  overflow: auto;
}

.statistics-panel .back-button {
  height: -moz-fit-content;
  position: absolute;
  padding: 7px 5px;
  margin: 0px;
  top: 8px;
  inset-inline-start: 8px;
}

.theme-light .statistics-panel .back-button {
  background-color: var(--grey-20);
}

.statistics-panel .splitter {
  border-color: var(--theme-splitter-color);
  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%;
  margin-bottom: 1rem;
}

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

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

.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 {
  min-width: 240px;
  margin-inline-start: 1vw;
  margin-inline-end: 3vw;
}

tr[data-statistic-name] td:first-of-type {
  border-inline-start: 15px solid var(--stat-color);
}

path[data-statistic-name] {
  fill: var(--stat-color);
}

[data-statistic-name=html] {
  --stat-color: var(--theme-highlight-bluegrey);
}

[data-statistic-name=css] {
  --stat-color: var(--theme-highlight-blue);
}

[data-statistic-name=js] {
  --stat-color: var(--theme-highlight-lightorange);
}

[data-statistic-name=xhr] {
  --stat-color: var(--theme-highlight-orange);
}

[data-statistic-name=fonts] {
  --stat-color: var(--theme-highlight-purple);
}

[data-statistic-name=images] {
  --stat-color: var(--theme-highlight-pink);
}

[data-statistic-name=media] {
  --stat-color: var(--theme-highlight-green);
}

/*
 * Align cell text to the center by default.
 */
.table-chart-row-label {
  text-align: center;
}

.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;
}

/* 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;
  }

  .statistics-panel .table-chart-title {
    margin-top: 3rem;
  }

  .statistics-panel .charts,
  .statistics-panel .pie-table-chart-container{
    margin-bottom: 2rem;
  }
}

.offscreen{
    position: absolute!important;
    font-size: 0px;
    overflow: hidden;
    clip: rect(1px,1px,1px,1px);
    clip-path: polygon(0 0,0 0,0 0,0 0);
}