sup:has(> span) {
  --badge-bg: var(--color-neutral-300);
  --badge-color: currentColor;
  --badge-radius: 0.5rem;
  --badge-padding: 0.3rem;
  --badge-vertical-align: 0.5rem;
  --badge-fs: var(--fs-1);
  background-color: var(--badge-bg);
  color: var(--badge-color);
  padding: var(--badge-padding);
  border-radius: var(--badge-radius);
  vertical-align: var(--badge-vertical-align);
  font-size: var(--badge-fs);
  span {
    color: inherit;
  }
  &[data-badge~="rounded"] {
    --badge-radius: 50%;
    --badge-padding: 0;
    --badge-size: 1.5625rem;
    width: var(--badge-size);
    height: var(--badge-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 0.6875rem;
    font-weight: 700;
    overflow: hidden;
    box-sizing: border-box;
    span {
      max-width: 100%;
      overflow: hidden;
      text-overflow: clip;
      white-space: nowrap;
      padding: 0 0.125rem;
    }
  }
}