Theming in SCSS design system

I am working on design system in SCSS and struggling to setup themes. I have so far achieved a lot with help of one answer on this platform but need some further assistance.

I have created a mixin for theme based on this answer which is using this article

@mixin theme($category, $token, $property, $state: false) {
  @each $theme-name, $theme-map in $themes {
    $value: getthemevalue($category, $token, $theme-name);

    @at-root .#{$theme-name} #{&} {
      #{$property}: #{map-get($color-tokens, $value)};
    }
  }
}

Now, this is working so great for a lot of cases just one case is still not being handled.

.header {
    h2, label {
       @include mixin(...)
    }
}

the compiled css generated is

.light-mode .header h2, .header label {color: ...}

What I want is

.light-mode .header h2, .light-mode .header label {color: ...)

for all the selectors, it should make the theme as parent But this is not being done.

I have found a solution to this. Instead of add & in braces block, it needs to be added without it then it works as expected.

@mixin theme($category, $token, $property, $state: false) {
  @each $theme-name, $theme-map in $themes {
    $value: getthemevalue($category, $token, $theme-name);

    @at-root {
      .#{$theme-name} & {
        #{$property}: #{map-get($color-tokens, $value)};
      }
    }
  }
}