.root {
  color: var(--color-gray-ultra-light);
  font-family: var(--font-family-fixed);
  white-space: nowrap;
}

.CHANGE {
  color: var(--color-info);
}

.HIGH_NEGATIVE {
  color: var(--color-red-dark);
}

.NEGATIVE {
  color: var(--color-red-dark);
}

.LOW_NEGATIVE {
  color: var(--color-red-light);
}

.LOW_POSITIVE {
  color: var(--color-green-light);
}

.POSITIVE {
  color: var(--color-green-dark);
}

.HIGH_POSITIVE {
  color: var(--color-green-dark);
}

.inverted {
  padding: 0 2px;
  border-radius: var(--radius-xsmall);
  background-color: var(--color-gray-ultra-light);
  color: var(--color-light);
}

.inverted.CHANGE {
  background: var(--color-info-light);
}

.inverted.HIGH_NEGATIVE {
  background: var(--color-red-dark);
}

.inverted.NEGATIVE {
  background: var(--color-red-dark);
}

.inverted.LOW_NEGATIVE {
  background: var(--color-red-light);
}

.inverted.LOW_POSITIVE {
  background: var(--color-green-light);
}

.inverted.POSITIVE {
  background: var(--color-green-dark);
}

.inverted.HIGH_POSITIVE {
  background: var(--color-green-dark);
}