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

.tooltipCallNodeCategory {
  display: grid;
  align-items: center;
  padding-bottom: 10px;
  border-top: 1px solid var(--grey-40);
  gap: 4px;
  grid-template-columns: repeat(4, min-content);
}

.tooltipCallNodeHeader {
  padding: 0 5px;
  border-right: 1px solid var(--grey-30);
  margin-top: 5px;
  color: var(--grey-50);
  white-space: nowrap;
}

.tooltipCallNodeName {
  white-space: nowrap;
}

/* This contains the 2 meters (self and total sample count values). */
.tooltipCallNodeGraph {
  display: flex;
  width: 150px;
  height: 10px;
  flex-direction: column;
  gap: 2px;
}

/* This is just one meter (either self or total sample count values). */
.tooltipCallNodeGraphMeter {
  /* It's not fully clear why height: 0 is needed here, but otherwise the meter
   * has a height of 11px despite the parent's 10px height... */
  height: 0;
  flex: 1;
  appearance: none;
  background: var(--grey-90-a10);
}

/* This is the bar inside the meter. */
.tooltipCallNodeGraphMeterBar {
  height: 100%;
  box-sizing: border-box;

  /* Some colors don't have enough contrast (yellow for JavaScript, white for
   * Idle), therefore adding a border improves accessibility. */
  border-inline-end: 1px solid var(--grey-50);
}

.tooltipCallNodeCategory .tooltipCategoryRowHeader {
  margin-top: 12px;
  font-weight: bold;
}

.tooltipCallNodeTiming {
  padding: 0 5px;
  text-align: right;
  white-space: nowrap;
}

.tooltipCallNodeHeaderSwatchRunning,
.tooltipCallNodeHeaderSwatchSelf {
  display: inline-block;
  width: 9px;
  height: 9px;
  box-sizing: border-box;
  border: 0.5px solid rgb(0 0 0 / 0.1);
  margin-right: 3px;
}

.tooltipCallNodeHeaderSwatchRunning {
  background-color: var(--blue-40);
}

.tooltipCallNodeHeaderSwatchSelf {
  background-color: var(--blue-60);
}

.tooltipCallNodeCategory .tooltipCallNodeHeaderSwatchSelf,
.tooltipCallNodeCategory .tooltipCallNodeHeaderSwatchRunning {
  display: none;
}

.tooltipCallNodeDetailsLeft {
  min-width: 150px;
  padding: 10px;
  padding-bottom: 5px;
}
