:root {
  --usage-chart-gap: var(--space-4);
  --usage-chart-height: var(--size-300);
  --usage-chart-heading-font: var(--font-type-heading-small);
  --usage-chart-note-font: var(--font-type-body-small);
  --usage-chart-legend-font: var(--font-type-label-small);
  --usage-chart-swatch-size: var(--space-2);
  --usage-chart-swatch-radius: var(--radius-2);
  --usage-chart-legend-gap: var(--space-2);
  --usage-chart-series-0: var(--color-chart-1);
  --usage-chart-series-1: var(--color-chart-2);
  --usage-chart-series-2: var(--color-chart-3);
  --usage-chart-series-3: var(--color-chart-4);
  --usage-chart-series-4: var(--color-chart-5);
  --usage-chart-series-5: var(--color-chart-6);
}
.usage-chart { display: grid; gap: var(--usage-chart-gap); inline-size: 100%; min-inline-size: 0; margin: 0; }
.usage-chart__header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--usage-chart-gap); }
.usage-chart__header h2 { margin: 0; font: var(--usage-chart-heading-font); color: var(--color-foreground); }
.usage-chart__canvas { inline-size: 100%; block-size: var(--usage-chart-height); min-inline-size: 0; }
.usage-chart__note { margin: 0; font: var(--usage-chart-note-font); color: var(--color-muted-foreground); }
.usage-chart__legend { display: flex; flex-wrap: wrap; gap: var(--usage-chart-gap); margin: 0; padding: 0; list-style: none; }
.usage-chart__legend li { display: flex; align-items: center; gap: var(--usage-chart-legend-gap); min-inline-size: 0; font: var(--usage-chart-legend-font); color: var(--color-muted-foreground); overflow-wrap: anywhere; }
.usage-chart__swatch { flex: none; inline-size: var(--usage-chart-swatch-size); block-size: var(--usage-chart-swatch-size); border-radius: var(--usage-chart-swatch-radius); background: var(--usage-chart-series-color); }
.usage-chart [hidden] { display: none; }