wijmo 5.20261.45-nightly.d20251218.t163151 → 5.20261.45-nightly.d20260105.t163143

package/styles/parts/_grid.scss

@@ -1,6 +1,6 @@
 /*!
     *
-    * Wijmo Library 5.20261.45-nightly.d20251218.t163151
+    * Wijmo Library 5.20261.45-nightly.d20260105.t163143
     * https://developer.mescius.com/wijmo
     *
     * Copyright(c) MESCIUS inc. All rights reserved.
@@ -13,472 +13,509 @@
 
 // wijmo.grid
 .wj-flexgrid {
+  width: 100%;
+  cursor: default;
+  overflow: hidden;
+
+  .wj-row {
+    position: absolute; // avoid flicker in Chrome: TFS 261344
+    top: 0;
+  }
+
+  .wj-colheaders .wj-header {
+    .wj-btn.wj-btn-glyph.wj-elem-pin {
+      opacity: 0.9; // pinned
+      &:not(.wj-state-pinned) {
+        // un-pinned
+        opacity: 0.4;
+        .wj-glyph-pin {
+          transform: rotate(-45deg);
+        }
+      }
+    }
+    &.wj-state-multi-selected {
+      // selected column headers
+      border-bottom: 2px solid $wj-sel-bkg;
+    }
+    &.wj-colgroup {
+      // merged column headers
+      display: flex;
+      align-items: center; // vertical alignment
+      &.wj-align-right {
+        justify-content: flex-end;
+      }
+      &.wj-align-center {
+        justify-content: center;
+      }
+    }
+    &.wj-big-header:after {
+      // headers before zero-width columns
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 2px;
+      border-right: $wj-cell-bdr-vrt;
+      content: "";
+    }
+  }
+
+  .wj-rowheaders .wj-header {
+    &.wj-state-multi-selected {
+      // selected row headers
+      border-right: 2px solid $wj-sel-bkg;
+    }
+    &.wj-big-header:after {
+      // headers before zero-height rows
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 2px;
+      border-bottom: $wj-cell-bdr-hrz;
+      content: "";
+    }
+  }
+
+  .wj-topleft .wj-header {
+    &.wj-big-header:after {
+      // headers before zero-width columns
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 2px;
+      border-right: $wj-cell-bdr-vrt;
+      content: "";
+    }
+  }
+
+  .wj-frozen-clone .wj-cell {
+    // frozen cell clones (in container with pointer-events:none)
+    pointer-events: auto; // TFS 367568
+    a {
+      //pointer-events: auto;
+      display: inline-block; // TFS 352484: https://coderwall.com/p/s8pjpg/reseting-pointer-events-on-ie11
+      // NOTE: position: relative; also works
+    }
+  }
+
+  .wj-marquee {
+    // selection marquee
+    position: absolute;
+    //border: 2px solid $wj-sel-bkg; // affects scrollbars (TFS 269673)
+    //outline: 3px solid $wj-sel-bkg; // no effect on scrollbars
+    //outline-offset: -1px; // not supported in IE (TFS 380448)
+    box-shadow:
+      0 0 0 1px $wj-sel-bkg,
+      inset 0 0 0 1px $wj-sel-bkg; // TFS 379342
+    pointer-events: none;
+  }
+
+  .wj-marker {
+    // resize row/col marker
+    position: absolute;
+    background: $wj-accent-bkg;
+    opacity: 0.5;
+    pointer-events: none;
+    z-index: 1000;
+    @if global-variable-exists(wj-highlight-cell-maker) {
+      & {
+        background: $wj-highlight-cell-maker;
+      }
+    }
+  }
+
+  .wj-state-sticky .wj-header {
+    opacity: 0.8;
+  }
+
+  .wj-grid-editor {
     width: 100%;
-    cursor: default;
+    height: 100%;
+    border: none;
+    margin: 0;
+    padding: 0;
+    background: inherit;
+    color: inherit;
     overflow: hidden;
-
-    .wj-row {
-        position: absolute; // avoid flicker in Chrome: TFS 261344
-        top: 0;
+    resize: none;
+  }
+
+  &:focus-within .wj-header.wj-focus-header-cell {
+    // @extend .wj-marquee;
+    // pointer-events: auto;
+    box-shadow:
+      0px 0px 0px 0px $wj-sel-bkg,
+      inset 0px 0px 0px 1px $wj-sel-bkg;
+    //border-right: 1px solid $wj-sel-bkg;
+    //border-bottom: 1px solid $wj-sel-bkg;
+  }
+  @media (forced-colors: active) {
+    &:focus-within .wj-header.wj-focus-header-cell:focus {
+      outline: 2px solid Highlight;
+      outline-offset: -1px;
+      color: ActiveText;
+    }
+    .wj-marquee {
+      outline: 2px solid Highlight;
+      outline-offset: -1px;
+    }
+  }
+
+  .wj-cell {
+    .wj-btn.wj-btn-glyph {
+      // dataMap drop-downs, filters, details
+      padding: 0 4px;
+      min-width: 1.5em;
+      color: inherit;
+      background: transparent;
+      opacity: 0.4;
+
+      &:hover,
+      &:focus {
+        opacity: 1;
+        transition-duration: $wj-tdn-focus;
+      }
+
+      &.wj-right {
+        float: right;
+        order: 2; // TFS 438977
+        &:nth-child(1) {
+          order: 5;
+        }
+        &:nth-child(2) {
+          order: 4;
+        }
+        &:nth-child(3) {
+          order: 3;
+        }
+      }
+
+      &.wj-elem-detail {
+        min-width: 1em; // TFS 352604
+        padding: 0;
+      }
+
+      > span {
+        opacity: 1;
+      }
+    }
+    &.wj-hasdropdown {
+      // TFS 430002
+      display: flex; // WJM-19430
+      & > div {
+        //WJM-234003
+        flex-grow: 1;
+      }
+      .wj-btn.wj-btn-glyph.wj-right {
+        height: 100%;
+      }
     }
 
-    .wj-colheaders .wj-header {
-        .wj-btn.wj-btn-glyph.wj-elem-pin {
-            opacity: .9; // pinned
-            &:not(.wj-state-pinned) { // un-pinned
-                opacity: .4;
-                .wj-glyph-pin {
-                    transform: rotate(-45deg);  
-                }
-            }
-        }
-        &.wj-state-multi-selected { // selected column headers
-            border-bottom: 2px solid $wj-sel-bkg;
-        }
-        &.wj-colgroup { // merged column headers
-            display: flex;
-            align-items: center; // vertical alignment
-            &.wj-align-right {
-                justify-content: flex-end;
-            }
-            &.wj-align-center {
-                justify-content: center;
-            }
-        }
-        &.wj-big-header:after { // headers before zero-width columns
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            right: 2px;
-            border-right: $wj-cell-bdr-vrt;
-            content: '';
+    &.wj-radio-map label {
+      // dataMap radio buttons
+      display: inline-block;
+      font-weight: inherit;
+      margin: 0 1em 0 0; // space to click the cell between labels
+      input[type="radio"] {
+        margin: 0 4px 0 0;
+        outline: none;
+        &:not(:checked) {
+          opacity: 0.4;
         }
+      }
     }
 
-    .wj-rowheaders .wj-header {
-        &.wj-state-multi-selected { // selected row headers
-            border-right: 2px solid $wj-sel-bkg;
-        }
-        &.wj-big-header:after { // headers before zero-height rows
-            position: absolute;
-            left: 0;
-            right: 0;
-            bottom: 2px;
-            border-bottom: $wj-cell-bdr-hrz;
-            content: '';
-        }
+    // fix for 461333 (https://stackoverflow.com/questions/27536428/inline-block-element-height-issue)
+    &.wj-detail .wj-content.wj-flexgrid {
+      vertical-align: top;
     }
-
-
-    .wj-topleft .wj-header {
-        &.wj-big-header:after { // headers before zero-width columns
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            right: 2px;
-            border-right: $wj-cell-bdr-vrt;
-            content: '';
-        }        
-    }
-
-
-    .wj-frozen-clone .wj-cell { // frozen cell clones (in container with pointer-events:none)
-        pointer-events: auto; // TFS 367568
-        a {
-            //pointer-events: auto;
-            display: inline-block; // TFS 352484: https://coderwall.com/p/s8pjpg/reseting-pointer-events-on-ie11
-            // NOTE: position: relative; also works
-        }
+    &.wj-frozen-row.wj-detail {
+      z-index: 2;
     }
-
-    .wj-marquee { // selection marquee
-        position: absolute;
-        //border: 2px solid $wj-sel-bkg; // affects scrollbars (TFS 269673)
-        //outline: 3px solid $wj-sel-bkg; // no effect on scrollbars
-        //outline-offset: -1px; // not supported in IE (TFS 380448)
-        box-shadow: 0 0 0 1px $wj-sel-bkg, inset 0 0 0 1px $wj-sel-bkg; // TFS 379342
-        pointer-events: none;
-    }
-
-    .wj-marker { // resize row/col marker
-        position: absolute;
-        background: $wj-accent-bkg;
-        opacity: 0.5;
-        pointer-events: none;
-        z-index: 1000;
-        @if global-variable-exists(wj-highlight-cell-maker) {
-            & {
-                background: $wj-highlight-cell-maker;
-            }
-        }
+    &.wj-detail {
+      z-index: 0;
     }
 
-    .wj-state-sticky .wj-header {
-        opacity: 0.8;
+    // fix for C1WEB-27716 (auto-size rows and boolean cells)
+    label {
+      display: inline-block;
+      max-width: 100%;
+      margin: 0;
+      font-weight: inherit;
+      line-height: 1em; // WJM-19514
+      input[type="checkbox"] {
+        margin: 0px 6px 0px 0px;
+      }
     }
 
-    .wj-grid-editor {
-        width: 100%;
-        height: 100%;
-        border: none;
-        margin: 0;
-        padding: 0;
-        background: inherit;
-        color: inherit;
-        overflow: hidden;
-        resize: none;
-    }
-
-    &:focus-within .wj-header.wj-focus-header-cell  {
-        // @extend .wj-marquee;
-        // pointer-events: auto;
-        box-shadow: 0px 0px 0px 0px $wj-sel-bkg, inset 0px 0px 0px 1px $wj-sel-bkg;
-        //border-right: 1px solid $wj-sel-bkg;
-        //border-bottom: 1px solid $wj-sel-bkg;
-    }
-    @media (forced-colors: active) { 
-        &:focus-within .wj-header.wj-focus-header-cell:focus  {
-            outline: 2px solid Highlight;
-            outline-offset: -1px;
-            color: ActiveText;
-        }
-        .wj-marquee {
-            outline: 2px solid Highlight;
-            outline-offset: -1px;
-        }
+    // Set display none for label with hidden attributes except when hidden is set to "until-found".
+    label[hidden]:not([hidden="until-found"]) {
+      display: none; // WJM-34503
     }
-    
-    .wj-cell {
-        .wj-btn.wj-btn-glyph { // dataMap drop-downs, filters, details
-            padding: 0 4px;
-            min-width: 1.5em;
-            color: inherit;
-            background: transparent;
-            opacity: .4;
-
-            &:hover, &:focus {
-                opacity: 1;
-                transition-duration: $wj-tdn-focus;
-            }
-
-            &.wj-right {
-                float: right;
-                order: 2; // TFS 438977
-                &:nth-child(1) {
-                    order: 5
-                }
-                &:nth-child(2) {
-                    order: 4
-                }
-                &:nth-child(3) {
-                    order: 3
-                }
-            }
-
-            &.wj-elem-detail {
-                min-width: 1em; // TFS 352604
-                padding: 0;
-            }
-
-            > span {
-                opacity: 1;
-            }
-        }
-        &.wj-hasdropdown { // TFS 430002
-            display: flex; // WJM-19430
-            & > div { //WJM-234003
-                flex-grow: 1;
-            }
-            .wj-btn.wj-btn-glyph.wj-right {
-                height: 100%;
-            }
-        }
-
-        &.wj-radio-map label { // dataMap radio buttons
-            display: inline-block;
-            font-weight: inherit;
-            margin: 0 1em 0 0; // space to click the cell between labels
-            input[type=radio] {
-                margin: 0 4px 0 0;
-                outline: none;
-                &:not(:checked) {
-                    opacity: .4;
-                }
-            }
-        }
+  }
 
-        // fix for 461333 (https://stackoverflow.com/questions/27536428/inline-block-element-height-issue)
-        &.wj-detail .wj-content.wj-flexgrid {
-            vertical-align: top;
-        }
-        &.wj-frozen-row.wj-detail{
-            z-index: 2;
-        }
-        &.wj-detail{
-            z-index: 0;
-        }
+  &.wj-rtl {
+    .wj-cell {
+      border-left: $wj-cell-bdr-vrt;
+      border-right: none;
 
-        // fix for C1WEB-27716 (auto-size rows and boolean cells)
-        label {
-            display: inline-block;
-            max-width: 100%;
-            margin: 0;
-            font-weight: inherit;
-            line-height: 1em; // WJM-19514
-            input[type=checkbox] {
-                margin: 0px 6px 0px 0px;
-            }
-        }
+      .wj-btn.wj-btn-glyph.wj-right {
+        float: left;
+      }
 
-        // Set display none for label with hidden attributes except when hidden is set to "until-found".
-        label[hidden]:not([hidden="until-found"]){
-            display: none;  // WJM-34503
-        }
+      &.wj-last-visible-col {
+        border-left: none;
+      }
     }
 
-    &.wj-rtl {
-        .wj-cell {
-            border-left: $wj-cell-bdr-vrt;
-            border-right: none;
-
-            .wj-btn.wj-btn-glyph.wj-right {
-                float: left;
-            }
-
-            &.wj-last-visible-col {
-                border-left: none;
-            }
-        }
-
-        .wj-frozen-col {
-            border-left: $wj-cell-frz-bdr-vrt;
-            border-right: none;
-        }
-
-        .wj-frozen-col-right-edge { 
-            border-right: $wj-cell-frz-bdr-vrt;
-        }
-
-        .wj-colheaders .wj-header {
-            &.wj-filter-on, &.wj-filter-off { // workaround for IE11 bug: TFS 408397
-               white-space: normal;
-               word-break: break-all;
-            }
-           
-            &.wj-big-header:after { // headers before zero-width columns
-                left: 2px;
-                right: unset;
-            }
-
-            .wj-sort-index {
-                padding: 0 .2em 0 0;
-            }
-        }
-
-        .wj-rowheaders .wj-header {
-            &.wj-state-multi-selected { // selected row headers
-                border-left: 2px solid $wj-sel-bkg;
-                border-right: none;
-            }
-        }
-
-        .wj-topleft .wj-header {
-            &.wj-big-header:after { // headers before zero-width columns
-                left: 2px;
-                right: unset;
-            }
-        }
+    .wj-frozen-col {
+      border-left: $wj-cell-frz-bdr-vrt;
+      border-right: none;
     }
 
-    // honor preserveWhiteSpace property (TFS 403505)
-    &.wj-whitespace-pre {
-        .wj-cell {
-            white-space: pre;
-        }
-        .wj-cell.wj-wrap {
-            white-space: pre-wrap;
-        }
-        .wj-cell.wj-multiline {
-            white-space: pre-wrap; //pre-line; // TFS 440414
-        }
+    .wj-frozen-col-right-edge {
+      border-right: $wj-cell-frz-bdr-vrt;
     }
 
-    // don't float buttons while measuring (TFS 418083)
-    [wj-state-measuring].wj-cell .wj-btn.wj-btn-glyph.wj-right {
-        float: none;
-    }    
-}
-
-// moved to top level for backward compatibility
-.wj-cell {
-    position: absolute;
-    overflow: hidden;
-    white-space: nowrap;
-    padding: $wj-cell-pdg;
-    border-right: $wj-cell-bdr-vrt;
-    border-bottom: $wj-cell-bdr-hrz;
-    background: $wj-cell;
-    outline: none;
-
-    &:not(.wj-hasdropdown) {
-        text-overflow: ellipsis;
-    }
-
-    &.wj-alt {
-        background: $wj-cell-alt; // alternate cell background
-        &.wj-frozen { // frozen cell fore and backgrounds
-            @include backgradient($wj-cell-frz-alt, false);
-        }
-    }
+    .wj-colheaders .wj-header {
+      &.wj-filter-on,
+      &.wj-filter-off {
+        // workaround for IE11 bug: TFS 408397
+        white-space: normal;
+        word-break: break-all;
+      }
 
-    &.wj-header {
-        @include backgradient($wj-hdr-bkg, $wj-hdr-grd);
-        color: $wj-hdr-txt;
-        font-weight: bold;
-
-        &.wj-state-multi-selected { // selected headers
-            background: $wj-hdr-hvr;
-            color: $wj-hdr-txt;
-            font-weight: bold;
-        }
+      &.wj-big-header:after {
+        // headers before zero-width columns
+        left: 2px;
+        right: unset;
+      }
 
-        .wj-sort-index { // sort index in multi-column sorts
-            display: inline-block; // TFS 400500
-            font-weight: normal;
-            font-size: 80%;
-            vertical-align: top;
-            color: $wj-sort-index-txt;
-            padding: 0 0 0 .2em;
-            opacity: 1;
-        }
+      .wj-sort-index {
+        padding: 0 0.2em 0 0;
+      }
     }
 
-    &.wj-frozen { // frozen cell fore and backgrounds
-        @include backgradient($wj-cell-frz, false);
-
-        @if $wj-cell-frz-txt != $wj-txt { // TFS 359692
-            color: $wj-cell-frz-txt;
-        }
+    .wj-rowheaders .wj-header {
+      &.wj-state-multi-selected {
+        // selected row headers
+        border-left: 2px solid $wj-sel-bkg;
+        border-right: none;
+      }
     }
 
-    &.wj-last-frozen-row { // frozen row bottom edge
-        border-bottom: $wj-cell-frz-bdr-hrz;        
+    .wj-topleft .wj-header {
+      &.wj-big-header:after {
+        // headers before zero-width columns
+        left: 2px;
+        right: unset;
+      }
     }
+  }
 
-    &.wj-last-frozen-row-bottom { // frozen row bottom edge       
-        border-top: $wj-cell-frz-bdr-hrz;
+  // honor preserveWhiteSpace property (TFS 403505)
+  &.wj-whitespace-pre {
+    .wj-cell {
+      white-space: pre;
     }
-
-    &.wj-frozen-col { // frozen column left edge
-        border-right: $wj-cell-frz-bdr-vrt;
+    .wj-cell.wj-wrap {
+      white-space: pre-wrap;
     }
-
-    &.wj-frozen-col-right-edge { // frozen column right edge
-        border-left: $wj-cell-frz-bdr-vrt;
+    .wj-cell.wj-multiline {
+      white-space: pre-wrap; //pre-line; // TFS 440414
     }
+  }
 
-    &.wj-group {
-        background: $wj-cell-grp-bkg;
-        color: $wj-cell-grp-txt;
-
-        .wj-elem-collapse-space::before {
-            content: "\0020";// Space Unicode
-        }
-    }
-
-    &.wj-state-invalid {
-        border: 1.2px solid $wj-invalid;
+  // don't float buttons while measuring (TFS 418083)
+  [wj-state-measuring].wj-cell .wj-btn.wj-btn-glyph.wj-right {
+    float: none;
+  }
+}
 
-        &.wj-header {
-            background: rgba(255, 180, 180, 1); // TFS 306815
-        }
+// moved to top level for backward compatibility
+.wj-cell {
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: $wj-cell-pdg;
+  border-right: $wj-cell-bdr-vrt;
+  border-bottom: $wj-cell-bdr-hrz;
+  background: $wj-cell;
+  outline: none;
+
+  &:not(.wj-hasdropdown) {
+    text-overflow: ellipsis;
+  }
+
+  &.wj-alt {
+    background: $wj-cell-alt; // alternate cell background
+    &.wj-frozen {
+      // frozen cell fore and backgrounds
+      @include backgradient($wj-cell-frz-alt, false);
+    }
+  }
+
+  &.wj-header {
+    @include backgradient($wj-hdr-bkg, $wj-hdr-grd);
+    color: $wj-hdr-txt;
+    font-weight: bold;
 
-        &:not(.wj-header):after {
-            position: absolute;
-            content: '';
-            width: 0;
-            right: 0;
-            top: -6px;
-            border: 6px solid transparent;
-            border-right-color: $wj-invalid;
-        }
+    &.wj-state-multi-selected {
+      // selected headers
+      background: $wj-hdr-hvr;
+      color: $wj-hdr-txt;
+      font-weight: bold;
     }
 
-    &.wj-header.wj-state-dragsrc {
-        opacity: 0.5; // header cell being dragged
+    .wj-sort-index {
+      // sort index in multi-column sorts
+      display: inline-block; // TFS 400500
+      font-weight: normal;
+      font-size: 80%;
+      vertical-align: top;
+      color: $wj-sort-index-txt;
+      padding: 0 0 0 0.2em;
+      opacity: 1;
     }
+  }
 
-    &.wj-wrap { // soft breaks
-        white-space: normal;
-        text-overflow: clip;
-        word-wrap: break-word; // TFS 407942
-    }
+  &.wj-frozen {
+    // frozen cell fore and backgrounds
+    @include backgradient($wj-cell-frz, false);
 
-    &.wj-multiline { // hard breaks
-        white-space: pre; // or pre-line?
-        text-overflow: clip;
-        word-wrap: break-word; // TFS 407942
+    @if $wj-cell-frz-txt != $wj-txt {
+      // TFS 359692
+      color: $wj-cell-frz-txt;
     }
+  }
 
-    &.wj-wrap.wj-multiline { // soft and hard breaks
-        white-space: pre-wrap;
-        text-overflow: clip;
-    }
+  &.wj-last-frozen-row {
+    // frozen row bottom edge
+    border-bottom: $wj-cell-frz-bdr-hrz;
+  }
 
-    &.wj-align-left {
-        text-align: left;
-    }
+  &.wj-last-frozen-row-bottom {
+    // frozen row bottom edge
+    border-top: $wj-cell-frz-bdr-hrz;
+  }
 
-    &.wj-align-right {
-        text-align: right;
-    }
+  &.wj-frozen-col {
+    // frozen column left edge
+    border-right: $wj-cell-frz-bdr-vrt;
+  }
 
-    &.wj-align-center {
-        text-align: center;
-    }
+  &.wj-frozen-col-right-edge {
+    // frozen column right edge
+    border-left: $wj-cell-frz-bdr-vrt;
+  }
 
-    &.wj-align-justify {
-        text-align: justify;
-    }
+  &.wj-group {
+    background: $wj-cell-grp-bkg;
+    color: $wj-cell-grp-txt;
 
-    &.wj-align-justify-all {
-        text-align: justify;
-        text-align-last: justify;
-        text-justify: distribute; // required for IE11
+    .wj-elem-collapse-space::before {
+      content: "\0020"; // Space Unicode
     }
+  }
 
-    &.wj-last-visible-col {
-        border-right: none;
-    }
+  &.wj-state-invalid {
+    border: 1.2px solid $wj-invalid;
 
-    &.wj-last-visible-row {
-        border-bottom: none;
-    }
+    &.wj-header {
+      background: rgba(255, 180, 180, 1); // TFS 306815
+    }
+
+    &:not(.wj-header):after {
+      position: absolute;
+      content: "";
+      width: 0;
+      right: 0;
+      top: -6px;
+      border: 6px solid transparent;
+      border-right-color: $wj-invalid;
+    }
+  }
+
+  &.wj-header.wj-state-dragsrc {
+    opacity: 0.5; // header cell being dragged
+  }
+
+  &.wj-wrap {
+    // soft breaks
+    white-space: normal;
+    text-overflow: clip;
+    word-wrap: break-word; // TFS 407942
+  }
+
+  &.wj-multiline {
+    // hard breaks
+    white-space: pre; // or pre-line?
+    text-overflow: clip;
+    word-wrap: break-word; // TFS 407942
+  }
+
+  &.wj-wrap.wj-multiline {
+    // soft and hard breaks
+    white-space: pre-wrap;
+    text-overflow: clip;
+  }
+
+  &.wj-align-left {
+    text-align: left;
+  }
+
+  &.wj-align-right {
+    text-align: right;
+  }
+
+  &.wj-align-center {
+    text-align: center;
+  }
+
+  &.wj-align-justify {
+    text-align: justify;
+  }
+
+  &.wj-align-justify-all {
+    text-align: justify;
+    text-align-last: justify;
+    text-justify: distribute; // required for IE11
+  }
+
+  &.wj-last-visible-col {
+    border-right: none;
+  }
+
+  &.wj-last-visible-row {
+    border-bottom: none;
+  }
 }
 
-.wj-cells .wj-cell { // selection selector is stronger
+.wj-cells .wj-cell {
+  // selection selector is stronger
+  &.wj-state-selected {
+    background: $wj-sel-bkg;
+    color: $wj-sel-txt;
+  }
+
+  &.wj-state-multi-selected {
+    background: $wj-msel-bkg;
+    color: $wj-msel-txt;
+  }
+
+  @media (forced-colors: active) {
     &.wj-state-selected {
-        background: $wj-sel-bkg;
-        color: $wj-sel-txt;
+      background-color: Highlight;
+      color: ActiveText;
+      .wj-glyph-down,
+      .wj-glyph-right,
+      .wj-glyph-down-right {
+        background-color: Highlight;
+      }
     }
 
     &.wj-state-multi-selected {
-        background: $wj-msel-bkg;
-        color: $wj-msel-txt;
-    }
-
-    @media (forced-colors: active) {
-        &.wj-state-selected {
-            background-color: Highlight;
-            color: ActiveText;
-            .wj-glyph-down, .wj-glyph-right, .wj-glyph-down-right {
-                background-color: Highlight;
-            }
-        }
-    
-        &.wj-state-multi-selected {
-            background-color: Canvas;
-            color: ActiveText;
-        }
+      background-color: Canvas;
+      color: ActiveText;
     }
+  }
 }