.pill {
  align-items: center;
  border-radius: var(--radius-xl);
  padding: 0 0.75rem;
  font-size: 0.875rem;
  font-weight: bold;
  display: inline-flex;
  height: 2rem;
  text-align: center;
}
.pill--red {
  background-color: var(--color-red);
  color: var(--color-white);
}
.pill--green {
  background-color: var(--color-green);
  color: var(--color-white);
}
.pill--grey {
  background-color: var(--color-grey);
}
.pill--blue {
  background-color: var(--color-blue);
  color: var(--color-white);
}
.pill--yellow {
  background-color: var(--color-yellow);
  color: var(--color-black);
}