/* TrendIndicator Atom */
/* Direction and change indicators for KPIs */

.trend-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  padding: var(--border-width-2) var(--space-2);
  border-radius: var(--border-radius-sm);
}

.trend-arrow {
  font-size: var(--text-sm);
  line-height: 1;
}

.trend-value {
  white-space: nowrap;
}

/* Directions */
.trend-up {
  color: var(--color-success);
  background: var(--color-success-light);
}

.trend-down {
  color: var(--color-error);
  background: var(--color-error-light);
}

.trend-neutral {
  color: var(--text-muted);
  background: var(--bg-muted);
}

/* Inverted (when down is good) */
.trend-up.trend-inverted {
  color: var(--color-error);
  background: var(--color-error-light);
}

.trend-down.trend-inverted {
  color: var(--color-success);
  background: var(--color-success-light);
}

/* Sizes */
.trend-indicator-sm {
  font-size: var(--text-xs);
  padding: var(--space-px) var(--space-1);
}

.trend-indicator-sm .trend-arrow {
  font-size: var(--text-xs);
}

.trend-indicator-lg {
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-2);
}

.trend-indicator-lg .trend-arrow {
  font-size: var(--text-base);
}

/* Minimal variant (no background) */
.trend-indicator-minimal {
  background: transparent;
  padding: 0;
}