@progress/kendo-theme-fluent 11.2.1-dev.1 → 11.3.0-dev.0

package/scss/grid/_layout.scss

@@ -8,360 +8,80 @@
 @use "../tabstrip/_variables.scss" as *;
 @use "./_variables.scss" as *;
 @use "../core/spacing/_index.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/grid/_layout.scss" as *;
 
 @mixin kendo-grid--layout() {
 
-    .k-grid {
-        border-width: var( --kendo-grid-border-width, #{$kendo-grid-border-width} );
-        border-style: var( --kendo-grid-border-style, #{$kendo-grid-border-style} );
-        box-sizing: border-box;
-        outline: 0;
-        font-family: var( --kendo-grid-font-family, #{$kendo-grid-font-family} );
-        font-size:var( --kendo-grid-font-size, #{$kendo-grid-font-size} );
-        line-height: var( --kendo-grid-line-height, #{$kendo-grid-line-height} );
-        display: flex;
-        flex-direction: column;
-        position: relative;
-
-        &.k-grid-display-block {
-            display: block;
-        }
-
-        .k-grid-container {
-            border-color: inherit;
-            display: flex;
-            flex: 1 1 auto;
-            overflow: hidden;
-            position: relative;
-        }
-
-        .k-grid-aria-root {
-            border-color: inherit;
-            display: flex;
-            flex-direction: column;
-            flex: 1 1 auto;
-            overflow: hidden;
-        }
-
-        .k-table {
-            margin: 0;
-            width: 100%;
-            max-width: none;
-            border-width: 0;
-            border-color: inherit;
-            border-collapse: separate;
-            border-spacing: 0;
-            empty-cells: show;
-            outline: 0;
-            box-sizing: content-box;
-            table-layout: fixed;
-        }
-
-        .k-table-thead,
-        .k-table-tbody,
-        .k-table-tfoot {
-            text-align: start;
-            border-color: inherit;
-        }
-
-        .k-table-row {
-            border-color: inherit;
-        }
-
-        .k-table-th,
-        td,
-        .k-table-td {
-            border-width: 0;
-            padding-inline: var( --kendo-grid-cell-padding-x, 0 );
-            padding-block: var( --kendo-grid-cell-padding-y, 0 );
-            border-style: solid;
-            border-color: inherit;
-            outline: 0;
-            font-weight: inherit;
-            text-align: inherit;
-            position: static;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            box-sizing: content-box;
-
-            &:first-child {
-                border-inline-start-width: 0;
-            }
+    @include kendo-grid--layout-base();
 
-            &:focus {
-                outline: none;
-            }
-
-            > .k-radio,
-            > .k-radio-wrap,
-            > .k-checkbox,
-            > .k-checkbox-wrap {
-                vertical-align: top;
-            }
-        }
+    .k-grid {
+        border-style: $kendo-grid-border-style;
 
         .k-table-th {
-            padding-inline: var( --kendo-grid-header-padding-x, 0 );
-            padding-block: var( --kendo-grid-header-padding-y, 0 );
-            border-block-end-width: var( --kendo-grid-header-border-width-y, #{$kendo-grid-header-border-width-y} );
-            border-inline-start-width: var( --kendo-grid-header-border-width-x, #{$kendo-grid-header-border-width-x} );
-            white-space: nowrap;
+            border-block-end-width: $kendo-grid-header-border-width-y;
+            border-inline-start-width: $kendo-grid-header-border-width-x;
         }
 
         td,
         .k-table-td {
-            border-block-end-width: var( --kendo-grid-cell-border-width-y, #{$kendo-grid-cell-border-width-y} );
-            border-inline-start-width: var( --kendo-grid-cell-border-width-x, #{$kendo-grid-cell-border-width-x} );
-            vertical-align: middle;
-        }
-
-        a {
-            color: inherit;
-            text-decoration: none;
-        }
-        a:hover {
-            text-decoration: none;
-        }
-
-        .k-grid-header-wrap {
-            box-sizing: content-box;
+            border-block-end-width: $kendo-grid-cell-border-width-y;
+            border-inline-start-width: $kendo-grid-cell-border-width-x;
+            white-space: nowrap;
         }
 
         // Grouping, hierarchy
-        .k-group-col,
-        .k-hierarchy-col {
-            padding: 0;
-            width: var( --kendo-grid-hierarchy-col-width, #{$kendo-grid-hierarchy-col-width} );
-        }
-
-        .k-grouping-row p {
-            margin: 0;
-            display: flex;
-            align-items: center;
-            align-content: center;
-        }
-
         .k-grouping-row td,
         .k-grouping-row .k-table-td {
             border-block-end-width: 0;
-            overflow: visible;
         }
 
         .k-grouping-row + .k-table-row td,
         .k-grouping-row + .k-table-row .k-table-td {
-            border-top-width: var( --kendo-grid-grouping-row-border-width-y, #{$kendo-grid-grouping-row-border-width-y} );
+            border-top-width: $kendo-grid-grouping-row-border-width-y;
         }
 
         .k-grouping-row .k-group-cell,
         .k-grouping-row + .k-table-row .k-group-cell {
             border-block-width: 0;
             border-inline-end-width: 1px;
-            text-overflow: clip;
-        }
-
-        .k-grouping-row .k-icon {
-            margin-inline-start: calc( ( var( --kendo-icon-size, 1rem ) / 2 ) - var( --kendo-grid-cell-padding-x, 0 ) );
-            margin-inline-end: calc( var( --kendo-icon-size, 1rem ) / 2 );
-            text-decoration: none;
         }
 
         .k-group-footer td,
         .k-group-footer .k-table-td {
-            border-style: solid;
-            border-inline-width: var( --kendo-grid-group-footer-border-width-x, #{$kendo-grid-group-footer-border-width-x} );
-            border-block-start-width: var( --kendo-grid-group-footer-border-width-y, #{$kendo-grid-group-footer-border-width-y} );
+            border-inline-width: $kendo-grid-group-footer-border-width-x;
+            border-block-end-width: $kendo-grid-group-footer-border-width-y;
         }
 
-        .k-group-footer .k-group-cell + td,
-        .k-group-footer .k-group-cell + .k-table-td {
-            border-inline-start-width: var( --kendo-grid-group-footer-border-width-x, #{$kendo-grid-group-footer-border-width-x} );
+        .k-table .k-group-footer td,
+        .k-table .k-group-footer .k-table-td {
+            border-block-start-width: 0;
         }
 
-        .k-hierarchy-cell,
-        .k-drag-cell {
-            text-align: center;
-            padding: 0;
-            overflow: visible;
-
-            > .k-icon {
-                padding-inline: 0;
-                padding-block: var( --kendo-grid-cell-padding-y, 0 );
-                display: inline-block;
-                outline: 0;
-            }
-
-            > .k-font-icon {
-                width: 100%;
-                height: 100%;
-            }
-
-        }
-
-        .k-hierarchy-cell + .k-grid-content-sticky {
-            border-inline-start-width: var( --kendo-grid-sticky-cell-border-width, #{$kendo-grid-sticky-cell-border-width} );
-        }
-
-        .k-detail-row {
-            .k-detail-cell {
-                border-left-width: 0;
-            }
-        }
-
-        .k-dirty-cell {
-            position: relative;
-
-            &.k-edit-cell {
-                position: static;
-            }
-
-            &.k-grid-content-sticky {
-                position: sticky;
-            }
-        }
-
-        .k-dirty {
-            border-width: 5px;
-            border-color: currentColor transparent transparent currentColor;
-            inset-inline-start: 0;
-            inset-inline-end: auto;
-        }
-
-        .k-grid-content-locked + .k-grid-content {
-            box-sizing: content-box;
-        }
-
-        .k-grid-content-expander {
-            position: absolute;
-            visibility: hidden;
-            height: 1px;
-            bottom: 1px; // fix for vertical scrollbar appearing when no records template is displayed
-        }
-
-        .k-grid-filter,
-        .k-header-column-menu,
-        .k-grid-header-menu,
-        .k-hierarchy-cell .k-icon {
-            border-width: 0;
-        }
-
-        // Drag column
-        .k-drag-col {
-            padding: 0;
-            width: var( --kendo-grid-drag-cell-width, #{$kendo-grid-drag-cell-width} );
-        }
-
-        .k-drag-cell {
-            cursor: move;
-        }
-
-        // Highlighted state
-        td.k-highlighted,
-        .k-table-row.k-highlighted > td,
-        .k-table-td.k-highlighted,
-        .k-table-row.k-highlighted > .k-table-td {
-            font-weight: var( --kendo-grid-highlighted-font-weight, #{$kendo-grid-highlighted-font-weight} );
-        }
-    }
-
-    .k-grid-resizable {
-        resize: both;
-        overflow: auto;
-    }
-
-    // Toolbar
-    .k-grid-toolbar {
-        border-width: 0 0 var( --kendo-grid-toolbar-border-width, #{$kendo-grid-toolbar-border-width} );
-        flex-shrink: 0;
-    }
-    .k-grid-toolbar-bottom {
-        border-width: var( --kendo-grid-toolbar-border-width, #{$kendo-grid-toolbar-border-width} ) 0 0;
-    }
-
-
-    // Grouping header
-    .k-grouping-header {
-        padding-inline: var( --kendo-grid-grouping-header-padding-x, 0 );
-        padding-block: var( --kendo-grid-grouping-header-padding-y, 0 );
-        border-width: 0 0 1px;
-        border-style: solid;
-        border-color: inherit;
-        white-space: normal;
-        display: flex;
-        align-items: center;
-        gap: var( --kendo-grid-grouping-header-padding-y, 0 );
-        position: relative;
-        flex-wrap: wrap;
-
-        &::before {
-            content: "";
-            height: $kendo-chip-calc-size;
-            display: inline-block;
-            vertical-align: middle;
-            margin-left: calc( var( --kendo-grid-grouping-header-padding-y, 0 ) * -1 );
-        }
-
-        .k-chip-list {
-            flex-grow: 0;
-            display: contents;
-        }
-
-        > .k-grouping-drop-container {
-            flex-grow: 1;
-            padding-block: var( --kendo-grid-grouping-header-padding-y, #{$kendo-grid-grouping-header-padding-y} );
-            margin-block: calc( var( --kendo-grid-grouping-header-padding-y, #{$kendo-grid-grouping-header-padding-y} ) * -1 );
+        .k-grid-header .k-cell-inner > .k-link > .k-sort-icon .k-icon {
             display: inline-flex;
-            align-self: stretch;
-            align-items: center;
         }
     }
 
     .k-grouping-dropclue {
-        width: calc( var( --kendo-grid-group-drop-hint-size, #{$kendo-grid-group-drop-hint-size} ) * 2 );
-        height: var( --kendo-grid-group-drop-hint-height, 1rem );
-        position: absolute;
-        top: var( --kendo-grid-group-drop-hint-top, #{$kendo-grid-group-drop-hint-top} );
-        box-sizing: content-box;
-
-        &::before,
-        &::after {
-            display: inline-block;
-            content: "";
-            position: absolute;
-        }
+        width: calc( #{$kendo-grid-group-drop-hint-size} * 2 );
+        height: $kendo-grid-group-drop-hint-height;
 
         &::before {
-            width: var( --kendo-grid-group-drop-hint-dot-size, #{$kendo-grid-group-drop-hint-dot-size} );
-            height: var( --kendo-grid-group-drop-hint-dot-size, #{$kendo-grid-group-drop-hint-dot-size} );
+            border-width: 0;
+            width: $kendo-grid-group-drop-hint-dot-size;
+            height: $kendo-grid-group-drop-hint-dot-size;
             border-radius: 50%;
-            top: 0;
-            left: calc( var( --kendo-grid-group-drop-hint-dot-size, #{$kendo-grid-group-drop-hint-dot-size} ) / 2 );
+            left: calc( #{$kendo-grid-group-drop-hint-dot-size} / 2 );
         }
-
-        &::after {
-            width: var( --kendo-grid-group-drop-hint-line-size, #{$kendo-grid-group-drop-hint-line-size} );
-            height: calc( 100% - var( --kendo-grid-group-drop-hint-size, #{$kendo-grid-group-drop-hint-size} ) );
-            top: var( --kendo-grid-group-drop-hint-size, #{$kendo-grid-group-drop-hint-size} );
-            left: calc( var( --kendo-grid-group-drop-hint-size, #{$kendo-grid-group-drop-hint-size} ) - ( var( --kendo-grid-group-drop-hint-line-size, #{$kendo-grid-group-drop-hint-line-size} ) / 2 ) );
-        }
-    }
-
-    // Alias used in jQuery
-    .k-reorder-cue {
-        @extend .k-grouping-dropclue !optional;
     }
 
     // Grid header / footer
     .k-grid-header-wrap,
     .k-grid-footer-wrap {
-        margin-inline-end: calc( var( --kendo-grid-border-width, #{$kendo-grid-border-width} ) * -1 );
-        width: 100%;
+        margin-inline-end: calc( #{$kendo-grid-border-width} * -1 );
         border-inline-start-width: 0;
-        border-inline-end-width: var( --kendo-grid-cell-border-width-y, #{$kendo-grid-cell-border-width-y} );
+        border-inline-end-width: $kendo-grid-cell-border-width-y;
         border-block-width: 0;
-        border-style: solid;
-        border-color: inherit;
-        position: relative;
-        overflow: hidden;
 
         .k-table-row:not(:only-child) .k-table-th,
         .k-table-row:not(:only-child) .k-table-td:nth-child(n+2) {
@@ -369,48 +89,16 @@
         }
     }
 
-    .k-grid-header-locked + .k-grid-header-wrap.k-auto-scrollable {
-        margin-inline-end: 0;
-    }
-
-    .k-grid-header,
-    .k-grid-footer {
-        padding-inline-start: 0;
-        padding-inline-end: var( --kendo-scrollbar-width, #{$kendo-scrollbar-width} );
-        border-width: 0;
-        border-style: solid;
-        border-color: inherit;
-        flex: 0 0 auto;
-    }
-
-    div.k-grid-header,
-    div.k-grid-footer {
-        display: flex;
-        flex-direction: row;
-        align-items: stretch;
-    }
-
     .k-grid-header {
-        border-bottom-width: var( --kendo-grid-header-border-width-y, #{$kendo-grid-header-border-width-y} );
-        font-size: var( --kendo-grid-header-font-size, #{$kendo-grid-header-font-size} );
+        border-bottom-width: $kendo-grid-header-border-width-y;
 
         .k-table  {
-            margin-bottom: calc( var( --kendo-grid-header-border-width-y, #{$kendo-grid-header-border-width-y} ) * -1 );
-        }
-
-        &.k-grid-draggable-header {
-            user-select: none;
-            touch-action: none;
+            margin-bottom: calc( #{$kendo-grid-header-border-width-y} * -1 );
         }
 
         .k-table-th {
-            position: relative;
-            vertical-align: bottom;
-            z-index: 1;
-            cursor: default;
-
             &.k-first {
-                border-inline-start-width: var( --kendo-grid-header-first-border-width, #{$kendo-grid-header-first-border-width} );
+                border-inline-start-width: $kendo-grid-header-first-border-width;
             }
         }
 
@@ -418,99 +106,29 @@
             border-inline-start-width: 0;
         }
 
-        .k-table-th > .k-link {
-            margin-block: calc( var( --kendo-grid-header-padding-y, 0 ) * -1 );
-            margin-inline: calc( var( --kendo-grid-header-padding-x, 0 ) * -1 );
-            padding-block: var( --kendo-grid-header-padding-y, 0 );
-            padding-inline: var( --kendo-grid-header-padding-x, 0 );
-            line-height: inherit;
-            display: block;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            outline: 0;
-
-            > .k-icon {
-                margin-inline-start: var( --kendo-grid-sort-icon-spacing, #{$kendo-grid-sort-icon-spacing} );
-            }
-        }
-
-
-        .k-table-th > .k-link:focus {
-            text-decoration: none;
-        }
-
         .k-grid-filter,
         .k-header-column-menu,
         .k-grid-header-menu {
-            padding-block: var(--kendo-button-padding-y, 0 );
-            padding-inline: var(--kendo-button-padding-y, 0 );
-            width: var(--kendo-button-calc-size, auto );
-            height: var(--kendo-button-calc-size, auto );
-            box-sizing: border-box;
-            outline: 0;
-            line-height: var(--kendo-button-line-height, normal );
-            display: flex;
-            align-items: center;
-            align-content: center;
-            justify-content: center;
-            position: absolute;
-            inset-inline-end: var( --kendo-grid-header-menu-spacing, #{$kendo-grid-header-menu-spacing} );
-            inset-block-end: calc( var( --kendo-grid-header-padding-y, 0 ) + ( #{$kendo-line-height-em} / 2 ) - ( #{$kendo-button-inner-calc-size} / 2 ) );
-            z-index: 1;
-
-            &:hover {
-                cursor: pointer;
-            }
+            inset-inline-end: $kendo-grid-header-menu-spacing;
+            inset-block-end: calc( #{$kendo-grid-header-padding-y} + ( #{$kendo-line-height-em} / 2 ) - ( #{$kendo-button-inner-calc-size} / 2 ) );
         }
 
         .k-cell-inner > .k-link > .k-icon,
         .k-cell-inner > .k-link > .k-sort-icon {
-            vertical-align: text-top;
-            margin-inline-start: var( --kendo-grid-sort-icon-spacing, #{$kendo-grid-sort-icon-spacing} );
+            margin-inline-start: $kendo-grid-sort-icon-spacing;
         }
 
         .k-sort-order {
-            display: inline-block;
             height: var( --kendo-icon-size, 1rem );
-            font-size: var( --kendo-grid-sort-index-font-size, #{$kendo-grid-sort-index-font-size} );
-            margin-inline-start: var( --kendo-grid-sort-index-spacing-x, #{$kendo-grid-sort-index-spacing-x} );
+            font-size: $kendo-grid-sort-index-font-size;
+            margin-inline-start: $kendo-grid-sort-index-spacing-x;
         }
     }
 
-    .k-column-resizer {
-        width: .5em;
-        height: 1000%;
-        display: block;
-        position: absolute;
-        inset-block-start: 0;
-        inset-inline-end: 0;
-        cursor: col-resize;
-    }
-
-    .k-resizer-wrap {
-        display: block;
-        width: 100%;
-        padding-block-start: calc( var( --kendo-grid-edit-cell-padding-x, 0 ) - #{$kendo-grid-row-resizer-height} );
-        padding-block-end: var( --kendo-grid-edit-cell-padding-x, 0 );
-        position: absolute;
-        background: none;
-        cursor: row-resize;
-        z-index: 2;
-    }
-
-    .k-row-resizer {
-        display: block;
-        height: var( --kendo-grid-row-resizer-height, #{$kendo-grid-row-resizer-height} );
-        width: 100%;
-        background: none;
-     }
-
     .k-grid-footer {
-        border-block-start-width: var( --kendo-grid-border-width, #{$kendo-grid-border-width} );
 
         td,
         .k-table-td {
-            height: var( --kendo-line-height-em, normal );
             border-block-end-width: 0;
         }
     }
@@ -522,100 +140,28 @@
     .k-grouping-row td,
     .k-group-footer .k-table-td,
     .k-grouping-row .k-table-td {
-        font-weight: var( --kendo-grid-header-font-weight, #{$kendo-grid-header-font-weight} );
-    }
-
-    .k-grid-filter-popup {
-        min-width: var( --kendo-grid-column-menu-width, #{$kendo-grid-column-menu-width} );
-        max-width: var( --kendo-grid-column-menu-max-width, #{$kendo-grid-column-menu-max-width} );
-    }
-
-    // Standalone column menu
-    .k-grid-column-menu-standalone a.k-grid-filter {
-        position: initial;
-        display: inline-block;
-        margin-block: calc( #{k-spacing(1)} * -1 );
-        margin-inline: 0;
-        padding-block: k-spacing(1);
-        padding-inline: k-spacing(2);
+        font-weight: $kendo-grid-header-font-weight;
     }
 
     // Filter row
     .k-filter-row {
-        line-height: $kendo-form-line-height;
-
         td,
         .k-table-td,
         .k-table-th {
-            padding-inline: var( --kendo-grid-filter-cell-padding-x, 0 );
-            padding-block: var( --kendo-grid-filter-cell-padding-y, 0 );
-            border-width: 0 0 var( --kendo-grid-cell-border-width-y, #{$kendo-grid-cell-border-width-y} ) var( --kendo-grid-cell-border-width-x, #{$kendo-grid-cell-border-width-x} );
-            white-space: nowrap;
+            padding-inline: $kendo-grid-filter-cell-padding-x;
+            padding-block: $kendo-grid-filter-cell-padding-y;
         }
 
         td:first-child,
         .k-table-td:first-child {
             border-left-width: 0;
         }
-
-        .k-multiselect {
-            height: auto;
-        }
-    }
-
-    .k-filtercell {
-        width: auto;
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-
-        > span,
-        .k-filtercell-wrapper {
-            width: 100%;
-            display: flex;
-            flex-flow: row nowrap;
-            align-items: center;
-            gap: calc( var( --kendo-grid-cell-padding-y, 0 ) / 2 );
-            flex: 1 1 auto;
-
-            > .k-button {
-                flex: none;
-            }
-        }
-    }
-
-    // Grid content
-    .k-grid-content,
-    .k-grid-content-locked {
-        border-color: inherit;
-        outline: 0;
-
-        .k-table-row:last-child > td,
-        .k-table-row:last-child > .k-table-td {
-            border-bottom-width: 0;
-        }
-    }
-
-    .k-grid-content {
-        width: 100%;
-        min-height: 0;
-        overflow-x: auto;
-        overflow-y: scroll;
-        position: relative;
-        flex: 1;
-    }
-
-    // Virtualization
-    .k-virtual-scrollable-wrap {
-        height: 100%;
-        overflow-y: hidden;
-        position: relative;
     }
 
     // Master row
     .k-master-row .k-group-cell {
         border-block-width: 0;
-        border-inline-end-width: var( --kendo-grid-border-width, #{$kendo-grid-border-width} );
+        border-inline-end-width: $kendo-grid-border-width;
     }
 
     .k-master-row.k-expanded td,
@@ -630,151 +176,17 @@
 
     .k-master-row:last-child td,
     .k-master-row:last-child .k-table-td {
-        border-block-end-width: var( --kendo-grid-border-width, #{$kendo-grid-border-width} );
-    }
-
-
-
-    // Edit row
-    .k-grid .k-edit-cell,
-    .k-grid .k-command-cell,
-    .k-grid .k-grid-edit-row td,
-    .k-grid .k-grid-edit-row .k-table-td {
-        padding-inline: var( --kendo-grid-edit-cell-padding-x, 0 );
-        padding-block: var( --kendo-grid-edit-cell-padding-y, 0 );
-        text-overflow: clip;
-    }
-
-    .k-grid .k-edit-cell,
-    .k-grid .k-grid-edit-row td,
-    .k-grid .k-grid-edit-row .k-table-td {
-
-        > input:not([type="checkbox"], [type="radio"]),
-        > select,
-        > .k-widget:not(.k-switch) {
-            width: 100%;
-            vertical-align: middle;
-            box-sizing: border-box;
-        }
-        > .k-radio,
-        > .k-checkbox,
-        > .k-radio-wrap,
-        > .k-checkbox-wrap {
-            vertical-align: middle;
-        }
+        border-block-end-width: $kendo-grid-border-width;
     }
 
-    .k-grid .k-command-cell > .k-button {
-        margin-inline-end: var( --kendo-grid-command-cell-button-spacing, #{$kendo-grid-command-cell-button-spacing} );
-        vertical-align: middle;
-
-        &:last-child {
-            margin-inline-end: unset;
-        }
-    }
-
-
-    // Resize handle
-    .k-grid > .k-resize-handle,
-    .k-grid-header .k-resize-handle {
-        height: 25px;
-        cursor: col-resize;
-        position: absolute;
-        z-index: 2;
-    }
-
-
     // Selection Aggregates
-    .k-selection-aggregates {
-        padding-inline: var( --kendo-grid-selection-aggregates-padding-x, 0 );
-        padding-block: var( --kendo-grid-selection-aggregates-padding-y, 0 );
-        border-width: var( --kendo-grid-selection-aggregates-border-width, #{$kendo-grid-selection-aggregates-border-width} ) 0 0;
-        border-style: solid;
-        line-height: var( --kendo-grid-selection-aggregates-line-height, #{$kendo-grid-selection-aggregates-line-height} );
-        display: flex;
-        justify-content: flex-end;
-        gap: var( --kendo-grid-selection-aggregates-spacing, #{$kendo-grid-selection-aggregates-spacing} );
-        flex-wrap: wrap;
-    }
-
-    .k-selection-aggregates-item-value {
-        font-weight: var( --kendo-grid-selection-aggregates-font-weight, #{$kendo-grid-selection-aggregates-font-weight} );
-    }
-
-
-    // Pager
-    .k-grid-pager {
-        border-width: 1px 0 0;
-        border-color: inherit;
-        font-size: inherit;
-    }
-    .k-grid-pager-top {
-        border-width: 0 0 1px;
-    }
-
-    .k-grid-virtual .k-grid-content {
-        .k-grid-table-wrap {
-            float: left;
-            width: 100%;
-        }
-
-        .k-grid-table {
-            position: relative;
-            float: left;
-            z-index: 1;
-        }
-
-        > .k-height-container {
-            position: relative;
-            float: left;
-        }
-
-        &::after {
-            content: "";
-            display: block;
-            clear: both;
-        }
-    }
-
-    .k-width-container {
-        position: absolute;
-        visibility: hidden;
-    }
-
-    .k-width-container div {
-        height: 1px;
-    }
-
-    .k-grid-add-row td,
-    .k-grid-add-row .k-table-td {
-        border-bottom-style: solid;
-        border-bottom-width: 1px;
-    }
-
-
-    // Locked columns
-    .k-grid-lockedcolumns {
-        white-space: nowrap;
-    }
-
-    .k-grid-content,
-    .k-grid-content-locked {
-        white-space: normal;
-    }
 
     .k-grid-content-locked,
     .k-grid-footer-locked,
     .k-grid-header-locked {
-        flex: 0 0 auto;
-        display: inline-block;
-        vertical-align: top;
-        overflow: hidden;
-        position: relative;
-        border-style: solid;
         border-block-width: 0;
         border-inline-start-width: 0;
         border-inline-end-width: 1px;
-        box-sizing: content-box;
 
         td,
         .k-table-td,
@@ -782,10 +194,6 @@
             border-inline-start-width: 1px;
         }
 
-        & + .k-grid-content.k-auto-scrollable {
-            display: inline-block;
-        }
-
         .k-grouping-row .k-group-cell,
         .k-grouping-row + .k-table-row .k-group-cell {
             border-inline-end-width: 0;
@@ -796,471 +204,24 @@
         }
     }
 
-    .k-grid-content,
-    .k-grid-footer-wrap,
-    .k-grid-header-wrap {
-        flex: 1 1 auto;
-        display: inline-block;
-        vertical-align: top;
-
-        &.k-auto-scrollable {
-            display: block;
-        }
-    }
-
-    .k-grid-header-locked > .k-grid-header-table,
-    .k-grid-header-wrap > .k-grid-header-table {
-        margin-block-end: -1px;
-    }
-
-    .k-grid-header .k-table-th.k-grid-header-sticky,
-    .k-grid-header .k-filter-row .k-grid-header-sticky,
-    .k-grid .k-grid-content-sticky,
-    .k-grid .k-grid-row-sticky,
-    .k-grid .k-grid-footer-sticky {
-        position: sticky;
-        z-index: 2;
-
-        &.k-edit-cell {
-            overflow: visible;
-            z-index: 3;
-        }
-    }
-
-    .k-master-row .k-grid-content-sticky::before,
-    .k-master-row.k-grid-row-sticky .k-table-td::before {
-        content: "";
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        z-index: -1;
-    }
-
-    kendo-grid {
-        .k-table-row.k-grid-row-sticky {
-            border: 0;
-            position: static;
-            z-index: auto;
-        }
-
-        .k-grid-row-sticky td,
-        .k-grid-row-sticky .k-table-td {
-            border-block-start-width: var( --kendo-grid-border-width, #{$kendo-grid-border-width} );
-            border-block-end-width: var( --kendo-grid-border-width, #{$kendo-grid-border-width} );
-            position: sticky;
-            top: inherit;
-            bottom: inherit;
-        }
-
-        .k-grid-row-sticky td,
-        .k-grid-row-sticky .k-table-td {
-            z-index: 2;
-        }
-
-        .k-grid-row-sticky td.k-grid-content-sticky,
-        .k-grid-row-sticky.k-table-alt-row td.k-grid-content-sticky,
-        .k-grid-row-sticky .k-table-td.k-grid-content-sticky,
-        .k-grid-row-sticky.k-table-alt-row .k-table-td.k-grid-content-sticky {
-            z-index: 3;
-        }
-
-        // Locked and sticky
-        .k-grid-header-locked .k-table-th.k-grid-header-sticky:last-child,
-        .k-grid-content-locked .k-table-row .k-grid-content-sticky:last-child {
-            border-inline-end-width: 0;
-        }
-
-        .k-grid-header .k-grid-column-menu,
-        .k-grid-header .k-grid-header-menu {
-            z-index: 1;
-        }
-    }
-
-    .k-grid-content-sticky.k-grid-row-sticky {
-        z-index: 3;
-    }
-
-    .k-grid .k-grid-header-sticky,
-    .k-grid .k-grid-content-sticky,
-    .k-grid .k-grid-footer-sticky {
-        border-inline-end-width: var( --kendo-grid-sticky-cell-border-width, #{$kendo-grid-sticky-cell-border-width} );
-
-        &:not([style*="display: none"]) + td,
-        &:not([style*="display: none"]) + .k-table-td,
-        &:not([style*="display: none"]) + .k-table-th {
-            border-inline-start-width: 0;
-        }
-    }
-
-    .k-grid .k-grid-row-sticky {
-        border-block-start-width: var( --kendo-grid-border-width, #{$kendo-grid-border-width} );
-        border-block-end-width: var( --kendo-grid-border-width, #{$kendo-grid-border-width} );
+    .k-grid .k-table .k-grid-header-sticky,
+    .k-grid .k-table .k-grid-content-sticky,
+    .k-grid .k-table .k-grid-footer-sticky {
+        border-inline-end-width: $kendo-grid-sticky-cell-border-width;
     }
 
     .k-grid-header-sticky.k-table-th.k-grid-no-left-border.k-first {
+        border-inline-end-width: $kendo-grid-sticky-cell-border-width;
         border-inline-start-width: 0;
-        border-inline-end-width: var( --kendo-grid-sticky-cell-border-width, #{$kendo-grid-sticky-cell-border-width} );
     }
 
-    .k-grid.k-grid-no-scrollbar {
-
-        .k-grid-header-wrap,
-        .k-grid-footer-wrap {
-            margin: 0;
-            border-width: 0;
-        }
-
-        .k-grid-header,
-        .k-grid-footer {
-            padding: 0;
-        }
-
-        .k-grid-content {
-            overflow-y: auto;
-        }
-    }
-
-    .k-grid-norecords {
-        text-align: center;
-    }
-
-    div.k-grid-norecords {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-    }
-
-    .k-grid-norecords-template {
-        box-sizing: border-box;
-        margin-block: 0;
-        margin-inline: auto;
-        width: 20em;
-        height: 4em;
-        border: 1px solid;
-        line-height: 4em;
-    }
-
-    .k-table-th > .k-cell-inner {
-        margin-block: calc( var( --kendo-grid-header-padding-y, 0 ) * -1 );
-        margin-inline: calc( var( --kendo-grid-header-padding-x, 0 ) * -1 );
-    }
-
-    .k-filterable {
-        > .k-cell-inner {
-            .k-link {
-                padding-inline-end: 0;
-            }
-        }
-    }
-
-    .k-cell-inner {
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        justify-content: inherit;
-        overflow: hidden;
-
-        > .k-link {
-            padding-inline: var( --kendo-grid-header-padding-x, 0 );
-            padding-block: var( --kendo-grid-header-padding-y, 0 );
-            width: auto;
-            display: flex;
-            flex-flow: row nowrap;
-            align-items: center;
-            justify-content: inherit;
-            flex: 1;
-            overflow: hidden;
-
-            > .k-icon {
-                margin-left: 0;
-                display: inline-block;
-                flex-shrink: 0;
-            }
-
-        }
-
-        .k-sort-order {
-            flex-shrink: 0;
-            line-height: normal;
-        }
-
-        .k-grid-filter,
-        .k-header-column-menu,
-        .k-grid-header-menu {
-            position: static;
-            margin-inline-end: var( --kendo-grid-header-menu-spacing, #{$kendo-grid-header-menu-spacing} );
-        }
-
-        .k-grid-filter,
-        .k-header-column-menu,
-        .k-grid-header-menu,
-        .k-hierarchy-cell .k-icon {
-            text-align: center;
-            display: inline-block;
-            flex-shrink: 0;
-        }
-    }
-
-    .k-column-title {
-        min-width: 0;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        flex-shrink: 1;
-        overflow: hidden;
-    }
-
-    // Grid Sizes
-    @each $size, $size-props in $kendo-grid-sizes {
-        $_header-padding-x: map.get( $size-props, header-padding-x );
-        $_header-padding-y: map.get( $size-props, header-padding-y );
-        $_grouping-header-padding-x: map.get( $size-props, grouping-header-padding-x );
-        $_grouping-header-padding-y: map.get( $size-props, grouping-header-padding-y );
-        $_cell-padding-x: map.get( $size-props, cell-padding-x );
-        $_cell-padding-y: map.get( $size-props, cell-padding-y );
-        $_filter-cell-padding-x: map.get( $size-props, filter-cell-padding-x );
-        $_filter-cell-padding-y: map.get( $size-props, filter-cell-padding-y );
-        $_edit-cell-padding-x: map.get( $size-props, edit-cell-padding-x );
-        $_edit-cell-padding-y: map.get( $size-props, edit-cell-padding-y );
-        $_button-padding-y: map.get( $size-props, button-padding-y );
-        $_button-calc-size: map.get( $size-props, button-calc-size );
-        $_button-line-height: map.get( $size-props, button-line-height );
-        $_group-dropclue-height: map.get( $size-props, group-dropclue-height );
-        $_selection-aggregates-padding-x: map.get( $size-props, selection-aggregates-padding-x );
-        $_selection-aggregates-padding-y: map.get( $size-props, selection-aggregates-padding-y );
-
-        .k-grid .k-grid-#{$size},
-        .k-grid-#{$size} {
-            --kendo-grid-header-padding-x: var( --kendo-grid-header-padding-x-#{$size}, #{$_header-padding-x} );
-            --kendo-grid-header-padding-y: var( --kendo-grid-header-padding-y-#{$size}, #{$_header-padding-y} );
-            --kendo-grid-grouping-header-padding-x: var( --kendo-grid-grouping-header-padding-x-#{$size}, #{$_grouping-header-padding-x} );
-            --kendo-grid-grouping-header-padding-y: var( --kendo-grid-grouping-header-padding-y-#{$size}, #{$_grouping-header-padding-y} );
-            --kendo-grid-cell-padding-x: var( --kendo-grid-cell-padding-x-#{$size}, #{$_cell-padding-x} );
-            --kendo-grid-cell-padding-y: var( --kendo-grid-cell-padding-y-#{$size}, #{$_cell-padding-y} );
-            --kendo-grid-filter-cell-padding-x: var( --kendo-grid-filter-cell-padding-x-#{$size}, #{$_filter-cell-padding-x} );
-            --kendo-grid-filter-cell-padding-y: var( --kendo-grid-filter-cell-padding-y-#{$size}, #{$_filter-cell-padding-y} );
-            --kendo-grid-edit-cell-padding-x: var( --kendo-grid-edit-cell-padding-x-#{$size}, #{$_edit-cell-padding-x} );
-            --kendo-grid-edit-cell-padding-y: var( --kendo-grid-edit-cell-padding-y-#{$size}, #{$_edit-cell-padding-y} );
-            --kendo-button-padding-y: var( --kendo-button-padding-y-#{$size}, #{$_button-padding-y} );
-            --kendo-button-calc-size: var( --kendo-button-calc-size-#{$size}, #{$_button-calc-size} );
-            --kendo-button-line-height: var( --kendo-button-line-height-#{$size}, #{$_button-line-height} );
-            --kendo-grid-group-drop-hint-height: var( --kendo-group-dropclue-height-#{$size}, #{$_group-dropclue-height} );
-            --kendo-grid-selection-aggregates-padding-x: var( --kendo-grid-selection-aggregates-padding-x-#{$size}, #{$_selection-aggregates-padding-x} );
-            --kendo-grid-selection-aggregates-padding-y: var( --kendo-grid-selection-aggregates-padding-y-#{$size}, #{$_selection-aggregates-padding-y} );
-        }
-    }
-
-    // Grid stack layout
-    .k-grid-stack {
-        .k-table-td,
-        .k-grid-edit-row .k-table-td {
-            padding-inline: $kendo-grid-stack-cell-padding-x;
-            padding-block: $kendo-grid-stack-cell-padding-y;
-        }
-
-        // Grouping, hierarchy
-        .k-group-col,
-        .k-hierarchy-col {
-            width: $kendo-grid-stack-hierarchy-col-width;
-        }
-
-        .k-grouping-row {
-            p {
-                gap: k-spacing(1);
-            }
-
-            .k-icon {
-                padding: k-spacing(1);
-                margin: 0;
-            }
-        }
-
-        // Column template
-        .k-grid-column-template {
-            display: flex;
-            justify-content: flex-start;
-            flex-direction: column;
-            gap: 0;
-            padding-inline-start: k-spacing(1);
-        }
-    }
-
-    .k-grid-stack-row {
-        display: grid;
-        gap: $kendo-grid-stack-column-gap;
-    }
-
-    .k-grid-edit-row .k-grid-stack-row {
-        gap: $kendo-grid-stack-editable-column-gap;
-    }
-
-    .k-grid-stack-header {
-        font-size: $kendo-grid-stack-header-font-size;
-        font-weight: $kendo-grid-stack-header-font-weight;
-    }
-
-    .k-grid-stack-content {
-        // Reserve min-height for the cell content if empty
-        min-height: calc( $kendo-grid-font-size * $kendo-grid-line-height );
-    }
-
-    .k-grid-stack-cell {
-        &:focus,
-        &.k-focus {
-            outline-offset: k-spacing(0.5);
-        }
-    }
-    // Command cell
-    .k-grid-stack-cell.k-command-cell {
-        display: flex;
-        flex-wrap: wrap;
-        padding: 0;
-        grid-column: 1 / -1;
-    }
-
-    // Dirty cell
-    .k-grid-stack-cell .k-dirty {
-        inset-inline-start: auto;
-        inset-inline-end: 0;
-    }
-
-    .k-grid-stack-expandable .k-table-td {
-        position: relative;
-        padding-inline: $kendo-grid-stack-cell-padding-x;
-        padding-block: $kendo-grid-stack-cell-padding-y;
-
-        &::before {
-            content: '';
-            position: absolute;
-            display: block;
-            width: 100%;
-            height: $kendo-grid-stack-expandable-shadow-height;
-            box-shadow: $kendo-grid-stack-expandable-shadow;
-            top: calc( -1 * #{$kendo-grid-stack-expandable-shadow-height} );
-            left: 0;
-        }
-    }
-
-    .k-drag-cell .k-grid-stack-content {
-        display: flex;
-        align-items: center;
-        gap: k-spacing(2);
-        padding-block: k-spacing(2.5);
-        user-select: none;
-        touch-action: none;
-    }
-
-    // Expandable data row
-    .k-grid-toggle {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        pointer-events: none;
-
-        .k-icon {
-            pointer-events: auto;
-            cursor: pointer;
-        }
-    }
-
-    // PDF export
-    .k-loading-pdf-mask {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        top: 0;
-        left: 0;
-        z-index: 100;
-
-        > .k-i-loading {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            font-size: 64px;
-        }
-
-        .k-loading-pdf-progress {
-            margin: auto;
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
-        }
-
-    }
-
-    .k-pdf-export .k-loading-pdf-mask {
-        display: none;
-    }
-
-    .k-grid-pdf-export-element {
-        position: absolute;
-        left: -10000px;
-        top: -10000px;
-
-        .k-filter-row {
-            display: none;
-        }
-    }
-
-    // Remove Grid scrollbar during built-in export
-    .k-pdf-export-shadow {
-        .k-grid {
-            float: left;
-            width: auto !important; // stylelint-disable-line declaration-no-important
-        }
-
-        // Remove all sizes and scrolling
-        .k-grid,
-        .k-grid-content,
-        .k-grid-content-locked {
-            height: auto !important; // stylelint-disable-line declaration-no-important
-            overflow: visible;
-        }
-
-        .k-grid-header-locked {
-            & + .k-grid-header-wrap,
-            & + .k-grid-content,
-            & + .k-grid-footer-wrap {
-                width: auto !important; // stylelint-disable-line declaration-no-important
-            }
-        }
-
-        // Remove empty space reserved above the scrollbar
-        .k-grid-header,
-        .k-grid[data-role="grid"] .k-grid-footer {
-            padding: 0 !important; // stylelint-disable-line declaration-no-important
-        }
-    }
-
-    // Filter menu
-    .k-filter-menu-popup {
-        min-width: var( --kendo-grid-column-menu-width, #{$kendo-grid-column-menu-width} );
-        max-width: var( --kendo-grid-column-menu-max-width, #{$kendo-grid-column-menu-max-width} );
-    }
-    .k-filter-menu {
-        box-sizing: border-box;
-    }
     .k-filter-menu-container {
-        padding-block-end: var( --kendo-filter-menu-container-padding-y, #{$kendo-filter-menu-container-padding-y} );
-        padding-inline: var( --kendo-filter-menu-container-padding-x, #{$kendo-filter-menu-container-padding-x} );
-        box-sizing: border-box;
-        display: flex;
-        flex-flow: column nowrap;
-        align-items: stretch;
-        gap: var( --kendo-grid-column-menu-spacing, #{$kendo-grid-column-menu-spacing} );
+        padding: 0 $kendo-filter-menu-container-padding-x $kendo-filter-menu-container-padding-y;
+        gap: $kendo-grid-column-menu-spacing;
 
-        .k-filter-and {
-            width: min-content;
-            align-self: start;
-        }
 
         .k-actions {
-            margin: 0;
-            padding-block-start: calc( var( --kendo-filter-menu-container-padding-y, #{$kendo-filter-menu-container-padding-y} ) - var( --kendo-grid-column-menu-spacing, #{$kendo-grid-column-menu-spacing} ) );
+            padding-block-start: calc( #{$kendo-filter-menu-container-padding-y} - #{$kendo-grid-column-menu-spacing} );
             padding-block-end: 0;
             padding-inline: 0;
         }
@@ -1275,220 +236,43 @@
         kendo-treelist-date-filter-menu,
         kendo-treelist-numeric-filter-menu,
         kendo-treelist-filter-menu-input-wrapper {
-            display: flex;
-            flex-flow: column nowrap;
-            align-items: stretch;
-            gap: var( --kendo-grid-column-menu-spacing, #{$kendo-grid-column-menu-spacing} );
-        }
-    }
-
-    .k-filter-menu.k-popup,
-    .k-grid-filter-popup.k-popup {
-        .k-filter-menu-container {
-            min-width: var( --kendo-grid-column-menu-width, #{$kendo-grid-column-menu-width} );
-            max-width: var( --kendo-grid-column-menu-max-width, #{$kendo-grid-column-menu-max-width} );
+            gap: $kendo-grid-column-menu-spacing;
         }
     }
 
     .k-multicheck-wrap {
-        margin: 0;
-        padding: 0;
-        font-size: var( --kendo-grid-column-menu-multicheck-font-size, #{$kendo-grid-column-menu-multicheck-font-size} );
-        line-height: var( --kendo-grid-column-menu-multicheck-line-height, #{$kendo-grid-column-menu-multicheck-line-height} );
-        white-space: nowrap;
-        list-style: none;
-
-        .k-item,
-        .k-check-all-wrap {
-            padding-block: var( --kendo-grid-column-menu-item-padding-y, #{$kendo-grid-column-menu-item-padding-y} );
-            padding-inline: var( --kendo-grid-column-menu-item-padding-x, #{$kendo-grid-column-menu-item-padding-x} );
-            display: flex;
-            flex-flow: row nowrap;
-        }
-    }
-
-    .k-filter-selected-items {
-        font-weight: var( --kendo-font-weight-bold, normal );
-        line-height: normal;
-        white-space: nowrap;
-    }
-
-    // autofitting requires automatic table layout to measure sizes
-    // stylelint-disable declaration-no-important
-    .k-autofitting {
-        width: auto !important;
-        table-layout: auto !important;
-
-        .k-table-th,
-        td,
-        .k-table-td {
-            white-space: nowrap !important;
-        }
-
-        .k-detail-row {
-            display: none !important;
-        }
-    }
-    // stylelint-enable declaration-no-important
-
-    // Grid assistant window
-    .k-grid-assistant-window .k-window-content {
-        padding: 0;
-        @include border-bottom-radius( inherit );
+        font-size: $kendo-grid-column-menu-multicheck-font-size;
+        line-height: $kendo-grid-column-menu-multicheck-line-height;
     }
 
     // Column menu
     .k-column-menu-popup,
     .k-grid-columnmenu-popup {
-        min-width: var( --kendo-grid-column-menu-width, #{$kendo-grid-column-menu-width} );
-        box-sizing: border-box;
 
         &.k-popup {
-            max-width: var( --kendo-grid-column-menu-max-width, #{$kendo-grid-column-menu-max-width} );
-        }
-
-        .k-actions {
-            margin: 0;
-        }
-
-    }
-    .k-column-menu {
-        box-sizing: border-box;
-
-        .k-menu:not(.k-context-menu) {
-            font-weight: var( --kendo-font-weight, 400 );
-        }
-
-        .k-expander {
-            border: 0;
-            background: inherit;
-
-            .k-columnmenu-item {
-                display: flex;
-                align-items: center;
-            }
-        }
-
-        .k-columnmenu-indicators {
-            padding-inline: k-spacing(1);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        // TODO: Check if k-columnmenu-item should not be flex by default
-        .k-columnmenu-item:has(> .k-columnmenu-item-actions, > .k-columnmenu-indicators) {
-            display: flex;
-            align-items: center;
-        }
-    }
-    .k-column-menu-tabbed {
-        border-radius: var( --kendo-tabstrip-item-border-radius, #{$kendo-tabstrip-item-border-radius} ) var( --kendo-tabstrip-item-border-radius, #{$kendo-tabstrip-item-border-radius} ) 0 0;
-
-        .k-tabstrip-items {
-            margin: calc( var( --kendo-tabstrip-item-border-width, #{$kendo-tabstrip-item-border-width} ) * -1 ) calc( var( --kendo-tabstrip-item-border-width, #{$kendo-tabstrip-item-border-width} ) * -1 ) 0;
-
-            .k-item {
-                flex: 1;
-            }
-
-            .k-link {
-                justify-content: center;
-            }
-        }
-
-        .k-tabstrip-content {
-            padding-inline: var( --kendo-grid-column-menu-tabbed-tabstrip-content-padding-x, #{$kendo-grid-column-menu-tabbed-tabstrip-content-padding-x} );
-            padding-block: var( --kendo-grid-column-menu-tabbed-tabstrip-content-padding-y, #{$kendo-grid-column-menu-tabbed-tabstrip-content-padding-y} );
-            border-width: 0;
+            padding: 0;
+            max-width: $kendo-grid-column-menu-max-width;
         }
-    }
 
-    .k-column-list {
-        padding: 0;
-        margin: 0;
-        list-style: none;
     }
 
-    .k-column-chooser-title,
     .k-column-list-item {
-        padding-block: var( --kendo-grid-column-menu-item-padding-y, #{$kendo-grid-column-menu-item-padding-y} );
-        padding-inline: var( --kendo-grid-column-menu-item-padding-x, #{$kendo-grid-column-menu-item-padding-x} );
-    }
-
-    .k-column-list-item {
-        margin: 0;
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        gap: var( --kendo-grid-column-menu-item-gap, #{$kendo-grid-column-menu-item-gap} );
-        cursor: pointer;
-        position: relative;
-
-        .k-checkbox-label {
-            margin: 0;
-        }
-
-        &:focus {
-            outline: none;
-        }
-    }
-
-    .k-columns-items-wrap {
-        padding-block: var( --kendo-grid-column-menu-items-wrap-padding-y, #{$kendo-grid-column-menu-items-wrap-padding-y} );
-        padding-inline: var( --kendo-grid-column-menu-items-wrap-padding-x, #{$kendo-grid-column-menu-items-wrap-padding-x} );
-    }
-
-    .k-columnmenu-item {
-        padding-block: var( --kendo-grid-column-menu-item-padding-y, #{$kendo-grid-column-menu-item-padding-y} );
-        padding-inline: var( --kendo-grid-column-menu-item-padding-x, #{$kendo-grid-column-menu-item-padding-x} );
-        outline: 0;
-        cursor: pointer;
-
-        > .k-icon,
-        > .k-expander-indicator {
-            margin-inline-end: var( --kendo-grid-column-menu-item-icon-spacing, #{$kendo-grid-column-menu-item-icon-spacing} );
-        }
-    }
-
-    .k-columnmenu-item-wrapper + .k-columnmenu-item-wrapper,
-    .k-column-menu-footer {
-        border-top: 1px solid;
-        border-top-color: color-mix(in srgb, k-color(border) 16%, transparent);
-    }
-
-    .k-columnmenu-item-content {
-        overflow: hidden;
-    }
-
-    .k-column-menu-group-header {
-        padding-block: var( --kendo-grid-column-menu-group-header-padding-y, #{$kendo-grid-column-menu-group-header-padding-y} );
-        padding-inline: var( --kendo-grid-column-menu-group-header-padding-x, #{$kendo-grid-column-menu-group-header-padding-x} );
-        display: flex;
-        flex: 0 0 auto;
-        position: relative;
-        user-select: none;
+        gap: $kendo-grid-column-menu-item-gap;
     }
 
     .k-column-menu-group-header-text {
-        border-bottom-width: var( --kendo-grid-column-menu-group-header-border-width, #{$kendo-grid-column-menu-group-header-border-width} );
-        border-bottom-style: var( --kendo-grid-column-menu-group-header-border-style, #{$kendo-grid-column-menu-group-header-border-style} );
-        font-size: var( --kendo-grid-column-menu-group-header-font-size, #{$kendo-grid-column-menu-group-header-font-size} );
-        line-height: var( --kendo-grid-column-menu-group-header-line-height, #{$kendo-grid-column-menu-group-header-line-height} );
-        font-weight: var( --kendo-grid-column-menu-group-header-font-weight, #{$kendo-grid-column-menu-group-header-font-weight} );
-        text-transform: var( --kendo-grid-column-menu-group-header-text-transform, #{$kendo-grid-column-menu-group-header-text-transform} );
-        flex: 1 1 auto;
+        border-bottom-style: $kendo-grid-column-menu-group-header-border-style;
+        font-weight: $kendo-grid-column-menu-group-header-font-weight;
     }
 
-    .k-rtl .k-grid-virtual .k-grid-content,
-    [dir="rtl"] .k-grid-virtual .k-grid-content,
-    .k-rtl.k-grid-virtual .k-grid-content,
-    [dir="rtl"].k-grid-virtual .k-grid-content {
+    // Grid Sizes
+    @each $size, $size-props in $kendo-grid-sizes {
+        $_cell-padding-y: map.get( $size-props, cell-padding-y );
 
-        .k-grid-table-wrap,
-        .k-grid-table,
-        > .k-height-container {
-            float: right;
+        // Resizing wrapper
+        .k-grid-#{$size} .k-resizer-wrap {
+            padding-block-start: calc( #{$_cell-padding-y} - #{$kendo-grid-row-resizer-height} );
+            padding-block-end: $_cell-padding-y;
         }
     }