.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-base);
  white-space: nowrap;
  color: var(--c-text-inverse);
  pointer-events: none;
}

.badge--new {
  background: var(--c-badge-new);
}

.badge--top {
  background: var(--c-badge-top);
}

.badge--discount {
  background: var(--c-badge-discount);
}