:host { display: inline-block; }
.hb-badge { position: relative; display: inline-block; }
.hb-badge__content {
  position: absolute; top: 0; right: 0;
  transform: translate(50%, -50%);
  background-color: var(--hb-color-danger);
  color: #fff;
  font-size: 12px; line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  white-space: nowrap;
}
.hb-badge__content--dot { width: 8px; height: 8px; padding: 0; border-radius: 50%; }
.hb-badge__content--primary { background-color: var(--hb-color-primary); }
.hb-badge__content--success { background-color: var(--hb-color-success); }
.hb-badge__content--warning { background-color: var(--hb-color-warning); }
.hb-badge__content--info    { background-color: var(--hb-color-info); }
