@annalib/anna-core 25.4.21 → 25.4.22

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

@@ -32,6 +32,90 @@
     }
 }
 
+@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) {
@@ -45,96 +129,26 @@
 
     .header-row {
         th {
-            background: $bg-color;
-            padding: 2px 8px;
-            line-height: normal;
-            position: sticky;
-            top: 0;
             box-shadow: none !important;
             cursor: default;
-            .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;
-            }
+            @include table-header-style($bg-color);
         }
 
         $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}) {
-                    @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;
-                    }
+                    box-shadow: get-box-shadow-for-first-header($box-shadow-map) !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;
-                    }
+                    box-shadow: get-box-shadow-for-last-header($box-shadow-map) !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;
-                    }
+                    box-shadow: get-box-shadow-for-middle-header($box-shadow-map) !important;
                 }
             }
         }
@@ -150,6 +164,76 @@
     }
 }
 
+@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");
@@ -165,78 +249,25 @@
 
     .total-row {
         td {
-            padding: 2px 8px;
-            background: $bg-color;
-            position: sticky;
             top: $sticky-top !important;
-
-            .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;
-            }
+            @include total-row-common-styling($bg-color);
         }
 
         $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}) {
-                    @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;
-                    }
+                    box-shadow: get-box-shadow-for-first-total-row($box-shadow-map) !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;
-                    }
+                    box-shadow: get-box-shadow-for-last-total-row($box-shadow-map) !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;
-                    }
+                    box-shadow: get-box-shadow-for-middle-total-row($box-shadow-map) !important;
                 }
             }
         }
@@ -252,66 +283,81 @@
     }
 }
 
+@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;
 
-        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);
-        }
+        @include table-data-common-styling($bg-color);
     }
 
     $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}) {
-                @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;
-                }
+                box-shadow: get-box-shadow-for-first-table-data($box-shadow-map) !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;
-                }
+                box-shadow: get-box-shadow-for-last-table-data($box-shadow-map) !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 {
-                    box-shadow: inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
-                }
+                box-shadow: get-box-shadow-for-middle-table-data($box-shadow-map) !important;
             }
         }
     }
@@ -378,12 +424,46 @@
     }
 }
 
+@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;
@@ -394,32 +474,88 @@
             @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 !important;
-                        } @else {
-                            box-shadow: inset 1px 0 0 0 $left-right-box-shadow-color !important;
-                        }
+                        box-shadow: get-box-shadow-for-bottom-border-first-row($box-shadow-map) !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 {
-                            box-shadow: inset -1px 0 0 0 $left-right-box-shadow-color !important;
-                        }
+                        box-shadow: get-box-shadow-for-bottom-border-last-row($box-shadow-map) !important;
                     }
                 } @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 {
-                            box-shadow: none !important;
-                        }
+                        box-shadow: get-box-shadow-for-bottom-border-middle-row($box-shadow-map) !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,9 +1,10 @@
 @import "colors";
 
 :host ::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
-    line-height: 30px;
+    line-height: 23px;
     width: 42px;
     padding: 0 10px;
+    height: 22px;
 }
 
 :host ::ng-deep .mat-button-toggle-checked {