.title {
  color: var(--color-text-ultra-light);
  font-weight: bold;
  font-size: var(--size-xsmall);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.titleText {
  max-width: 100%;
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.titleIcon {
  flex: 0 0 var(--space-small);
  margin-top: -3px !important;
  margin-bottom: -3px !important;
}

.title + .info {
  margin-top: var(--space-xxsmall);
}

.currentMetric {
  color: var(--color-heading);
  white-space: nowrap;
  font-weight: bold;
  line-height: var(--line-height-number);
  height: var(--line-height-number);
}

.delta {
  font-weight: bold;
}

.deltaValue + .deltaValue::before {
  margin-left: calc(var(--space-xxxsmall) / 2);
  margin-right: calc(var(--space-xxxsmall) / 2);
  content: '/';
  color: var(--color-text-ultra-light);
}

.baselineMetric {
  color: var(--color-text-ultra-light);
  font-size: var(--size-small);
  line-height: var(--line-height-number);
  height: var(--line-height-number);
}

/* Loading state */
.loading.currentMetric {
  min-width: 0;
  max-width: 8em;
}

.loading.baselineMetric {
  min-width: 0;
  max-width: 8em;
}

/* Hover state */
.titleHoverCardIcon span[aria-controls=''],
.titleTooltipIcon[aria-controls=''] {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-duration-out) ease-out,
    color var(--transition-duration-out) ease-out,
    visibility 0s;
}

.root:hover .titleHoverCardIcon span,
.root:hover .titleTooltipIcon {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--transition-duration-in) ease-in,
    color var(--transition-duration-in) ease-in,
    visibility 0s;
}

/* Size variation */
.currentMetric {
  font-size: var(--size-xxlarge);
}

.small .currentMetric {
  font-size: var(--size-medium);
}

.large .currentMetric {
  font-size: var(--size-xxxlarge);
}

.xlarge .currentMetric {
  font-size: var(--size-xxxxlarge);
}