/**
 * <BarChart> — small SVG bar chart for the dashboard usage card.
 *
 * Markup (rendered by renderBarChart):
 *   <div class="c-bar-chart">
 *     <svg class="c-bar-chart__svg" …>…</svg>
 *     <div class="c-bar-chart__tooltip" hidden>…</div>
 *     <p class="c-bar-chart__empty" hidden>No tool calls yet.</p>
 *   </div>
 */

.c-bar-chart {
  position: relative;
  display: block;
  width: 100%;
}

.c-bar-chart__svg {
  display: block;
  width: 100%;
  height: 96px;
  overflow: visible;
}

.c-bar-chart__bar {
  fill: var(--info-border);
  transition: fill 120ms ease;
}

.c-bar-chart__bar--empty {
  fill: var(--bg-tertiary);
}

.c-bar-chart__bar:hover,
.c-bar-chart__bar:focus {
  fill: var(--info-text);
  outline: none;
}

.c-bar-chart__baseline {
  stroke: var(--border-tertiary);
  stroke-width: 0.5;
}

.c-bar-chart__tooltip {
  position: absolute;
  z-index: 2;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-micro);
  color: var(--bg-primary);
  background: var(--text-primary);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 6px));
}

.c-bar-chart__tooltip[hidden] {
  display: none;
}

.c-bar-chart__empty {
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-small);
  color: var(--text-tertiary);
  text-align: center;
}

.c-bar-chart__empty[hidden] {
  display: none;
}