.ui-chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-sm);
  margin: 0;
  inline-size: 100%;
  min-inline-size: 0;
}

.ui-chart-title {
  font-size: var(--font-size-sm, var(--font-size-base));
  font-weight: var(--font-weight-medium);
  color: hsl(var(--foreground));
}

.ui-chart-canvas {
  inline-size: 100%;
  min-inline-size: 0;
}

.ui-chart .recharts-text,
.ui-chart .recharts-legend-item-text {
  font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
  fill: hsl(var(--muted-foreground));
  color: hsl(var(--muted-foreground));
}

.ui-chart .recharts-legend-item-text {
  color: hsl(var(--muted-foreground)) !important;
}

.ui-chart .recharts-default-tooltip {
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border)) !important;
  background: hsl(var(--popover)) !important;
  color: hsl(var(--popover-foreground));
  font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
}

.ui-chart-footer {
  margin-block-start: var(--chart-trend-footer-gap);
  font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
  color: hsl(var(--muted-foreground));
}

.ui-chart-trend[data-size="xs"] {
  --chart-trend-plot-height: var(--chart-trend-plot-height-xs);
}

.ui-chart-trend[data-size="sm"] {
  --chart-trend-plot-height: var(--chart-trend-plot-height-sm);
}

.ui-chart-trend[data-size="md"] {
  --chart-trend-plot-height: var(--chart-trend-plot-height-md);
}

.ui-chart-trend[data-size="lg"] {
  --chart-trend-plot-height: var(--chart-trend-plot-height-lg);
}

.ui-chart-trend-body {
  display: flex;
  flex-direction: column;
  gap: var(--chart-trend-tick-gap);
  inline-size: 100%;
  min-inline-size: 0;
}

.ui-chart-trend-plot {
  display: flex;
  align-items: flex-end;
  gap: var(--chart-trend-bar-gap);
  block-size: var(--chart-trend-plot-height);
  inline-size: 100%;
  min-inline-size: 0;
  border-block-end: var(--chart-trend-baseline-border, none);
}

.ui-chart-trend-column {
  display: flex;
  flex: 1 1 0;
  align-items: flex-end;
  justify-content: center;
  min-inline-size: 0;
  block-size: 100%;
}

.ui-chart-trend-bar {
  inline-size: 100%;
  max-inline-size: var(--chart-trend-bar-max-width);

  block-size: max(var(--chart-trend-bar-min-height), calc(var(--chart-trend-bar-value, 0) * 100%));
  border-start-start-radius: var(--chart-trend-bar-radius);
  border-start-end-radius: var(--chart-trend-bar-radius);
  background: var(
    --chart-trend-bar-background,
    hsl(var(--muted-foreground) / var(--chart-trend-bar-background-alpha))
  );
}

.ui-chart-trend-bar[data-emphasized="true"] {
  background: var(--chart-trend-bar-emphasis-background, hsl(var(--primary)));
}

.ui-chart-trend-ticks {
  display: flex;
  gap: var(--chart-trend-bar-gap);
  inline-size: 100%;
  min-inline-size: 0;
}

.ui-chart-trend-tick {
  flex: 1 1 0;
  min-inline-size: 0;
  overflow: hidden;
  font-size: var(--chart-trend-tick-font-size);

  line-height: var(--line-height-normal);
  color: hsl(var(--muted-foreground));
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-chart-axis-probe {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  visibility: hidden;
  margin-inline-end: var(--chart-category-axis-gap);
  font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
  white-space: nowrap;
  pointer-events: none;
}

.ui-chart-canvas [tabindex="-1"]:focus:not(:focus-visible) {
  outline: none;
}