SASS Scoping Issue on a wordpress theme called Flynt

Question

I have an issue with scoping and I can not understand why. I am using the Flynt wordpress theme with components . I am trying to build a component with scoping but it doesn't work (I have seen other scoped components working just fine) , here is how my SASS(CSS) works:

.flynt-component[name='BackgroundImagesStackable'] {
  position: relative; 
}
  .background-images-stackable {
    position: relative;
  }

  .background-image {
      position: relative;
    z-index: 1;
  }

  .stacked-image {
    inline-size: 50%;
    inset-block-start: 50%; 
    inset-inline-start: 50%; 
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 2;
  }

But it doesnt work when i try to scope the elements:

.flynt-component[name='BackgroundImagesStackable'] {
  position: relative; 

  .background-images-stackable {
    position: relative;
  }

  .background-image {
      position: relative;
    z-index: 1;
  }

  .stacked-image {
    inline-size: 50%;
    inset-block-start: 50%; 
    inset-inline-start: 50%; 
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 2;
  }
  
  
  .flynt-component[name='BackgroundImagesStackable']::after {
    background-color: #ffc0cb;
    block-size: 100%;
    content: "Test"; /* Adjust content as needed */
    inline-size: 100%;
    inset-block-start: 0;
    inset-inline-start: 0;
    position: absolute;
    z-index: 0; /* Lower than both images */
  }

}

I tried several solutions to scoping and none of them gave me any hints on solving the problem

Answer 1

It looks like there’s one incorrect nested selector:

.flynt-component[name='BackgroundImagesStackable']::after

This should be written as &::after.

Other than that, everything looks good!

Could you share your component markup to investigate this further?