.ds-chart {
  --ds-chart-series-positive: var(--ds-color-chart-positive);
  --ds-chart-series-negative: var(--ds-color-chart-negative);
  --ds-chart-series-neutral: var(--ds-color-chart-neutral);
  --ds-chart-grid: var(--ds-color-chart-grid);
  --ds-chart-surface: var(--ds-color-surface);
  --ds-chart-label: var(--ds-color-text-muted);
  --ds-chart-tooltip-bg: var(--ds-color-chart-tooltip);
  --ds-chart-tooltip-color: var(--ds-color-chart-tooltip-text);
  color: var(--ds-chart-label);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-font-size-xs);
  font-variant-numeric: tabular-nums;
}

.ds-chart .ds-chart-gridline {
  stroke: var(--ds-chart-grid);
  stroke-width: 1;
}

.ds-chart .ds-chart-positive {
  fill: none;
  stroke: var(--ds-chart-series-positive);
}

.ds-chart .ds-chart-negative {
  fill: none;
  stroke: var(--ds-chart-series-negative);
}

.ds-chart .ds-chart-neutral {
  fill: none;
  stroke: var(--ds-chart-series-neutral);
}

.ds-chart-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ds-space-3);
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-font-size-xs);
}

.ds-chart-legend i {
  display: inline-block;
  width: 0.75rem;
  height: 0.1875rem;
  margin-right: var(--ds-space-1);
  border-radius: var(--ds-radius-pill);
  background: currentColor;
  vertical-align: middle;
}