.spr-badge--primary {
  --badge-background-color: var(--color-secondary);
  --badge-text-color: var(--color-black);
  --badge-border-color: var(--color-secondary);
}

.spr-badge--secondary {
  --badge-background-color: #0069f6;
  --badge-text-color: #fff;
  --badge-border-color: var(--badge-background-color);
}

.spr-badge--secondary-outline {
  --badge-background-color: transparent;
  --badge-border-color: var(--badge-text-color);
}

.spr-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  transition: all 0.2s ease;
  color: var(--badge-text-color);
  border: 1px solid var(--badge-border-color);
  border-radius: var(--badge-border-radius);
  background-color: var(--badge-background-color);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  line-height: var(--badge-line-height);
  padding-block: 0.1875rem;
  padding-inline: var(--badge-padding-inline);

  /* TODO: overrides */
  .spr-icon--16 {
    @media (max-width: 767px) {
      width: 0.75rem;
      height: 0.75rem;
    }
  }

  .spr-player:hover & {
    --badge-background-color: var(--color-white);
    --badge-border-color: var(--color-white);
  }
}

.spr-badge--before,
.spr-badge--after {
  gap: var(--badge-icon-gap);
}