@progress/kendo-theme-fluent 5.12.1-dev.0 → 5.12.1-dev.2

package/scss/grid/_layout.scss

@@ -1,8 +1,11 @@
-@use "../core/_variables.scss" as *;
+@use "sass:map";
+@use "sass:math";
+@use "../core/" as *;
 @use "../button/_variables.scss" as *;
+@use "../chip/_variables.scss" as *;
 @use "../forms/_variables.scss" as *;
 @use "../table/_variables.scss" as *;
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-grid--layout() {
 
@@ -37,7 +40,7 @@
             overflow: hidden;
         }
 
-        table {
+        .k-table {
             margin: 0;
             width: 100%;
             max-width: none;
@@ -47,27 +50,35 @@
             border-spacing: 0;
             empty-cells: show;
             outline: 0;
+            box-sizing: content-box;
+            table-layout: fixed;
         }
-        thead,
-        tbody,
-        tfoot {
+
+        .k-table-thead,
+        .k-table-tbody,
+        .k-table-tfoot {
             text-align: start;
             border-color: inherit;
         }
-        tr {
+
+        .k-table-row {
             border-color: inherit;
         }
-        th,
-        td {
-            padding-inline: var( --kendo-grid-cell-padding-x, #{$kendo-grid-cell-padding-x} );
-            padding-block: var( --kendo-grid-cell-padding-y, #{$kendo-grid-cell-padding-y} );
+
+        .k-table-th,
+        .k-table-td {
+            border-width: 0;
+            padding-inline: var( --INTERNAL--kendo-grid-cell-padding-x, 0 );
+            padding-block: var( --INTERNAL--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;
@@ -80,21 +91,26 @@
             .k-placeholder-line {
                 width: var( --kendo-grid-cell-placeholder-width, #{$kendo-grid-cell-placeholder-width} );
             }
+
+            > .k-radio,
+            > .k-radio-wrap,
+            > .k-checkbox,
+            > .k-checkbox-wrap {
+                vertical-align: top;
+            }
         }
-        th {
-            padding-inline: var( --kendo-grid-header-padding-x, #{$kendo-grid-header-padding-x} );
-            padding-block: var( --kendo-grid-header-padding-y, #{$kendo-grid-header-padding-y} );
-            border-block-start-width: 0;
+
+        .k-table-th {
+            padding-inline: var( --INTERNAL--kendo-grid-header-padding-x, 0 );
+            padding-block: var( --INTERNAL--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} );
-            border-inline-end-width: 0;
             white-space: nowrap;
         }
-        td {
-            border-block-start-width: 0;
+
+        .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} );
-            border-inline-end-width: 0;
             vertical-align: middle;
         }
 
@@ -106,7 +122,6 @@
             text-decoration: none;
         }
 
-        table,
         .k-grid-header-wrap {
             box-sizing: content-box;
         }
@@ -124,32 +139,35 @@
             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 + tr 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} );
         }
+
         .k-grouping-row .k-group-cell,
-        .k-grouping-row + tr .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 ) - #{$kendo-table-cell-padding-x} );
+            margin-inline-start: calc( ( var( --kendo-icon-size, 1rem ) / 2 ) - var( --INTERNAL--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} );
         }
-        .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} );
         }
 
@@ -161,7 +179,7 @@
 
             > .k-icon {
                 padding-inline: 0;
-                padding-block: $kendo-table-cell-padding-y;
+                padding-block: var( --INTERNAL--kendo-grid-cell-padding-y, 0 );
                 width: 100%;
                 height: 100%;
                 display: inline-block;
@@ -239,93 +257,44 @@
 
     // Grouping header
     .k-grouping-header {
-        padding-inline: var( --kendo-grid-grouping-header-padding-x, #{$kendo-grid-grouping-header-padding-x} );
-        padding-block: var( --kendo-grid-grouping-header-padding-y, #{$kendo-grid-grouping-header-padding-y} );
+        padding-inline: var( --INTERNAL--kendo-grid-grouping-header-padding-x, 0 );
+        padding-block: var( --INTERNAL--kendo-grid-grouping-header-padding-y, 0 );
         border-width: 0 0 1px;
         border-style: solid;
         border-color: inherit;
         white-space: normal;
-        flex-shrink: 0;
-        display: block;
+        display: flex;
+        align-items: center;
+        gap: var( --INTERNAL--kendo-grid-grouping-header-padding-y, 0 );
         position: relative;
+        flex-wrap: wrap;
 
         &::before {
             content: "";
-            height: $kendo-button-calc-size;
+            height: $kendo-chip-calc-size;
             display: inline-block;
             vertical-align: middle;
-        }
-    }
-
-    .k-grouping-header-flex {
-        display: flex;
-        flex-flow: row wrap;
-        align-items: center;
-        gap: var( --kendo-grid-grouping-header-padding-y, #{$kendo-grid-grouping-header-padding-y} );
-
-        &::before {
-            margin-left: calc( var( --kendo-grid-grouping-header-padding-y, #{$kendo-grid-grouping-header-padding-y} ) * -1 );
+            margin-left: calc( var( --INTERNAL--kendo-grid-grouping-header-padding-y, 0 ) * -1 );
         }
 
-        .k-group-indicator {
-            margin: 0;
+        .k-chip-list {
+            flex-grow: 0;
+            display: contents;
         }
-    }
 
-    // override for angular
-    .k-grid .k-indicator-container {
-        margin-block: calc( var( --kendo-grid-grouping-header-padding-y, #{$kendo-grid-grouping-header-padding-y} ) * -1 );
-        margin-inline: 0;
-        padding-block: var( --kendo-grid-grouping-header-padding-y, #{$kendo-grid-grouping-header-padding-y} );
-        padding-inline: 0;
-    }
-    .k-grid .k-indicator-container:last-child {
-        flex-grow: 1;
-    }
-
-    .k-group-indicator {
-        margin: 0;
-        padding-inline: var( --kendo-grid-group-indicator-padding-x, #{$kendo-grid-group-indicator-padding-x} );
-        padding-block: var( --kendo-grid-group-indicator-padding-y, #{$kendo-grid-group-indicator-padding-y} );
-        border-width: var( --kendo-grid-group-indicator-border-width, #{$kendo-grid-group-indicator-border-width} );
-        border-style: solid;
-        border-radius: var( --kendo-grid-group-indicator-border-radius, #{$kendo-grid-group-indicator-border-radius} );
-        display: inline-flex;
-        flex-direction: row;
-        align-items: center;
-        align-content: center;
-        vertical-align: top;
-        box-sizing: border-box;
-
-        .k-link,
-        .k-button-flat {
-            padding: 0;
-            border-width: 0;
+        > .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 );
             display: inline-flex;
+            align-self: stretch;
             align-items: center;
         }
-
-        .k-link .k-icon {
-            margin-inline-start: calc( ( var( --kendo-icon-spacing, .5rem ) / 2 ) * -1 );
-            margin-inline-end: var( --kendo-icon-spacing, .5rem );
-        }
-
-        .k-button-flat {
-            margin-inline-start: var( --kendo-icon-spacing, .5rem );
-            margin-inline-end: calc( var( --kendo-icon-spacing, .5rem ) * -1 );
-            padding: 0;
-            width: auto;
-            height: auto;
-        }
-    }
-
-    .k-group-indicator + .k-group-indicator {
-        margin-inline-start: calc( var( --kendo-grid-group-indicator-gap, #{$kendo-grid-group-indicator-gap} ) / 2 );
     }
 
     .k-grouping-dropclue {
         width: calc( var( --kendo-grid-group-dropclue-size, #{$kendo-grid-group-dropclue-size} ) * 2 );
-        height: var( --kendo-grid-group-dropclue-height, #{$kendo-grid-group-dropclue-height} );
+        height: var( --INTERNAL--kendo-grid-group-dropclue-height, 1rem );
         position: absolute;
         top: var( --kendo-grid-group-dropclue-top, #{$kendo-grid-group-dropclue-top} );
         box-sizing: content-box;
@@ -371,7 +340,7 @@
         position: relative;
         overflow: hidden;
 
-        tr:not(:only-child) th {
+        .k-table-row:not(:only-child) .k-table-th {
             border-inline-start-width: 1px;
         }
     }
@@ -388,10 +357,6 @@
         border-style: solid;
         border-color: inherit;
         flex: 0 0 auto;
-
-        table {
-            table-layout: fixed;
-        }
     }
 
     div.k-grid-header,
@@ -405,7 +370,7 @@
         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} );
 
-        table {
+        .k-table  {
             margin-bottom: calc( var( --kendo-grid-header-border-width-y, #{$kendo-grid-header-border-width-y} ) * -1 );
         }
 
@@ -414,7 +379,7 @@
             touch-action: none;
         }
 
-        .k-header {
+        .k-table-th {
             position: relative;
             vertical-align: bottom;
             z-index: 1;
@@ -429,48 +394,44 @@
             }
         }
 
-        .k-header > .k-link {
-            margin-block: calc( var( --kendo-grid-header-padding-y, #{$kendo-grid-header-padding-y} ) * -1 );
-            margin-inline: calc( var( --kendo-grid-header-padding-x, #{$kendo-grid-header-padding-x} ) * -1 );
-            padding-block: var( --kendo-grid-header-padding-y, #{$kendo-grid-header-padding-y} );
-            padding-inline: var( --kendo-grid-header-padding-x, #{$kendo-grid-header-padding-x} );
+        .k-table-th > .k-link {
+            margin-block: calc( var( --INTERNAL--kendo-grid-header-padding-y, 0 ) * -1 );
+            margin-inline: calc( var( --INTERNAL--kendo-grid-header-padding-x, 0 ) * -1 );
+            padding-block: var( --INTERNAL--kendo-grid-header-padding-y, 0 );
+            padding-inline: var( --INTERNAL--kendo-grid-header-padding-x, 0 );
             line-height: inherit;
             display: block;
             overflow: hidden;
             text-overflow: ellipsis;
             outline: 0;
 
-            .k-icon {
+            > .k-icon {
                 margin-inline-start: var( --kendo-grid-sort-icon-spacing, #{$kendo-grid-sort-icon-spacing} );
             }
         }
 
-        .k-with-icon,
-        .k-filterable {
-            padding-inline-end: var( --kendo-grid-filterable-icon-spacing, #{$kendo-grid-filterable-icon-spacing} );
-        }
 
-        .k-header > .k-link:focus {
+        .k-table-th > .k-link:focus {
             text-decoration: none;
         }
 
         .k-grid-filter,
         .k-header-column-menu,
         .k-grid-header-menu {
-            padding-block: var( --kendo-grid-column-menu-button-padding-y, #{$kendo-grid-column-menu-button-padding-y} );
-            padding-inline: var( --kendo-grid-column-menu-button-padding-x, #{$kendo-grid-column-menu-button-padding-x} );
-            width: var( --kendo-grid-column-menu-button-width, #{$kendo-grid-column-menu-button-width} );
-            height: var( --kendo-grid-column-menu-button-height, #{$kendo-grid-column-menu-button-height} );
+            padding-block: var(--INTERNAL--kendo-button-padding-y, 0 );
+            padding-inline: var(--INTERNAL--kendo-button-padding-y, 0 );
+            width: var(--INTERNAL--kendo-button-calc-size, auto );
+            height: var(--INTERNAL--kendo-button-calc-size, auto );
             box-sizing: border-box;
             outline: 0;
-            line-height: var( --kendo-grid-column-menu-button-line-height, #{$kendo-grid-column-menu-button-line-height} );
+            line-height: var(--INTERNAL--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, #{$kendo-grid-header-padding-y} ) + #{ $kendo-line-height-em / 2 } - #{ $kendo-button-inner-calc-size / 2 } );
+            inset-block-end: calc( var( --INTERNAL--kendo-grid-header-padding-y, 0 ) + ( #{$kendo-line-height-em} / 2 ) - ( #{$kendo-button-inner-calc-size} / 2 ) );
             z-index: 1;
 
             &:hover {
@@ -478,7 +439,8 @@
             }
         }
 
-        .k-cell-inner > .k-link > .k-icon {
+        .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} );
         }
@@ -504,16 +466,16 @@
     .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;
         }
     }
 
-    .k-grid-footer td,
-    .k-grid-header th,
-    .k-group-footer td,
-    .k-grouping-row td {
+    .k-grid-footer .k-table-td,
+    .k-grid-header .k-table-th,
+    .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} );
     }
 
@@ -525,25 +487,25 @@
     .k-grid-column-menu-standalone a.k-grid-filter {
         position: initial;
         display: inline-block;
-        margin-block: ( $kendo-padding-y * -1 );
+        margin-block: ( $kendo-padding-md-y * -1 );
         margin-inline: 0;
-        padding-block: $kendo-padding-y;
-        padding-inline: $kendo-padding-x;
+        padding-block: $kendo-padding-md-y;
+        padding-inline: $kendo-padding-md-x;
     }
 
     // Filter row
     .k-filter-row {
         line-height: $kendo-form-line-height;
 
-        td,
-        th {
-            padding-inline: var( --kendo-grid-filter-cell-padding-x, #{$kendo-grid-filter-cell-padding-x} );
-            padding-block: var( --kendo-grid-filter-cell-padding-y, #{$kendo-grid-filter-cell-padding-y} );
+        .k-table-td,
+        .k-table-th {
+            padding-inline: var( --INTERNAL--kendo-grid-filter-cell-padding-x, 0 );
+            padding-block: var( --INTERNAL--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;
         }
 
-        td:first-child {
+        .k-table-td:first-child {
             border-left-width: 0;
         }
 
@@ -564,7 +526,7 @@
             display: flex;
             flex-flow: row nowrap;
             align-items: center;
-            gap: calc( var( --kendo-grid-cell-padding-y, #{$kendo-grid-cell-padding-y} ) / 2 );
+            gap: calc( var( --INTERNAL--kendo-grid-cell-padding-y, 0 ) / 2 );
             flex: 1 1 auto;
 
             > .k-button {
@@ -590,13 +552,11 @@
         border-color: inherit;
         outline: 0;
 
-        table {
-            table-layout: fixed;
-        }
-        tr:last-child > td {
+        .k-table-row:last-child > .k-table-td {
             border-bottom-width: 0;
         }
     }
+
     .k-grid-content {
         width: 100%;
         min-height: 0;
@@ -613,34 +573,21 @@
         position: relative;
     }
 
-
-    // Checkboxes
-    .k-grid th,
-    .k-grid td {
-        > .k-radio,
-        > .k-radio-wrap,
-        > .k-checkbox,
-        > .k-checkbox-wrap {
-            vertical-align: top;
-        }
-    }
-
-
     // 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} );
     }
 
-    .k-master-row.k-expanded td {
+    .k-master-row.k-expanded .k-table-td {
         border-block-end-width: 0;
     }
 
-    .k-master-row:has(.k-hierarchy-cell[aria-expanded="true"]) td {
+    .k-master-row:has(.k-hierarchy-cell[aria-expanded="true"]) .k-table-td {
         border-block-end-width: 0;
     }
 
-    .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} );
     }
 
@@ -649,14 +596,14 @@
     // Edit row
     .k-grid .k-edit-cell,
     .k-grid .k-command-cell,
-    .k-grid .k-grid-edit-row td {
-        padding-inline: var( --kendo-grid-edit-cell-padding-x, #{$kendo-grid-edit-cell-padding-x} );
-        padding-block: var( --kendo-grid-edit-cell-padding-y, #{$kendo-grid-edit-cell-padding-y} );
+    .k-grid .k-grid-edit-row .k-table-td {
+        padding-inline: var( --INTERNAL--kendo-grid-edit-cell-padding-x, 0 );
+        padding-block: var( --INTERNAL--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"]):not([type="radio"]),
         > select,
@@ -712,19 +659,19 @@
 
     .k-grid-virtual .k-grid-content {
         .k-grid-table-wrap {
-            float: left;
+            float: inline-start;
             width: 100%;
         }
 
         .k-grid-table {
             position: relative;
-            float: left;
+            float: inline-start;
             z-index: 1;
         }
 
         > .k-height-container {
             position: relative;
-            float: left;
+            float: inline-start;
         }
 
         &::after {
@@ -743,14 +690,7 @@
         height: 1px;
     }
 
-    .k-grid-virtual[dir="rtl"],
-    .k-grid-virtual.k-rtl {
-        .k-grid-content .k-grid-table {
-            float: right;
-        }
-    }
-
-    .k-grid-add-row td {
+    .k-grid-add-row .k-table-td {
         border-bottom-style: solid;
         border-bottom-width: 1px;
     }
@@ -780,8 +720,8 @@
         border-inline-end-width: 1px;
         box-sizing: content-box;
 
-        td,
-        th {
+        .k-table-td,
+        .k-table-th {
             border-inline-start-width: 1px;
         }
 
@@ -790,11 +730,11 @@
         }
 
         .k-grouping-row .k-group-cell,
-        .k-grouping-row + tr .k-group-cell {
+        .k-grouping-row + .k-table-row .k-group-cell {
             border-inline-end-width: 0;
         }
 
-        tr:not(.k-group-footer) .k-group-cell {
+        .k-table-row:not(.k-group-footer) .k-group-cell {
             border-block-end-width: 0;
         }
     }
@@ -811,16 +751,16 @@
         }
     }
 
-    .k-grid-header-locked > table,
-    .k-grid-header-wrap > table {
+    .k-grid-header-locked > .k-grid-header-table,
+    .k-grid-header-wrap > .k-grid-header-table {
         margin-block-end: -1px;
     }
 
-    .k-grid-header .k-header.k-grid-header-sticky,
+    .k-grid-header .k-table-th.k-grid-header-sticky,
     .k-grid-header .k-filter-row .k-grid-header-sticky,
-    .k-grid-content-sticky,
-    .k-grid-row-sticky,
-    .k-grid-footer-sticky {
+    .k-grid .k-grid-content-sticky,
+    .k-grid .k-grid-row-sticky,
+    .k-grid .k-grid-footer-sticky {
         position: sticky;
         z-index: 2;
 
@@ -831,13 +771,13 @@
     }
 
     kendo-grid {
-        tr.k-grid-row-sticky {
+        .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;
@@ -845,18 +785,18 @@
             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-alt td.k-grid-content-sticky {
+        .k-grid-row-sticky .k-table-td.k-grid-content-sticky,
+        .k-grid-row-sticky.k-alt .k-table-td.k-grid-content-sticky {
             z-index: 3;
         }
 
         // Locked and sticky
-        .k-grid-header-locked th.k-grid-header-sticky:last-child,
-        .k-grid-content-locked tr .k-grid-content-sticky:last-child {
+        .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;
         }
 
@@ -873,10 +813,10 @@
     .k-grid .k-grid-header-sticky,
     .k-grid .k-grid-content-sticky,
     .k-grid .k-grid-footer-sticky {
-        border-inline-width: var( --kendo-grid-sticky-cell-border-width, #{$kendo-grid-sticky-cell-border-width} );
+        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"]) + th {
+        &:not([style*="display: none"]) + .k-table-td,
+        &:not([style*="display: none"]) + .k-table-th {
             border-inline-start-width: 0;
         }
     }
@@ -886,7 +826,7 @@
         border-block-end-width: var( --kendo-grid-border-width, #{$kendo-grid-border-width} );
     }
 
-    .k-grid-header-sticky.k-header.k-grid-no-left-border.k-first {
+    .k-grid-header-sticky.k-table-th.k-grid-no-left-border.k-first {
         border-inline-start-width: 0;
         border-inline-end-width: var( --kendo-grid-sticky-cell-border-width, #{$kendo-grid-sticky-cell-border-width} );
     }
@@ -929,15 +869,13 @@
         line-height: 4em;
     }
 
-    .k-header > .k-cell-inner {
-        margin-block: calc( var( --kendo-grid-header-padding-y, #{$kendo-grid-header-padding-y} ) * -1 );
-        margin-inline: calc( var( --kendo-grid-header-padding-x, #{$kendo-grid-header-padding-x} ) * -1 );
+    .k-table-th > .k-cell-inner {
+        margin-block: calc( var( --INTERNAL--kendo-grid-header-padding-y, 0 ) * -1 );
+        margin-inline: calc( var( --INTERNAL--kendo-grid-header-padding-x, 0 ) * -1 );
     }
 
     .k-filterable {
         > .k-cell-inner {
-            margin-inline-end: calc( var( --kendo-grid-filterable-icon-spacing, #{$kendo-grid-filterable-icon-spacing} ) * -1 );
-
             .k-link {
                 padding-inline-end: 0;
             }
@@ -952,8 +890,8 @@
         overflow: hidden;
 
         > .k-link {
-            padding-inline: var( --kendo-grid-header-padding-x, #{$kendo-grid-header-padding-x} );
-            padding-block: var( --kendo-grid-header-padding-y, #{$kendo-grid-header-padding-y} );
+            padding-inline: var( --INTERNAL--kendo-grid-header-padding-x, 0 );
+            padding-block: var( --INTERNAL--kendo-grid-header-padding-y, 0 );
             width: auto;
             display: flex;
             flex-flow: row nowrap;
@@ -1000,6 +938,41 @@
         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 );
+
+        .k-grid-#{$size} {
+            --INTERNAL--kendo-grid-header-padding-x: var( --kendo-grid-header-padding-x-#{$size}, #{$_header-padding-x} );
+            --INTERNAL--kendo-grid-header-padding-y: var( --kendo-grid-header-padding-y-#{$size}, #{$_header-padding-y} );
+            --INTERNAL--kendo-grid-grouping-header-padding-x: var( --kendo-grid-grouping-header-padding-x-#{$size}, #{$_grouping-header-padding-x} );
+            --INTERNAL--kendo-grid-grouping-header-padding-y: var( --kendo-grid-grouping-header-padding-y-#{$size}, #{$_grouping-header-padding-y} );
+            --INTERNAL--kendo-grid-cell-padding-x: var( --kendo-grid-cell-padding-x-#{$size}, #{$_cell-padding-x} );
+            --INTERNAL--kendo-grid-cell-padding-y: var( --kendo-grid-cell-padding-y-#{$size}, #{$_cell-padding-y} );
+            --INTERNAL--kendo-grid-filter-cell-padding-x: var( --kendo-grid-filter-cell-padding-x-#{$size}, #{$_filter-cell-padding-x} );
+            --INTERNAL--kendo-grid-filter-cell-padding-y: var( --kendo-grid-filter-cell-padding-y-#{$size}, #{$_filter-cell-padding-y} );
+            --INTERNAL--kendo-grid-edit-cell-padding-x: var( --kendo-grid-edit-cell-padding-x-#{$size}, #{$_edit-cell-padding-x} );
+            --INTERNAL--kendo-grid-edit-cell-padding-y: var( --kendo-grid-edit-cell-padding-y-#{$size}, #{$_edit-cell-padding-y} );
+            --INTERNAL--kendo-button-padding-y: var( --kendo-button-padding-y-#{$size}, #{$_button-padding-y} );
+            --INTERNAL--kendo-button-calc-size: var( --kendo-button-calc-size-#{$size}, #{$_button-calc-size} );
+            --INTERNAL--kendo-button-line-height: var( --kendo-button-line-height-#{$size}, #{$_button-line-height} );
+            --INTERNAL--kendo-grid-group-dropclue-height: var( --kendo-group-dropclue-height-#{$size}, #{$_group-dropclue-height} );
+        }
+    }
+
     // PDF export
     .k-loading-pdf-mask {
         position: absolute;
@@ -1044,7 +1017,7 @@
     // Remove Grid scrollbar during built-in export
     .k-pdf-export-shadow {
         .k-grid {
-            float: left;
+            float: inline-start;
             width: auto !important; // sass-lint:disable-line no-important
         }
 
@@ -1094,7 +1067,7 @@
 
         .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( 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-end: 0;
             padding-inline: 0;
         }
@@ -1151,8 +1124,8 @@
         width: auto !important;
         table-layout: auto !important;
 
-        th.k-header,
-        td {
+        .k-table-th,
+        .k-table-td {
             white-space: nowrap !important;
         }