.mini-chart,
.line-chart,
.radar-chart {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.mini-chart {
  height: 76px;
  color: var(--blue-primary);
}

.line-chart {
  min-height: 180px;
  color: var(--blue-primary);
}

.radar-chart {
  min-height: 160px;
  color: var(--blue-primary);
}

.mini-chart svg,
.line-chart svg,
.radar-chart svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mini-chart__grid,
.line-chart__grid,
.radar-chart__grid {
  opacity: 0.28;
}

.mini-chart__line,
.line-chart__line,
.radar-chart__shape {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mini-chart__fill,
.line-chart__fill {
  fill: currentColor;
  opacity: 0.12;
}

.line-chart__label,
.radar-chart__label {
  fill: var(--text-muted);
  font-family: var(--font-cn);
  font-size: 11px;
}

.line-chart__value {
  fill: var(--gold-light);
  font-family: var(--font-data);
  font-size: 16px;
  font-weight: 700;
}

.chart-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: inherit;
  color: var(--text-muted);
  font-size: 12px;
}