fix(tile-manager): tile styles when dragging

Author: SisIvanova

src/components/tile-manager/themes/shared/tile/tile.common.scss

@@ -26,11 +26,6 @@ $theme: $material;
     }
 }
 
-[part~='dragging'] {
-    opacity: .6;
-    box-shadow: var-get($theme, 'drag-elevation');
-}
-
 [part~='base'][part~='resizing']{
     opacity: .3;
 
@@ -51,3 +46,18 @@ $theme: $material;
     border: rem(1px) solid var-get($theme, 'ghost-border');
     background: var-get($theme, 'overlay-background');
 }
+
+[part~='drag-over'] {
+    &::after {
+        content: '';
+        position: absolute;
+        pointer-events: none;
+        border-radius: inherit;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 1000;
+        border: rem(1px) solid var-get($theme, 'ghost-border');
+        background: var-get($theme, 'overlay-background');
+    }
+}

src/components/tile-manager/themes/tile.base.scss

@@ -67,12 +67,5 @@
     width: 100%;
     height: 100%;
     transform: scale(0);
-
-    // transition: transform 0.5s ease-in-out;
     z-index: 10;
 }
-
-[part~='drag-over'] {
-    opacity: 0.5;
-    pointer-events: none;
-}

src/components/tile-manager/tile.ts

@@ -101,6 +101,8 @@ export default class IgcTileComponent extends EventEmitterMixin<
     minWidth?: number;
     minHeight?: number;
     background?: string;
+    tileBackground?: string;
+    tileBorder?: string;
     border?: string;
     borderRadius?: string;
     rowHeights?: number[];
@@ -317,6 +319,7 @@ export default class IgcTileComponent extends EventEmitterMixin<
     const offsetX = e.clientX - rect.left;
     const offsetY = e.clientY - rect.top;
     const compStyles = getComputedStyle(this);
+    this.cacheStyles();
 
     this._dragImage = this.cloneNode(true) as HTMLElement;
     Object.assign(this._dragImage.style, {
@@ -325,6 +328,10 @@ export default class IgcTileComponent extends EventEmitterMixin<
       position: 'absolute',
       top: '-99999px',
       left: '-99999px',
+      background: this._cachedStyles.tileBackground,
+      border: `1px solid ${this._cachedStyles.tileBorder}`,
+      borderRadius: this._cachedStyles.borderRadius,
+      overflow: 'hidden',
     });
 
     document.body.append(this._dragImage);
@@ -448,6 +455,8 @@ export default class IgcTileComponent extends EventEmitterMixin<
         computedStyle.getPropertyValue('--ig-column-count')
       ),
       background: computedStyle.getPropertyValue('--placeholder-background'),
+      tileBackground: computedStyle.getPropertyValue('--tile-background'),
+      tileBorder: computedStyle.getPropertyValue('--hover-border-color'),
       border: computedStyle.getPropertyValue('--ghost-border'),
       borderRadius: computedStyle.getPropertyValue('--border-radius'),
       minWidth: Number.parseFloat(