@annalib/anna-core 20.4.2 → 20.5.0

package/src/lib/anna-common-scss/_gt-table.scss

@@ -5,19 +5,18 @@
 
 @mixin sticky-left($leftOffset, $zIndex) {
     position: sticky;
-    left: $leftOffset; 
+    left: $leftOffset;
     z-index: $zIndex !important;
 }
 
-@mixin ellipsify(){
+@mixin ellipsify() {
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
 }
 
-@mixin table-container-scroll-bar($margin-left: 0, $margin-top: 0){
-    
-    .table-container{
+@mixin table-container-scroll-bar($margin-left: 0, $margin-top: 0) {
+    .table-container {
         &::-webkit-scrollbar-track {
             margin-top: $margin-top;
             margin-left: $margin-left;
@@ -25,33 +24,27 @@
     }
 }
 
-@mixin table-fixed-style($width: 100%){
-    
-    table{
+@mixin table-fixed-style($width: 100%) {
+    table {
         margin-bottom: 0;
         table-layout: fixed;
         width: $width;
     }
-    
 }
 
-
-
-@mixin table-header($sticky-left-map, $box-shadow-map, $bg-color: #ededed ){
-
+@mixin table-header($sticky-left-map, $box-shadow-map, $bg-color: #ededed) {
     $last-sticky-col: 0;
-    @if(list.length(map.keys($sticky-left-map)) > 0){
+    @if (list.length(map.keys($sticky-left-map)) > 0) {
         $last-sticky-col: list.nth(map.keys($sticky-left-map), -1);
     }
-        
-    .scroll-left-shadow-effect  .header-row th:nth-of-type(#{$last-sticky-col}) {
+
+    .scroll-left-shadow-effect .header-row th:nth-of-type(#{$last-sticky-col}) {
         border: none !important;
-        filter: drop-shadow(2px 0 2px $lightGray-4);
+        filter: drop-shadow(2px 0 0px $lightGray-4);
     }
 
-    .header-row{
-        
-        th{
+    .header-row {
+        th {
             background: $bg-color;
             padding: 2px 8px;
             line-height: normal;
@@ -78,7 +71,7 @@
                 align-items: center;
                 width: max-content;
             }
-        
+
             div.sort-filter-container {
                 display: flex;
                 flex-wrap: nowrap;
@@ -86,7 +79,7 @@
                 margin-left: $fs-4;
                 margin-right: auto;
             }
-        
+
             span.mdi-filter-variant {
                 font-size: 13px !important;
                 top: -1px !important;
@@ -101,84 +94,88 @@
         $left-right-box-shadow-color: map.get($box-shadow-map, "left-right-bs-color");
 
         @for $i from $box-shadow-start-index through $box-shadow-end-index {
-            
-            @if($i == $box-shadow-start-index){
-                th:nth-of-type(#{$i}){
-                    @if ($show-right-border-box-shadow){
-                        box-shadow: inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 1px 0 0 $top-bottom-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
-                    }
-                    @else{
-                        box-shadow: inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 1px 0 0 $top-bottom-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
+            @if ($i == $box-shadow-start-index) {
+                th:nth-of-type(#{$i}) {
+                    @if ($show-right-border-box-shadow) {
+                        box-shadow:
+                            inset 1px 0 0 0 $left-right-box-shadow-color,
+                            inset 0 1px 0 0 $top-bottom-box-shadow-color,
+                            inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
+                    } @else {
+                        box-shadow:
+                            inset 1px 0 0 0 $left-right-box-shadow-color,
+                            inset 0 1px 0 0 $top-bottom-box-shadow-color,
+                            inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
                     }
                 }
-            }
-            @else if($i == $box-shadow-end-index){
-                th:nth-of-type(#{$i}){
-                    @if ($show-right-border-box-shadow){
-                        box-shadow: inset -1px 0 0 0 $left-right-box-shadow-color, inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 1px 0 0 $top-bottom-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
-                    }
-                    @else {
-                        box-shadow: inset -1px 0 0 0 $left-right-box-shadow-color, inset 0 1px 0 0 $top-bottom-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
+            } @else if($i == $box-shadow-end-index) {
+                th:nth-of-type(#{$i}) {
+                    @if ($show-right-border-box-shadow) {
+                        box-shadow:
+                            inset -1px 0 0 0 $left-right-box-shadow-color,
+                            inset 1px 0 0 0 $left-right-box-shadow-color,
+                            inset 0 1px 0 0 $top-bottom-box-shadow-color,
+                            inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
+                    } @else {
+                        box-shadow:
+                            inset -1px 0 0 0 $left-right-box-shadow-color,
+                            inset 0 1px 0 0 $top-bottom-box-shadow-color,
+                            inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
                     }
                 }
-            }
-            @else {
-                th:nth-of-type(#{$i}){
-                    @if ($show-right-border-box-shadow){
-                        box-shadow: inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 1px 0 0 $top-bottom-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
-                    }
-                    @else{
-                        box-shadow: inset 0 1px 0 0 $top-bottom-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
+            } @else {
+                th:nth-of-type(#{$i}) {
+                    @if ($show-right-border-box-shadow) {
+                        box-shadow:
+                            inset 1px 0 0 0 $left-right-box-shadow-color,
+                            inset 0 1px 0 0 $top-bottom-box-shadow-color,
+                            inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
+                    } @else {
+                        box-shadow:
+                            inset 0 1px 0 0 $top-bottom-box-shadow-color,
+                            inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
                     }
                 }
             }
-            
         }
 
         @each $columnNumber, $sticky-prop in $sticky-left-map {
-            
             $left-offset: map.get($sticky-prop, "left");
             $z-index: map.get($sticky-prop, "z-index");
 
-            th:nth-of-type(#{$columnNumber}){
-                @include  sticky-left($left-offset, $z-index);
+            th:nth-of-type(#{$columnNumber}) {
+                @include sticky-left($left-offset, $z-index);
             }
         }
-
     }
 }
 
-
-@mixin total-row($sticky-top-left-map, $box-shadow-map, $bg-color: white){
-
+@mixin total-row($sticky-top-left-map, $box-shadow-map, $bg-color: white) {
     $sticky-top: map.get($sticky-top-left-map, "top");
     $sticky-left-map: map.get($sticky-top-left-map, "sticky-left");
     $last-sticky-col: 0;
-    
-    @if(list.length(map.keys($sticky-left-map)) > 0){
+
+    @if (list.length(map.keys($sticky-left-map)) > 0) {
         $last-sticky-col: list.nth(map.keys($sticky-left-map), -1);
     }
-    
+
     .scroll-left-shadow-effect:not(.no-data-table) .total-row td:nth-of-type(#{$last-sticky-col}) {
         filter: drop-shadow(2px 0 2px $lightGray-4);
     }
 
-
-    .total-row{
-
-    
-        td{
+    .total-row {
+        td {
             padding: 2px 8px;
             background: $bg-color;
             position: sticky;
             top: $sticky-top !important;
 
-            .upper-label{
+            .upper-label {
                 @include fonts(Roboto, 0.75rem, normal, 900, normal, normal, 0.3px);
                 color: $charcoal;
             }
 
-            .lower-label{
+            .lower-label {
                 @include fonts(Roboto, 0.75rem, normal, 900, normal, normal, 0.3px);
                 color: $darkGray;
             }
@@ -188,7 +185,6 @@
                 content: "";
                 margin-top: -3px;
             }
-
         }
 
         $box-shadow-start-index: map.get($box-shadow-map, "start-index");
@@ -200,59 +196,64 @@
         $right-box-shadow-color: map.get($box-shadow-map, "right-bs-color");
 
         @for $i from $box-shadow-start-index through $box-shadow-end-index {
-            
-            @if($i == $box-shadow-start-index){
-                td:nth-of-type(#{$i}){
-                    @if ($show-right-border-box-shadow){
-                        box-shadow: inset 1px 0 0 0 $top-box-shadow-color,inset 0 1px 0 0 $top-box-shadow-color, inset 0 -1px 0 0 $bottom-box-shadow-color !important;
-                    }
-                    @else{
-                        box-shadow: inset 1px 0 0 0 $top-box-shadow-color, inset 0 1px 0 0 $top-box-shadow-color, inset 0 -1px 0 0 $bottom-box-shadow-color !important;
+            @if ($i == $box-shadow-start-index) {
+                td:nth-of-type(#{$i}) {
+                    @if ($show-right-border-box-shadow) {
+                        box-shadow:
+                            inset 1px 0 0 0 $top-box-shadow-color,
+                            inset 0 1px 0 0 $top-box-shadow-color,
+                            inset 0 -1px 0 0 $bottom-box-shadow-color !important;
+                    } @else {
+                        box-shadow:
+                            inset 1px 0 0 0 $top-box-shadow-color,
+                            inset 0 1px 0 0 $top-box-shadow-color,
+                            inset 0 -1px 0 0 $bottom-box-shadow-color !important;
                     }
                 }
-            }
-            @else if($i == $box-shadow-end-index){
-                td:nth-of-type(#{$i}){
-                    @if ($show-right-border-box-shadow){
-                        box-shadow: inset -1px 0 0 0 $top-box-shadow-color, inset 1px 0 0 0 $left-box-shadow-color, inset 0 1px 0 0 $top-box-shadow-color, inset 0 -1px 0 0 $bottom-box-shadow-color !important;
-                    }
-                    @else {
-                        box-shadow: inset -1px 0 0 0 $top-box-shadow-color, inset 0 1px 0 0 $top-box-shadow-color, inset 0 -1px 0 0 $bottom-box-shadow-color !important;
+            } @else if($i == $box-shadow-end-index) {
+                td:nth-of-type(#{$i}) {
+                    @if ($show-right-border-box-shadow) {
+                        box-shadow:
+                            inset -1px 0 0 0 $top-box-shadow-color,
+                            inset 1px 0 0 0 $left-box-shadow-color,
+                            inset 0 1px 0 0 $top-box-shadow-color,
+                            inset 0 -1px 0 0 $bottom-box-shadow-color !important;
+                    } @else {
+                        box-shadow:
+                            inset -1px 0 0 0 $top-box-shadow-color,
+                            inset 0 1px 0 0 $top-box-shadow-color,
+                            inset 0 -1px 0 0 $bottom-box-shadow-color !important;
                     }
                 }
-            }
-            @else {
-                td:nth-of-type(#{$i}){
-                    @if ($show-right-border-box-shadow){
-                        box-shadow: inset 1px 0 0 0 $left-box-shadow-color, inset 0 1px 0 0 $top-box-shadow-color, inset 0 -1px 0 0 $bottom-box-shadow-color !important;
-                    }
-                    @else{
-                        box-shadow: inset 0 1px 0 0 $top-box-shadow-color, inset 0 -1px 0 0 $bottom-box-shadow-color !important;
+            } @else {
+                td:nth-of-type(#{$i}) {
+                    @if ($show-right-border-box-shadow) {
+                        box-shadow:
+                            inset 1px 0 0 0 $left-box-shadow-color,
+                            inset 0 1px 0 0 $top-box-shadow-color,
+                            inset 0 -1px 0 0 $bottom-box-shadow-color !important;
+                    } @else {
+                        box-shadow:
+                            inset 0 1px 0 0 $top-box-shadow-color,
+                            inset 0 -1px 0 0 $bottom-box-shadow-color !important;
                     }
                 }
             }
-            
         }
 
-
         @each $columnNumber, $sticky-prop in $sticky-left-map {
-            
             $left-offset: map.get($sticky-prop, "left");
             $z-index: map.get($sticky-prop, "z-index");
 
-            td:nth-of-type(#{$columnNumber}){
-                @include  sticky-left($left-offset, $z-index);
+            td:nth-of-type(#{$columnNumber}) {
+                @include sticky-left($left-offset, $z-index);
             }
         }
-
-
     }
 }
 
-
-@mixin table-data($sticky-left-map, $box-shadow-map, $bg-color: white){
-
-    td{
+@mixin table-data($sticky-left-map, $box-shadow-map, $bg-color: white) {
+    td {
         cursor: pointer;
         background: $bg-color;
         box-shadow: none !important;
@@ -262,7 +263,7 @@
             @include ellipsify();
             @include fonts(Roboto, 0.75rem, normal, normal, normal, normal, 0px);
         }
-  
+
         div:nth-child(2) {
             color: #a7a7a7;
             @include ellipsify();
@@ -277,61 +278,62 @@
     $left-right-box-shadow-color: map.get($box-shadow-map, "left-right-bs-color");
 
     @for $i from $box-shadow-start-index through $box-shadow-end-index {
-        
-        @if($i == $box-shadow-start-index){
-            td:nth-of-type(#{$i}){
-                @if ($show-right-border-box-shadow){
-                    box-shadow: inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
-                }
-                @else{
-                    box-shadow: inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
+        @if ($i == $box-shadow-start-index) {
+            td:nth-of-type(#{$i}) {
+                @if ($show-right-border-box-shadow) {
+                    box-shadow:
+                        inset 1px 0 0 0 $left-right-box-shadow-color,
+                        inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
+                } @else {
+                    box-shadow:
+                        inset 1px 0 0 0 $left-right-box-shadow-color,
+                        inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
                 }
             }
-        }
-        @else if($i == $box-shadow-end-index){
-            td:nth-of-type(#{$i}){
-                @if ($show-right-border-box-shadow){
-                    box-shadow: inset 1px 0 0 0 $left-right-box-shadow-color, inset -1px 0 0 0 $left-right-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
-                }
-                @else {
-                    box-shadow: inset -1px 0 0 0 $left-right-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
+        } @else if($i == $box-shadow-end-index) {
+            td:nth-of-type(#{$i}) {
+                @if ($show-right-border-box-shadow) {
+                    box-shadow:
+                        inset 1px 0 0 0 $left-right-box-shadow-color,
+                        inset -1px 0 0 0 $left-right-box-shadow-color,
+                        inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
+                } @else {
+                    box-shadow:
+                        inset -1px 0 0 0 $left-right-box-shadow-color,
+                        inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
                 }
             }
-        }
-        @else {
-            td:nth-of-type(#{$i}){
-                @if ($show-right-border-box-shadow){
-                    box-shadow: inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
-                }
-                @else{
+        } @else {
+            td:nth-of-type(#{$i}) {
+                @if ($show-right-border-box-shadow) {
+                    box-shadow:
+                        inset 1px 0 0 0 $left-right-box-shadow-color,
+                        inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
+                } @else {
                     box-shadow: inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
                 }
             }
         }
-        
     }
 
     @each $columnNumber, $sticky-prop in $sticky-left-map {
-        
         $left-offset: map.get($sticky-prop, "left");
         $z-index: map.get($sticky-prop, "z-index");
 
-        td:nth-of-type(#{$columnNumber}){
-            @include  sticky-left($left-offset, $z-index);
+        td:nth-of-type(#{$columnNumber}) {
+            @include sticky-left($left-offset, $z-index);
         }
     }
-
 }
 
-@mixin table-data-shadow($columnNumber){
-    .scroll-left-shadow-effect:not(.no-data-table)  td:nth-of-type(#{$columnNumber}) {
-      filter: drop-shadow(2px 0 1px $lightGray-4);
+@mixin table-data-shadow($columnNumber) {
+    .scroll-left-shadow-effect:not(.no-data-table) td:nth-of-type(#{$columnNumber}) {
+        filter: drop-shadow(2px 0 1px $lightGray-4);
     }
 }
 
-@mixin no-data-table($table-container-height, $box-shadow-map, $row-height-map: ()){
-    
-    .table-container.no-data-table > div{
+@mixin no-data-table($table-container-height, $box-shadow-map, $row-height-map: ()) {
+    .table-container.no-data-table > div {
         height: $table-container-height !important;
     }
 
@@ -339,90 +341,80 @@
     $box-shadow-end-index: map.get($box-shadow-map, "box-shadow-end-index");
     $box-shadow-color: map.get($box-shadow-map, "box-shadow-color");
 
-    tbody{
-        
-        @if(map.has-key($row-height-map,"row-height")){
-            tr.no-border-tr{
-                height: map.get($row-height-map,"row-height") !important;
+    tbody {
+        @if (map.has-key($row-height-map, "row-height")) {
+            tr.no-border-tr {
+                height: map.get($row-height-map, "row-height") !important;
             }
         }
 
-        tr.no-border-tr:first-of-type{
+        tr.no-border-tr:first-of-type {
             @for $i from $box-shadow-start-index through $box-shadow-end-index {
-                td:nth-of-type(#{$i}){
-                    @if ($i == $box-shadow-start-index){
+                td:nth-of-type(#{$i}) {
+                    @if ($i == $box-shadow-start-index) {
                         box-shadow: inset 1px 0 0 0 $box-shadow-color !important;
-                    } 
-                    @else if( $i == $box-shadow-end-index){
+                    } @else if($i == $box-shadow-end-index) {
                         box-shadow: inset -1px 0 0 0 $box-shadow-color !important;
-                    }
-                    @else{
+                    } @else {
                         box-shadow: none !important;
                     }
                 }
             }
         }
-    
-        tr.no-border-tr:last-of-type{
+
+        tr.no-border-tr:last-of-type {
             @for $i from $box-shadow-start-index through $box-shadow-end-index {
-                td:nth-of-type(#{$i}){
-                    @if ($i == $box-shadow-start-index){
+                td:nth-of-type(#{$i}) {
+                    @if ($i == $box-shadow-start-index) {
                         box-shadow: inset 1px -1px 0 0 $box-shadow-color !important;
-                    } 
-                    @else if( $i == $box-shadow-end-index){
+                    } @else if($i == $box-shadow-end-index) {
                         box-shadow: inset -1px -1px 0 0 $box-shadow-color !important;
-                    }
-                    @else{
+                    } @else {
                         box-shadow: inset 0 -1px 0 0 $box-shadow-color !important;
                     }
                 }
             }
         }
     }
-} 
+}
 
-@mixin table-bottom-border($box-shadow-map){
-    
+@mixin table-bottom-border($box-shadow-map) {
     $box-shadow-start-index: map.get($box-shadow-map, "start-index");
     $box-shadow-end-index: map.get($box-shadow-map, "end-index");
     $show-right-border-box-shadow: map.get($box-shadow-map, "show-right-border-box-shadow");
     $top-bottom-box-shadow-color: map.get($box-shadow-map, "top-bottom-bs-color");
     $left-right-box-shadow-color: map.get($box-shadow-map, "left-right-bs-color");
 
-    .bottom-border{
+    .bottom-border {
         border-bottom: 1px solid $top-bottom-box-shadow-color;
     }
 
-    .bottom-border tbody{
-        tr:last-of-type{
+    .bottom-border tbody {
+        tr:last-of-type {
             @for $i from $box-shadow-start-index through $box-shadow-end-index {
-            
-                @if($i == $box-shadow-start-index){
-                    td:nth-of-type(#{$i}){
-                        @if ($show-right-border-box-shadow){
+                @if ($i == $box-shadow-start-index) {
+                    td:nth-of-type(#{$i}) {
+                        @if ($show-right-border-box-shadow) {
                             box-shadow: inset 1px 0 0 0 $left-right-box-shadow-color !important;
-                        }
-                        @else{
+                        } @else {
                             box-shadow: inset 1px 0 0 0 $left-right-box-shadow-color !important;
                         }
                     }
-                }
-                @else if($i == $box-shadow-end-index){
-                    td:nth-of-type(#{$i}){
-                        @if($show-right-border-box-shadow){
-                            box-shadow: inset 1px 0 0 0 $left-right-box-shadow-color, inset -1px 0 0 0 $left-right-box-shadow-color !important;
-                        }
-                        @else{
+                } @else if($i == $box-shadow-end-index) {
+                    td:nth-of-type(#{$i}) {
+                        @if ($show-right-border-box-shadow) {
+                            box-shadow:
+                                inset 1px 0 0 0 $left-right-box-shadow-color,
+                                inset -1px 0 0 0 $left-right-box-shadow-color !important;
+                        } @else {
                             box-shadow: inset -1px 0 0 0 $left-right-box-shadow-color !important;
                         }
                     }
-                }
-                @else {
-                    td:nth-of-type(#{$i}){
-                        @if ($show-right-border-box-shadow){
+                } @else {
+                    td:nth-of-type(#{$i}) {
+                        @if ($show-right-border-box-shadow) {
                             box-shadow: inset 1px 0 0 0 $top-bottom-box-shadow-color !important;
-                        }
-                        @else{
+                        } @else {
                             box-shadow: none !important;
                         }
                     }
@@ -430,5 +422,4 @@
             }
         }
     }
-    
-}
+}

package/src/lib/anna-common-scss/_icons.scss

@@ -0,0 +1,3 @@
+::ng-deep.anna-automation-activated-icon.mdi.mdi-cog-refresh {
+    color: #8bac2a;
+}

package/src/lib/anna-common-scss/_legend.scss

@@ -3,9 +3,9 @@ $dot-height: 0.625rem;
 $dot-radius: 50%;
 
 @mixin dot($color) {
-  display: inline-block;
-  border-radius: $dot-radius;
-  height: $dot-height;
-  width: $dot-width;
-  background-color: $color;
+    display: inline-block;
+    border-radius: $dot-radius;
+    height: $dot-height;
+    width: $dot-width;
+    background-color: $color;
 }

package/src/lib/anna-common-scss/_mat-button-toggle.scss

@@ -10,8 +10,8 @@
     background-color: $primary-color;
     color: white !important;
 }
-  
-  :host ::ng-deep .mat-button-toggle-group-appearance-standard {
+
+:host ::ng-deep .mat-button-toggle-group-appearance-standard {
     border-radius: 0px;
     border: none !important;
 }
@@ -24,15 +24,15 @@
         opacity: 1;
     }
 }
-  
+
 ::ng-deep .mat-button-toggle-appearance-standard {
-opacity: 0.5;
-border: solid 1px #b3b3b3;
-button {
-    opacity: 1;
-}
+    opacity: 0.5;
+    border: solid 1px #b3b3b3;
+    button {
+        opacity: 1;
+    }
 }
-  
+
 ::ng-deep .mat-button-toggle-appearance-standard.mat-button-toggle-checked {
-opacity: 1;
-}
+    opacity: 1;
+}

package/src/lib/anna-common-scss/_mat-menu.scss

@@ -1,17 +1,17 @@
 @mixin mat-menu-styling() {
-  &.mat-elevation-z8 {
-    box-shadow: var(--dropdown-box-shadow);
-  }
-  
-  button.mat-mdc-menu-item:hover {
-    background-color: var(--dropdown-hover-color);
-  }
+    &.mat-elevation-z8 {
+        box-shadow: var(--dropdown-box-shadow);
+    }
 
-  & .mat-mdc-menu-content.mdc-list {
-    background-color: var(--body-color);
-  }
+    button.mat-mdc-menu-item:hover {
+        background-color: var(--dropdown-hover-color);
+    }
 
-  & .mat-mdc-menu-content {
-    padding: 0;
-  }
-}
+    & .mat-mdc-menu-content.mdc-list {
+        background-color: var(--body-color);
+    }
+
+    & .mat-mdc-menu-content {
+        padding: 0;
+    }
+}