umami/src/components/metrics/MetricCard.module.css

.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 90px;
  min-width: 140px;
}

.value {
  display: flex;
  align-items: center;
  font-size: 36px;
  font-weight: 700;
  white-space: nowrap;
  min-height: 60px;
}

.label {
  display: flex;
  align-items: center;
  font-weight: 700;
  gap: 10px;
  white-space: nowrap;
  min-height: 30px;
}

.change {
  font-size: 12px;
  padding: 0 5px;
  border-radius: 5px;
  color: var(--base500);
}

.change.positive {
  color: var(--green700);
  background: var(--green100);
}

.change.negative {
  color: var(--red700);
  background: var(--red100);
}

.change.plusSign::before {
  content: '+';
}