@use "sass:map";
@use "sass:math";
@use "../core/_index.scss" as *;
@use "../button/_variables.scss" as *;
@use "../chip/_variables.scss" as *;
@use "../forms/_variables.scss" as *;
@use "../table/_variables.scss" as *;
@use "../tabstrip/_variables.scss" as *;
@use "./_variables.scss" as *;
@use "../core/spacing/_index.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( --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;
            }

            &:focus {
                outline: none;
            }

            > .k-radio,
            > .k-radio-wrap,
            > .k-checkbox,
            > .k-checkbox-wrap {
                vertical-align: top;
            }
        }

        .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} );
            white-space: nowrap;
        }

        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;
        }

        // Grouping, hierarcy
        .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} );
        }

        .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( --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} );
        }

        .k-hierarchy-cell,
        .k-drag-cell {
            text-align: center;
            padding: 0;
            overflow: visible;

            > .k-icon {
                padding-inline: 0;
                padding-block: var( --INTERNAL--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;
        }
    }

    .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( --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;
        display: flex;
        align-items: center;
        gap: var( --INTERNAL--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( --INTERNAL--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 );
            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( --INTERNAL--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;
        }

        &::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-radius: 50%;
            top: 0;
            left: calc( var( --kendo-grid-group-drop-hint-dot-size, #{$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%;
        border-inline-start-width: 0;
        border-inline-end-width: var( --kendo-grid-cell-border-width-y, #{$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) {
            border-inline-start-width: 1px;
        }
    }

    .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} );

        .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;
        }

        .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} );
            }
        }

        .k-table-row .k-table-th:first-child:not(.k-first) {
            border-inline-start-width: 0;
        }

        .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 {
                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(--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(--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( --INTERNAL--kendo-grid-header-padding-y, 0 ) + ( #{$kendo-line-height-em} / 2 ) - ( #{$kendo-button-inner-calc-size} / 2 ) );
            z-index: 1;

            &:hover {
                cursor: pointer;
            }
        }

        .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} );
        }

        .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} );
        }
    }

    .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( --INTERNAL--kendo-grid-edit-cell-padding-x, 0 ) - #{$kendo-grid-row-resizer-height} );
        padding-block-end: var( --INTERNAL--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;
        }
    }

    .k-grid-footer td,
    .k-grid-footer .k-table-td,
    .k-grid-header .k-table-th,
    .k-group-footer td,
    .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);
    }

    // Filter row
    .k-filter-row {
        line-height: $kendo-form-line-height;

        td,
        .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;
        }

        .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( --INTERNAL--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} );
    }

    .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} );
    }



    // 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( --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"], [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;
        }
    }

    .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( --INTERNAL--kendo-grid-selection-aggregates-padding-x, 0 );
        padding-block: var( --INTERNAL--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} );
    }
    .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,
        .k-table-th {
            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;
        }

        .k-table-row:not(.k-group-footer) .k-group-cell {
            border-block-end-width: 0;
        }
    }

    .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-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} );
    }

    .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( --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 {
            .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( --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;
            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} {
            --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-drop-hint-height: var( --kendo-group-dropclue-height-#{$size}, #{$_group-dropclue-height} );
            --INTERNAL--kendo-grid-selection-aggregates-padding-x: var( --kendo-grid-selection-aggregates-padding-x-#{$size}, #{$_selection-aggregates-padding-x} );
            --INTERNAL--kendo-grid-selection-aggregates-padding-y: var( --kendo-grid-selection-aggregates-padding-y-#{$size}, #{$_selection-aggregates-padding-y} );
        }
    }

    // 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} );

        .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-end: 0;
            padding-inline: 0;
        }

        // Angular specific
        kendo-numeric-filter-menu,
        kendo-grid-string-filter-menu,
        kendo-grid-date-filter-menu,
        kendo-grid-numeric-filter-menu,
        kendo-grid-filter-menu-input-wrapper,
        kendo-treelist-string-filter-menu,
        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} );
        }
    }

    .k-popup .k-multicheck-wrap {
        margin: 0;
        padding: 0;
        max-height: 300px;
        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;
        overflow: auto;
        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

    // 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;
        }
    }

    .k-column-list {
        padding: 0;
        margin: 0;
        list-style: none;
        max-height: 200px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .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: var( --kendo-component-border, inherit );
    }

    .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;
    }

    .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;
    }

    .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 {

        .k-grid-table-wrap,
        .k-grid-table,
        > .k-height-container {
            float: right;
        }
    }

}