/* ChartBar Atom */
/* Simple bar chart visualization */

.chart-bar-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.chart-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.chart-bar-label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  white-space: nowrap;
  min-width: var(--space-15);
}

.chart-bar-track {
  flex: 1;
  height: var(--space-2);
  background: var(--bg-muted);
  border-radius: var(--border-radius-full);
  overflow: hidden;
}

.chart-bar-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--border-radius-full);
  transition: width var(--duration-300) var(--easing-out);
}

.chart-bar-value {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  min-width: var(--space-10);
  text-align: right;
}

/* Variants */
.chart-bar-fill-success { background: var(--color-success); }
.chart-bar-fill-warning { background: var(--color-warning); }
.chart-bar-fill-error { background: var(--color-error); }
.chart-bar-fill-info { background: var(--color-info); }

/* Sizes */
.chart-bar-sm .chart-bar-track {
  height: var(--space-1);
}

.chart-bar-lg .chart-bar-track {
  height: var(--space-3);
}

/* Vertical variant */
.chart-bar-vertical {
  flex-direction: column-reverse;
  align-items: center;
  height: var(--space-24);
}

.chart-bar-vertical .chart-bar-track {
  width: var(--space-4);
  height: 100%;
  flex: none;
}

.chart-bar-vertical .chart-bar-fill {
  width: 100%;
  height: var(--chart-bar-percent, 0%);
  border-radius: var(--border-radius-full) var(--border-radius-full) 0 0;
}

/* Chart container */
.chart-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.chart-bars-horizontal {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  height: var(--space-24);
}