Nuxt CSS properties declared on :root selector are not found

I have a Nuxt 2 app and I'd like to create a component with a <style> tag like the following, using CSS properties for styling.

The goal is to define a default CSS property in the component that can be overridden from outside.

However, when I try this method, the default values don't seem to work at all.

<style lang="scss" scoped>
:root {
  --default-badge-color: linear-gradient(90deg, #1717ff 0%, #bc29e0 92%);
  --default-badge-text-color: #fff;
  --default-badge-font-size: 1.6rem;
  --default-badge-padding: 0.6rem 1rem;
  --default-badge-border-radius: 16px;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--badge-padding, var(--default-badge-padding));
  border-radius: var(--badge-border-radius, var(--default-badge-border-radius));
  background: var(--badge-color, var(--default-badge-color));
  color: var(--badge-text-color, var(--default-badge-text-color));
  font-size: var(--badge-font-size, var(--default-badge-font-size));
  text-align: center;
}
</style>

Do I have the wrong approach for the syntax?

EDIT: I corrected to padding: var(--badge-padding, var(--default-badge-padding)). But the CSS properties are still not found except I define them inside .badge.