.badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: bold;
  padding: 3px var(--block-space-half);
  text-align: center;
}

.badge.uppercase {
  font-size: 0.6rem;
}

.badge--default {
  background: var(--color-secondary-light);
  outline: 1px solid var(--color-border);
  outline-offset: 1px;
  color: var(--color-secondary);
}

.badge--purple {
  background: var(--color-primary-light);
  outline: 1px solid var(--color-border);
  outline-offset: 1px;
  color: var(--color-primary);
}

.badge--pill {
  border-radius: 15px;
}