.pill {
  border-radius: 5rem;
  display: inline-flex;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: var(--spacing-half) var(--spacing);
  color: var(--c-heading-secondary);
}

.pill span {
  font-size: var(--text-medium);
  display: inline-block;
  vertical-align: middle;
}

.pill--white {
  color: var(--c-heading-secondary);
  background-color: var(--c-primary-light);
}

.pill--dark {
  color: var(--c-primary-light);
  background-color: var(--c-primary-dark);
}

.pill--tertiary {
  color: var(--c-body-primary);
  background-color: var(--c-primary-light);
}