fix(components/tiles): remove ::ng-deep from tile styles

libs/components/tiles/src/lib/modules/tiles/tile-content/tile-content-section.component.scss

@@ -1,8 +1,32 @@
 @use 'libs/components/theme/src/lib/styles/mixins' as mixins;
 @use 'libs/components/theme/src/lib/styles/variables' as *;
 
+:host:not(:last-child) .sky-tile-content-section {
+  @include mixins.sky-border(light);
+}
+
+:host-context(.sky-theme-modern sky-tile-content) {
+  .sky-tile-content-section {
+    border-bottom: 1px dotted $sky-theme-modern-color-gray-30;
+  }
+
+  :host:first-child {
+    .sky-tile-content-section {
+      margin-top: $sky-space-lg;
+    }
+  }
+
+  :host:last-child {
+    .sky-tile-content-section {
+      padding-bottom: 0;
+      border-bottom: none;
+    }
+  }
+}
+
 @include mixins.sky-theme-modern {
   .sky-tile-content-section {
+    border-bottom: 1px dotted $sky-theme-modern-color-gray-30;
     padding: $sky-space-lg 0;
   }
 }

libs/components/tiles/src/lib/modules/tiles/tile-content/tile-content.component.ts

@@ -6,7 +6,6 @@ import { Component } from '@angular/core';
 @Component({
   standalone: true,
   selector: 'sky-tile-content',
-  styleUrls: ['./tile-content.component.scss'],
   templateUrl: 'tile-content.component.html',
 })
 export class SkyTileContentComponent {}

libs/components/tiles/src/lib/modules/tiles/tile-dashboard/tile-dashboard.component.scss

@@ -12,20 +12,9 @@
   .sky-tile-dashboard-layout-single {
     display: block;
   }
-
-  /* NOTE: This style is here as we only want it when inside a tile dashboard */
-  .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,
-  .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile {
-    margin-bottom: 0;
-  }
 }
 
 :host-context(.sky-tile-dashboard-gt-xs) {
-  .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,
-  .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile {
-    margin-bottom: $sky-margin-double;
-  }
-
   :host-context(.sky-theme-default) {
     padding-top: $sky-padding-double;
   }
@@ -53,12 +42,3 @@
 :host-context(.sky-theme-default) {
   background-color: $sky-background-color-neutral-light;
 }
-
-@include mixins.sky-theme-modern {
-  :host-context(.sky-tile-dashboard-gt-xs) {
-    .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,
-    .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile {
-      margin-bottom: $sky-theme-modern-space-xl;
-    }
-  }
-}

libs/components/tiles/src/lib/modules/tiles/tile/tile.component.scss

@@ -6,6 +6,28 @@
   margin-bottom: $sky-margin-double;
 }
 
+/* NOTE: This style is here as we only want it when inside a tile dashboard */
+:host-context(
+    .sky-tile-dashboard-layout-single,
+    .sky-tile-dashboard-layout-multi
+  )
+  .sky-tile {
+  margin-bottom: 0;
+}
+
+:host-context(.sky-tile-dashboard-gt-xs) {
+  :host-context(.sky-tile-dashboard-layout-single),
+  :host-context(.sky-tile-dashboard-layout-multi) {
+    .sky-tile {
+      margin-bottom: $sky-margin-double;
+    }
+  }
+
+  :host-context(.sky-theme-default) {
+    padding-top: $sky-padding-double;
+  }
+}
+
 .sky-tile-header {
   border-color: $sky-border-color-neutral-medium;
   border-style: solid solid none;
@@ -108,25 +130,6 @@
     font-size: 16px;
   }
 
-  .sky-tile-content {
-    ::ng-deep .sky-tile-content-section {
-      border-bottom: 1px dotted $sky-theme-modern-color-gray-30;
-    }
-
-    ::ng-deep sky-tile-content-section:first-child {
-      .sky-tile-content-section {
-        margin-top: $sky-space-lg;
-      }
-    }
-
-    ::ng-deep sky-tile-content-section:last-child {
-      .sky-tile-content-section {
-        padding-bottom: 0;
-        border-bottom: none;
-      }
-    }
-  }
-
   @include mixins.sky-host-responsive-container-xs-min() {
     .sky-tile {
       border-radius: 0px;
@@ -139,3 +142,12 @@
     }
   }
 }
+
+:host-context(.sky-theme-modern .sky-tile-dashboard-gt-xs) {
+  :host-context(.sky-tile-dashboard-layout-single),
+  :host-context(.sky-tile-dashboard-layout-multi) {
+    .sky-tile {
+      margin-bottom: $sky-theme-modern-space-xl;
+    }
+  }
+}