UI: Refactoring css

ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.scss

@@ -16,8 +16,6 @@
 @import "../../../../../../../scss/constants";
 
 :host {
-  --mdc-linear-progress-track-height: 8px;
-  --mdc-linear-progress-active-indicator-height: 8px;
   .tb-card-header {
     display: flex;
     flex-direction: row;
@@ -46,10 +44,18 @@
   }
 
   .tb-usage-items-progress {
+    --mdc-linear-progress-track-height: 8px;
+    --mdc-linear-progress-active-indicator-height: 8px;
     width: 34px;
     @media #{$mat-md} {
       display: none;
     }
+    .mat-mdc-progress-bar {
+      &.critical {
+        --mdc-linear-progress-track-color: rgba(209, 39, 48, 0.06);
+        --mdc-linear-progress-active-indicator-color: #D12730;
+      }
+    }
     .mdc-linear-progress {
       margin-top: 6px;
       margin-bottom: 6px;
@@ -94,18 +100,3 @@
     color: rgba(0, 0, 0, 0.76);
   }
 }
-
-:host ::ng-deep {
-  .tb-usage-items-progress {
-    .mat-mdc-progress-bar {
-      &.critical {
-        .mdc-linear-progress__buffer-bar {
-          background: rgba(209, 39, 48, 0.06);
-        }
-        .mdc-linear-progress__bar-inner {
-          border-top-color: #D12730;
-        }
-      }
-    }
-  }
-}