.badge {
  background: var(--color-mint);
  border-radius: 2.3em;
  color: var(--color-black);
  display: inline-flex;
  font-size: var(--font-size);
  white-space: nowrap;
}

.badge span {
  display: flex;
  font-size: var(--font-size-xxx-small);
  font-weight: 500;
  letter-spacing: -0.0125em;
  line-height: 1em;
  margin-bottom: -0.175em;
  margin-top: -0.05em;
  padding: 0.6em 0.9em;
  white-space: nowrap;
}

.badge--small {
  border-radius: 2em;
}

.badge--small span {
  font-size: var(--font-size-xxxx-small);
  padding: 0.55em 0.85em;
}

.badge--color-blurple {
  background: var(--color-blurple);
  color: var(--color-white);
}

.badge--color-sunset {
  background: linear-gradient(
    135deg,
    var(--color-blurple) 0,
    var(--color-salmon) 100%
  );
  color: var(--color-white);
}

.badge--hey-for-domains {
  background: var(--color-hey-for-domains);
  color: var(--color-white);
}

.badge--hey-for-you {
  background: var(--color-hey-for-you);
  color: var(--color-black);
}