/* 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: 0;
  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-top: 1rem;
  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: safe 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;
}

/* Use a pseudo element for the "legend" so we can adapt to High Contrast Mode without
   impacting the cell content */
tr[data-statistic-name] td:first-of-type::before {
  content: "";
  border-inline-start: 15px solid var(--stat-color);
  forced-color-adjust: none;
  margin-inline-end: 5px;
}

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: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}