.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-clickable .recharts-surface {
  cursor: pointer;
}

.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: var(--stroke-hairline) solid hsl(var(--border)) !important;
  background: hsl(var(--popover) / var(--popover-alpha, 100%)) !important;
  color: hsl(var(--popover-foreground));
  font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
}

.ui-chart .recharts-line-curve,
.ui-chart .recharts-area-curve {
  stroke-width: var(--chart-series-stroke-width);
}

.ui-chart .recharts-area-area {
  fill-opacity: var(--chart-area-fill-alpha);
}

.ui-chart .recharts-cartesian-grid line {
  stroke-dasharray: var(--chart-grid-line-dash);
}

.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, var(--stroke-md)),
    calc(var(--chart-trend-bar-value, 0) * 100%)
  );
  border-start-start-radius: var(
    --chart-trend-bar-radius,
    calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
  );
  border-start-end-radius: var(
    --chart-trend-bar-radius,
    calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
  );
  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;
}

.ui-chart-heatmap[data-size="xs"] {
  --chart-heatmap-cell-size: var(--chart-heatmap-cell-size-xs);
}

.ui-chart-heatmap[data-size="sm"] {
  --chart-heatmap-cell-size: var(--chart-heatmap-cell-size-sm);
}

.ui-chart-heatmap[data-size="md"] {
  --chart-heatmap-cell-size: var(--chart-heatmap-cell-size-md);
}

.ui-chart-heatmap[data-size="lg"] {
  --chart-heatmap-cell-size: var(--chart-heatmap-cell-size-lg);
}

.ui-chart-heatmap-scroll {
  inline-size: 100%;
  min-inline-size: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.ui-chart-heatmap-grid {
  inline-size: 100%;
  border-collapse: separate;
  border-spacing: var(--chart-heatmap-cell-gap);
  font-size: var(--chart-heatmap-tick-font-size);
  line-height: var(--line-height-normal);
}

.ui-chart-heatmap-column-header,
.ui-chart-heatmap-row-header {
  padding: 0;
  font-weight: var(--font-weight-normal);
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
}

.ui-chart-heatmap-column-header {
  text-align: center;
}

.ui-chart-heatmap-row-header {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  inline-size: 1%;
  padding-inline-end: var(--space-2);
  text-align: start;
  background: var(--chart-heatmap-row-header-background, hsl(var(--card)));
}

.ui-chart-heatmap-corner {
  padding: 0;
}

.ui-chart-heatmap-cell {
  min-inline-size: var(--chart-heatmap-cell-size);
  inline-size: var(--chart-heatmap-cell-size);
  block-size: var(--chart-heatmap-cell-size);
  padding: 0;

  border: var(--stroke-hairline) solid transparent;
  border-radius: var(
    --chart-heatmap-cell-radius,
    calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
  );
}

.ui-chart-heatmap-cell[data-step="1"],
.ui-chart-heatmap-legend-swatch[data-step="1"] {
  background: var(--chart-heat-1);
}

.ui-chart-heatmap-cell[data-step="2"],
.ui-chart-heatmap-legend-swatch[data-step="2"] {
  background: var(--chart-heat-2);
}

.ui-chart-heatmap-cell[data-step="3"],
.ui-chart-heatmap-legend-swatch[data-step="3"] {
  background: var(--chart-heat-3);
}

.ui-chart-heatmap-cell[data-step="4"],
.ui-chart-heatmap-legend-swatch[data-step="4"] {
  background: var(--chart-heat-4);
}

.ui-chart-heatmap-cell[data-step="5"],
.ui-chart-heatmap-legend-swatch[data-step="5"] {
  background: var(--chart-heat-5);
}

.ui-chart-heatmap-cell[data-empty],
.ui-chart-heatmap-legend-swatch[data-empty] {
  background: transparent;
  border: var(
    --chart-heatmap-empty-border,
    var(--stroke-hairline) dashed hsl(var(--muted-foreground))
  );
}

.ui-chart-heatmap-cell[data-emphasized],
.ui-chart-heatmap-legend-swatch[data-emphasized] {
  box-shadow:
    inset 0 0 0 var(--chart-heatmap-emphasis-width)
      var(--chart-heatmap-emphasis-border, hsl(var(--foreground))),
    inset 0 0 0 calc(var(--chart-heatmap-emphasis-width) * 2) hsl(var(--card));
}

.ui-chart-heatmap-tooltip {
  display: flex;
  flex-direction: column;
}

.ui-chart-heatmap-tooltip-title {
  font-variant-numeric: tabular-nums;
}

.ui-chart-heatmap-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--chart-heatmap-legend-gap) calc(var(--chart-heatmap-legend-gap) * 2);
  font-size: var(--chart-heatmap-tick-font-size);
  line-height: var(--line-height-normal);
  color: hsl(var(--muted-foreground));
}

.ui-chart-heatmap-legend-scale,
.ui-chart-heatmap-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--chart-heatmap-legend-gap);
  font-variant-numeric: tabular-nums;
}

.ui-chart-heatmap-legend-ramp {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-chart-heatmap-legend-swatch {
  display: inline-block;
  inline-size: calc(var(--chart-heatmap-legend-swatch-size) * 1.5);
  block-size: var(--chart-heatmap-legend-swatch-size);
  border: var(--stroke-hairline) solid transparent;
}

.ui-chart-heatmap-legend-item > .ui-chart-heatmap-legend-swatch {
  inline-size: var(--chart-heatmap-legend-swatch-size);
  border-radius: var(
    --chart-heatmap-cell-radius,
    calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
  );
}