From 716d1803155cb9d95ba1d0030af69892ec780fef Mon Sep 17 00:00:00 2001
From: Eugene <EOlonov@gmail.com>
Date: Tue, 15 Oct 2024 18:23:55 +0000
Subject: [PATCH] Fluent: fix classes clash between component and fluent
 packages

---
 .../component/src/decorator/private/BorderFlair.module.css  | 6 +++---
 .../component/src/decorator/private/BorderLoader.module.css | 6 +++---
 .../src/components/activity/ActivityDecorator.module.css    | 4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/component/src/decorator/private/BorderFlair.module.css b/packages/component/src/decorator/private/BorderFlair.module.css
index 40b9cc8a5f..f284f38c21 100644
--- a/packages/component/src/decorator/private/BorderFlair.module.css
+++ b/packages/component/src/decorator/private/BorderFlair.module.css
@@ -86,7 +86,7 @@
   }
 }
 
-:global(.webchat) .border-flair {
+:global(.webchat) .border-flair:global(.border-flair) {
   /* Configurable variables */
   --webchat-decorator-borderFlair-color1: var(--webchat-borderFlair-color1, var(--webchat__border-animation--color-1));
   --webchat-decorator-borderFlair-color2: var(--webchat-borderFlair-color2, var(--webchat__border-animation--color-2));
@@ -126,7 +126,7 @@
   position: absolute;
 }
 
-:global(.webchat) .border-flair--complete {
+:global(.webchat) .border-flair--complete:global(.border-flair--complete) {
   animation-play-state: paused;
 }
 
@@ -538,7 +538,7 @@
     }
   }
 
-  :global(.webchat) .border-flair {
+  :global(.webchat) .border-flair:global(.border-flair) {
     --webchat-decorator-borderFlair-animated-angle: calc(0.75 + 2 * var(--webchat-decorator-borderFlair-animated));
     --webchat-decorator-borderFlair-animated-color1: color-mix(
       in srgb,
diff --git a/packages/component/src/decorator/private/BorderLoader.module.css b/packages/component/src/decorator/private/BorderLoader.module.css
index 82b4f263c8..48c8f7faa5 100644
--- a/packages/component/src/decorator/private/BorderLoader.module.css
+++ b/packages/component/src/decorator/private/BorderLoader.module.css
@@ -10,11 +10,11 @@
   }
 }
 
-:global(.webchat) .border-loader {
+:global(.webchat) .border-loader:global(.border-loader) {
   border-radius: inherit;
 }
 
-:global(.webchat) .border-loader__track {
+:global(.webchat) .border-loader__track:global(.border-loader__track) {
   --webchat-decorator-borderLoader-borderSize: var(--webchat-borderLoader-borderSize, 4px);
 
   background-color: var(--webchat-colorNeutralBackground6, #e6e6e6);
@@ -23,7 +23,7 @@
   width: 100%;
 }
 
-:global(.webchat) .border-loader__loader {
+:global(.webchat) .border-loader__loader:global(.border-loader__loader) {
   --webchat-decorator-borderLoader-color1: var(--webchat-borderLoader-color1, var(--webchat__border-animation--color-1));
   --webchat-decorator-borderLoader-color2: var(--webchat-borderLoader-color2, var(--webchat__border-animation--color-2));
   --webchat-decorator-borderLoader-color3: var(--webchat-borderLoader-color3, var(--webchat__border-animation--color-3));
diff --git a/packages/fluent-theme/src/components/activity/ActivityDecorator.module.css b/packages/fluent-theme/src/components/activity/ActivityDecorator.module.css
index b856ce89b5..765b1f9e31 100644
--- a/packages/fluent-theme/src/components/activity/ActivityDecorator.module.css
+++ b/packages/fluent-theme/src/components/activity/ActivityDecorator.module.css
@@ -88,7 +88,7 @@
     margin-inline-start: 28px;
   }
 
-  :global(.border-loader) {
+  :global(.border-loader):global(.border-loader) {
     display: flex;
     flex-flow: column nowrap;
     gap: var(--webchat-spacingVerticalS);
@@ -96,7 +96,7 @@
     width: 500px;
   }
 
-  :global(.border-loader__track) {
+  :global(.border-loader__track):global(.border-loader__track) {
     border-radius: inherit;
     box-sizing: border-box;
     clip-path: border-box;