@annalib/anna-core 25.4.20 → 25.4.21

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

@@ -32,90 +32,6 @@
     }
 }
 
-@mixin table-header-style($bg-color) {
-    background: $bg-color;
-    padding: 2px 8px;
-    line-height: normal;
-    position: sticky;
-    position: -webkit-sticky;
-    top: 0;
-
-    .upper-label {
-        @include fonts(Roboto, var(--table-header-fs), normal, 700, normal, normal, 0.3px);
-        color: $charcoal;
-        margin-bottom: 0;
-    }
-
-    .lower-label {
-        @include fonts(Roboto, var(--table-header-fs), normal, 700, normal, normal, 0.3px);
-        color: $darkGray;
-        margin-bottom: 0;
-    }
-
-    div.row {
-        display: flex;
-        flex-wrap: nowrap;
-        justify-content: space-between;
-        align-items: center;
-        width: max-content;
-    }
-
-    div.sort-filter-container {
-        display: flex;
-        flex-wrap: nowrap;
-        align-items: center;
-        margin-left: $fs-4;
-        margin-right: auto;
-    }
-
-    span.mdi-filter-variant {
-        font-size: 13px !important;
-        top: -1px !important;
-        position: relative;
-    }
-}
-
-@function get-box-shadow-for-first-header($box-shadow-map) {
-    $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");
-
-    @if ($show-right-border-box-shadow) {
-        @return 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;
-    } @else {
-        @return 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;
-    }
-}
-
-@function get-box-shadow-for-last-header($box-shadow-map) {
-    $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");
-
-    @if ($show-right-border-box-shadow) {
-        @return 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;
-    } @else {
-        @return 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;
-    }
-}
-
-@function get-box-shadow-for-middle-header($box-shadow-map) {
-    $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");
-
-    @if ($show-right-border-box-shadow) {
-        @return 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;
-    } @else {
-        @return inset 0 1px 0 0 $top-bottom-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color;
-    }
-}
-
 @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) {
@@ -129,26 +45,96 @@
 
     .header-row {
         th {
+            background: $bg-color;
+            padding: 2px 8px;
+            line-height: normal;
+            position: sticky;
+            top: 0;
             box-shadow: none !important;
             cursor: default;
-            @include table-header-style($bg-color);
+            .upper-label {
+                @include fonts(Roboto, 0.6875rem, normal, 500, normal, normal, 0.3px);
+                color: $charcoal;
+                margin-bottom: 0;
+            }
+
+            .lower-label {
+                @include fonts(Roboto, 0.6875rem, normal, 500, normal, normal, 0.3px);
+                color: $darkGray;
+                margin-bottom: 0;
+            }
+
+            div.row {
+                display: flex;
+                flex-wrap: nowrap;
+                justify-content: space-between;
+                align-items: center;
+                width: max-content;
+            }
+
+            div.sort-filter-container {
+                display: flex;
+                flex-wrap: nowrap;
+                align-items: center;
+                margin-left: $fs-4;
+                margin-right: auto;
+            }
+
+            span.mdi-filter-variant {
+                font-size: 13px !important;
+                top: -1px !important;
+                position: relative;
+            }
         }
 
         $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");
 
         @for $i from $box-shadow-start-index through $box-shadow-end-index {
             @if ($i == $box-shadow-start-index) {
                 th:nth-of-type(#{$i}) {
-                    box-shadow: get-box-shadow-for-first-header($box-shadow-map) !important;
+                    @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}) {
-                    box-shadow: get-box-shadow-for-last-header($box-shadow-map) !important;
+                    @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}) {
-                    box-shadow: get-box-shadow-for-middle-header($box-shadow-map) !important;
+                    @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;
+                    }
                 }
             }
         }
@@ -164,76 +150,6 @@
     }
 }
 
-@mixin total-row-common-styling($bg-color) {
-    padding: 2px 8px;
-    background: $bg-color;
-    position: sticky;
-    position: -webkit-sticky;
-
-    .upper-label {
-        @include fonts(Roboto, var(--table-body-fs), normal, 700, normal, normal, 0.3px);
-        color: $charcoal;
-    }
-
-    .lower-label {
-        @include fonts(Roboto, var(--table-body-fs), normal, 700, normal, normal, 0.3px);
-        color: $darkGray;
-    }
-
-    br {
-        display: block;
-        content: "";
-        margin-top: -6px;
-    }
-}
-
-@function get-box-shadow-for-first-total-row($box-shadow-map) {
-    $show-right-border-box-shadow: map.get($box-shadow-map, "show-right-border-box-shadow");
-    $top-box-shadow-color: map.get($box-shadow-map, "top-bs-color");
-    $left-box-shadow-color: map.get($box-shadow-map, "left-bs-color");
-    $bottom-box-shadow-color: map.get($box-shadow-map, "bottom-bs-color");
-    $right-box-shadow-color: map.get($box-shadow-map, "right-bs-color");
-
-    @if ($show-right-border-box-shadow) {
-        @return 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;
-    } @else {
-        @return 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;
-    }
-}
-
-@function get-box-shadow-for-last-total-row($box-shadow-map) {
-    $show-right-border-box-shadow: map.get($box-shadow-map, "show-right-border-box-shadow");
-    $top-box-shadow-color: map.get($box-shadow-map, "top-bs-color");
-    $left-box-shadow-color: map.get($box-shadow-map, "left-bs-color");
-    $bottom-box-shadow-color: map.get($box-shadow-map, "bottom-bs-color");
-    $right-box-shadow-color: map.get($box-shadow-map, "right-bs-color");
-
-    @if ($show-right-border-box-shadow) {
-        @return 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;
-    } @else {
-        @return 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;
-    }
-}
-
-@function get-box-shadow-for-middle-total-row($box-shadow-map) {
-    $show-right-border-box-shadow: map.get($box-shadow-map, "show-right-border-box-shadow");
-    $top-box-shadow-color: map.get($box-shadow-map, "top-bs-color");
-    $left-box-shadow-color: map.get($box-shadow-map, "left-bs-color");
-    $bottom-box-shadow-color: map.get($box-shadow-map, "bottom-bs-color");
-    $right-box-shadow-color: map.get($box-shadow-map, "right-bs-color");
-
-    @if ($show-right-border-box-shadow) {
-        @return 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;
-    } @else {
-        @return inset 0 1px 0 0 $top-box-shadow-color, inset 0 -1px 0 0 $bottom-box-shadow-color;
-    }
-}
-
 @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");
@@ -249,25 +165,78 @@
 
     .total-row {
         td {
+            padding: 2px 8px;
+            background: $bg-color;
+            position: sticky;
             top: $sticky-top !important;
-            @include total-row-common-styling($bg-color);
+
+            .upper-label {
+                @include fonts(Roboto, 0.75rem, normal, 900, normal, normal, 0.3px);
+                color: $charcoal;
+            }
+
+            .lower-label {
+                @include fonts(Roboto, 0.75rem, normal, 900, normal, normal, 0.3px);
+                color: $darkGray;
+            }
+
+            br {
+                display: block;
+                content: "";
+                margin-top: -3px;
+            }
         }
 
         $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-box-shadow-color: map.get($box-shadow-map, "top-bs-color");
+        $left-box-shadow-color: map.get($box-shadow-map, "left-bs-color");
+        $bottom-box-shadow-color: map.get($box-shadow-map, "bottom-bs-color");
+        $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}) {
-                    box-shadow: get-box-shadow-for-first-total-row($box-shadow-map) !important;
+                    @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}) {
-                    box-shadow: get-box-shadow-for-last-total-row($box-shadow-map) !important;
+                    @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}) {
-                    box-shadow: get-box-shadow-for-middle-total-row($box-shadow-map) !important;
+                    @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;
+                    }
                 }
             }
         }
@@ -283,81 +252,66 @@
     }
 }
 
-@mixin table-data-common-styling($bg-color: white) {
-    div:nth-child(1) {
-        color: #000;
-        @include ellipsify();
-        @include fonts(Roboto, var(--table-body-fs), normal, 400, normal, normal, 0px);
-    }
-
-    div:nth-child(2) {
-        color: #a7a7a7;
-        @include ellipsify();
-        @include fonts(Roboto, var(--table-body-fs), normal, 400, normal, normal, 0px);
-    }
-}
-
-@function get-box-shadow-for-first-table-data($box-shadow-map) {
-    $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");
-
-    @if ($show-right-border-box-shadow) {
-        @return inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color;
-    } @else {
-        @return inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color;
-    }
-}
-
-@function get-box-shadow-for-last-table-data($box-shadow-map) {
-    $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");
-
-    @if ($show-right-border-box-shadow) {
-        @return 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;
-    } @else {
-        @return inset -1px 0 0 0 $left-right-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color;
-    }
-}
-
-@function get-box-shadow-for-middle-table-data($box-shadow-map) {
-    $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");
-
-    @if ($show-right-border-box-shadow) {
-        @return inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color;
-    } @else {
-        @return inset 0 -1px 0 0 $top-bottom-box-shadow-color;
-    }
-}
-
 @mixin table-data($sticky-left-map, $box-shadow-map, $bg-color: white) {
     td {
         cursor: pointer;
         background: $bg-color;
         box-shadow: none !important;
 
-        @include table-data-common-styling($bg-color);
+        div:nth-child(1) {
+            color: #000;
+            @include ellipsify();
+            @include fonts(Roboto, 0.75rem, normal, normal, normal, normal, 0px);
+        }
+
+        div:nth-child(2) {
+            color: #a7a7a7;
+            @include ellipsify();
+            @include fonts(Roboto, 0.75rem, normal, 500, normal, normal, 0.3px);
+        }
     }
 
     $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");
 
     @for $i from $box-shadow-start-index through $box-shadow-end-index {
         @if ($i == $box-shadow-start-index) {
             td:nth-of-type(#{$i}) {
-                box-shadow: get-box-shadow-for-first-table-data($box-shadow-map) !important;
+                @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}) {
-                box-shadow: get-box-shadow-for-last-table-data($box-shadow-map) !important;
+                @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}) {
-                box-shadow: get-box-shadow-for-middle-table-data($box-shadow-map) !important;
+                @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;
+                }
             }
         }
     }
@@ -424,46 +378,12 @@
     }
 }
 
-@function get-box-shadow-for-bottom-border-first-row($box-shadow-map) {
-    $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");
-
-    @if ($show-right-border-box-shadow) {
-        @return inset 1px 0 0 0 $left-right-box-shadow-color;
-    } @else {
-        @return inset 1px 0 0 0 $left-right-box-shadow-color;
-    }
-}
-
-@function get-box-shadow-for-bottom-border-last-row($box-shadow-map) {
-    $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");
-
-    @if ($show-right-border-box-shadow) {
-        @return inset 1px 0 0 0 $left-right-box-shadow-color, inset -1px 0 0 0 $left-right-box-shadow-color;
-    } @else {
-        @return inset -1px 0 0 0 $left-right-box-shadow-color;
-    }
-}
-
-@function get-box-shadow-for-bottom-border-middle-row($box-shadow-map) {
-    $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");
-
-    @if ($show-right-border-box-shadow) {
-        @return inset 1px 0 0 0 $top-bottom-box-shadow-color;
-    } @else {
-        @return none;
-    }
-}
-
 @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 {
         border-bottom: 1px solid $top-bottom-box-shadow-color;
@@ -474,88 +394,32 @@
             @for $i from $box-shadow-start-index through $box-shadow-end-index {
                 @if ($i == $box-shadow-start-index) {
                     td:nth-of-type(#{$i}) {
-                        box-shadow: get-box-shadow-for-bottom-border-first-row($box-shadow-map) !important;
+                        @if ($show-right-border-box-shadow) {
+                            box-shadow: 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 if($i == $box-shadow-end-index) {
                     td:nth-of-type(#{$i}) {
-                        box-shadow: get-box-shadow-for-bottom-border-last-row($box-shadow-map) !important;
+                        @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}) {
-                        box-shadow: get-box-shadow-for-bottom-border-middle-row($box-shadow-map) !important;
+                        @if ($show-right-border-box-shadow) {
+                            box-shadow: inset 1px 0 0 0 $top-bottom-box-shadow-color !important;
+                        } @else {
+                            box-shadow: none !important;
+                        }
                     }
                 }
             }
         }
     }
 }
-
-$default-box-shadow-map: (
-    "show-right-border-box-shadow": true,
-    "top-bottom-bs-color": #d4d4d4,
-    "left-right-bs-color": #d4d4d4,
-);
-
-@mixin default-table-header-without-sticky-map($box-shadow-map: $default-box-shadow-map, $bg-color: #ededed) {
-    th {
-        border: none;
-        @include table-header-style($bg-color);
-        box-shadow: get-box-shadow-for-middle-header($box-shadow-map);
-    }
-
-    th:first-of-type {
-        box-shadow: get-box-shadow-for-first-header($box-shadow-map);
-    }
-
-    th:last-of-type {
-        box-shadow: get-box-shadow-for-last-header($box-shadow-map);
-    }
-}
-
-$default-box-shadow-map-for-table-data: (
-    "show-right-border-box-shadow": true,
-    "top-bottom-bs-color": #d4d4d4,
-    "left-right-bs-color": #d4d4d4,
-);
-
-@mixin default-table-body-without-sticky-map(
-    $box-shadow-map: $default-box-shadow-map-for-table-data,
-    $bg-color: white
-) {
-    td {
-        padding: 2px 8px;
-        border: none;
-        @include table-data-common-styling($bg-color);
-        box-shadow: get-box-shadow-for-middle-table-data($box-shadow-map);
-    }
-
-    td:first-of-type {
-        box-shadow: get-box-shadow-for-first-table-data($box-shadow-map);
-    }
-
-    td:last-of-type {
-        box-shadow: get-box-shadow-for-last-table-data($box-shadow-map);
-    }
-}
-
-$default-box-shadow-map-for-bottom-border: (
-    "show-right-border-box-shadow": true,
-    "top-bottom-bs-color": #d4d4d4,
-    "left-right-bs-color": #d4d4d4,
-);
-
-@mixin default-bottom-border($box-shadow-map: $default-box-shadow-map-for-bottom-border) {
-    tr:last-of-type {
-        td {
-            box-shadow: get-box-shadow-for-bottom-border-middle-row($box-shadow-map);
-        }
-
-        td:first-of-type {
-            box-shadow: get-box-shadow-for-bottom-border-first-row($box-shadow-map);
-        }
-
-        td:last-of-type {
-            box-shadow: get-box-shadow-for-bottom-border-last-row($box-shadow-map);
-        }
-    }
-}

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

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

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

@@ -1,11 +1,11 @@
-$dot-width: 0.625rem;
-$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;
-}
+$dot-width: 0.625rem;
+$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;
+}

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

@@ -1,10 +1,9 @@
 @import "colors";
 
 :host ::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
-    line-height: 23px;
+    line-height: 30px;
     width: 42px;
     padding: 0 10px;
-    height: 22px;
 }
 
 :host ::ng-deep .mat-button-toggle-checked {