feat(atomic): update css to not change parent element css

packages/atomic/src/components/insight/atomic-insight-result-action-bar/atomic-insight-result-action-bar.pcss

@@ -18,7 +18,7 @@ atomic-insight-result-action-bar {
   }
 }
 
-.hovered {
+.showActionBar {
   @apply visible;
 }
 

packages/atomic/src/components/insight/atomic-insight-result/atomic-insight-result.pcss

@@ -7,19 +7,19 @@ atomic-result-section-children {
 }
 
 :host(.resultHovered) {
-  position: relative;
+  @apply relative;
 
   .with-sections {
     background-color: #f2f2f2;
   }
 }
 
-:host(.withActionBar) {
+:host {
   .with-sections {
-    padding: 1.5rem;
+    @apply p-6;
   }
 }
 
-:host(.withActionBar)::before {
-  margin: 0px 1.5rem !important;
+:host::before {
+  @apply my-0 mx-6 !important;
 }

packages/atomic/src/components/insight/atomic-insight-result/atomic-insight-result.tsx

@@ -24,7 +24,6 @@ import {AtomicInsightStore} from '../atomic-insight-interface/store';
 })
 export class AtomicInsightResult {
   private layout!: ResultLayout;
-  private resultActionBarElement?: HTMLElement | null;
   @Element() host!: HTMLElement;
 
   /**
@@ -125,14 +124,33 @@ export class AtomicInsightResult {
   }
 
   private handleMouseOver = () => {
-    this.resultActionBarElement?.classList.add('hovered');
+    this.resultActionBar?.classList.add('showActionBar');
     this.host.classList.add('resultHovered');
   };
 
   private handleMouseOut = () => {
-    this.resultActionBarElement?.classList.remove('hovered');
+    this.resultActionBar?.classList.remove('showActionBar');
     this.host.classList.remove('resultHovered');
   };
+
+  private get resultActionBar() {
+    return this.host.shadowRoot?.querySelector(
+      'atomic-insight-result-action-bar'
+    );
+  }
+
+  private get resultActions() {
+    return this.host.shadowRoot?.querySelectorAll(
+      'atomic-insight-result-action'
+    );
+  }
+
+  private get firstChildActionBar() {
+    return this.host.parentElement
+      ?.querySelectorAll('atomic-insight-result')[0]
+      .shadowRoot?.querySelector('atomic-insight-result-action-bar');
+  }
+
   public render() {
     return (
       <Host class={resultComponentClass}>
@@ -149,31 +167,19 @@ export class AtomicInsightResult {
   }
 
   public componentDidLoad() {
-    this.resultActionBarElement = this.host.shadowRoot?.querySelector(
-      'atomic-insight-result-action-bar'
-    );
-    const resultActionElement = this.host.shadowRoot?.querySelectorAll(
-      'atomic-insight-result-action'
-    );
     if (this.loadingFlag && this.store) {
       this.store.unsetLoadingFlag(this.loadingFlag);
     }
-    if (this.resultActionBarElement && resultActionElement?.length) {
-      this.host.parentElement!.style.padding = '0px';
-      this.host.parentElement
-        ?.querySelectorAll('atomic-insight-result')[0]
-        .shadowRoot?.querySelector('atomic-insight-result-action-bar')
-        ?.classList.add('firstActionBarElement');
-
-      this.host.classList.add('withActionBar');
+    if (this.resultActionBar && this.resultActions?.length) {
+      this.firstChildActionBar?.classList.add('firstActionBarElement');
       this.host.addEventListener('mouseover', this.handleMouseOver);
       this.host.addEventListener('mouseout', this.handleMouseOut);
     }
     applyFocusVisiblePolyfill(this.host);
   }
 
   public disconnectedCallback() {
-    if (this.resultActionBarElement) {
+    if (this.resultActionBar) {
       this.host.removeEventListener('mouseover', this.handleMouseOver);
       this.host.removeEventListener('mouseout', this.handleMouseOut);
     }

packages/atomic/src/components/insight/result-lists/atomic-insight-folded-result-list/atomic-insight-folded-result-list.pcss

@@ -2,5 +2,5 @@
 @import '../styles/list-display.pcss';
 
 .list-root {
-  padding: 1.5rem 1.5rem 0 1.5rem;
+  @apply p-0;
 }