How can i make the ::ng-deep work only for one component

<igx-dialog igxOverlayOutlet #variantDialog class="variant-dialog">
<div class="dialog-content">
<div class="variant-options">
<div class="variant-card">
<img src="assets/images/variants/color_variant.png" alt="Color Variant" class="variant-image">
<p class="variant-text">COLOR VARIANT</p>
</div>
<div class="variant-card">
<img src="assets/images/variants/style_variant.png" alt="Style Variant" class="variant-image">
<p class="variant-text">STYLE VARIANT</p>
</div>
</div>
</div>
</igx-dialog>


SASS FIle

.dialog-content
display: flex
justify-content: center
align-items: center
width: 55vw
height: 55vh

.variant-options
display: flex
gap: 1rem

.variant-card
text-align: center
padding: 1rem
width: 100%
height: 100%
position: relative
background-color: transparent

.variant-image
max-width: 600px
max-height: 600px
border-radius: 15px

.variant-text
font-size: 4rem
line-height: normal
font-weight: bold
position: absolute
top: 30%
left: 5%
color: #3A3A3A

::ng-deep .variant-dialog .igx-dialog__window
background: transparent ! important
box-shadow: none ! important


::ng-deep .variant-dialog .igx-dialog__window doesn't affect the css at all, but ::ng-deep .igx-dialog__window affects it. Also tried with :host and that didn't solve the problem.

So the question here is how can i encapsulate it without affecting other igx-dialogs.

Continue reading...