@use 'sass:map';
@use 'sass:math';
@use '../../base' as *;
@use './excel-filtering-theme' as *;
@use 'igniteui-theming/sass/animations' as *;

@mixin _filtering-scroll-mask($theme, $dir) {
    display: block;
    position: absolute;
    width: rem(10px);
    content: '';
    inset-block: rem(-2px);
    background: linear-gradient(to #{$dir}, var-get($theme, 'filtering-row-background'), transparent);
}

/// @deprecated Use the `css-vars` mixin instead.
/// @see {mixin} css-vars
/// @param {Map} $theme - The theme used to style the component.
/// @requires {mixin} excel-filtering
@mixin grid($theme) {
    @include css-vars($theme);
    @include scale-in-ver-center();

    $variant: map.get($theme, '_meta', 'theme');
    $theme-variant: map.get($theme, '_meta', 'variant');
    $bootstrap-theme: $variant == 'bootstrap';
    $not-bootstrap-theme: $variant != 'bootstrap';

    $cbx-size: map.get((
        'material': rem(20px),
        'fluent': rem(20px),
        'bootstrap': rem(14px),
        'indigo': rem(20px),
    ), $variant);
    $cbx-bs-size: rem(14px);

    $grid-shadow: var-get($theme, 'grid-elevation');

    $grid-caption-fs: rem(20px);
    $grid-caption-lh: rem(32px);
    $grid-caption-padding: rem(16px) rem(24px);

    $grid-head-fs: rem(12px);
    $grid-head-fw: 600;
    $transition: all 120ms $ease-in-out-cubic;

    // Cell
    $grid-cell-align-num: end;
    $grid-cell-fs: rem(13px);
    $grid-cell-lh: rem(16px);
    $grid-cell-pinned-style: rem(1px) solid;
    $grid-cell-pinned-border-color: color($color: 'gray', $variant: 300);

    $grid-header-border: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');

    $cell-pin: (
        style: var-get($theme, 'pinned-border-width') var-get($theme, 'pinned-border-style'),
        color: var-get($theme, 'pinned-border-color')
    );

    $padding-comfortable: rem(24px);
    $padding-cosy: rem(16px);
    $padding-compact: rem(12px);

    $grid-header-padding-inline: (
        comfortable: $padding-comfortable,
        cosy: $padding-cosy,
        compact: $padding-compact
    );

    $pivot-row-aria-padding: (
        comfortable: $padding-comfortable,
        cosy: $padding-cosy,
        compact: $padding-compact
    );

    $grid-cbx-padding: (
        comfortable: $padding-comfortable,
        cosy: $padding-cosy,
        compact: $padding-compact
    );

    $cbx-padding: map.get($grid-cbx-padding, 'comfortable');
    $cbx-padding-cosy: map.get($grid-cbx-padding, 'cosy');
    $cbx-padding-compact: map.get($grid-cbx-padding, 'compact');

    $grid-header-height: (
        comfortable: if($variant == 'indigo', rem(48px), rem(50px)),
        cosy: if($variant == 'indigo', rem(40px), rem(40px)),
        compact: if($variant == 'indigo', rem(32px), rem(32px))
    );

    $drop-area-height: (
        comfortable: rem(32px),
        cosy: rem(24px),
        compact: rem(24px)
    );

    $cell-padding-comfortable: rem(24px);
    $cell-padding-cosy: rem(16px);
    $cell-padding-compact: rem(12px);

    $grid-cell-padding-inline: (
        comfortable: $cell-padding-comfortable,
        cosy: $cell-padding-cosy,
        compact: $cell-padding-compact
    );

    $hierarchical-grid-indent: (
        comfortable: rem(24px),
        cosy: rem(16px),
        compact: rem(12px)
    );

    $hierarchical-action-icon: if($variant == 'indigo', rem(16px), rem(24px));

    $hierarchical-indent: (
        comfortable: calc(2 * #{map.get($hierarchical-grid-indent, 'comfortable')} + #{$hierarchical-action-icon}),
        cosy: calc(2 * #{map.get($hierarchical-grid-indent, 'cosy')} + #{$hierarchical-action-icon}),
        compact: calc(2 * #{map.get($hierarchical-grid-indent, 'compact')} + #{$hierarchical-action-icon})
    );

    $hierarchical-indent-scroll: (
        comfortable: calc(#{map.get($hierarchical-grid-indent, 'comfortable')} + 18px),
        cosy: calc(#{map.get($hierarchical-grid-indent, 'cosy')} + 18px),
        compact: calc(#{map.get($hierarchical-grid-indent, 'compact')} + 18px)
    );

    $grouparea-padding-inline: (
        comfortable: rem(24px),
        cosy: rem(16px),
        compact: rem(12px)
    );

    $grouparea-min-height: (
        comfortable: if($variant == 'indigo', rem(56px), rem(57px)),
        cosy: if($variant == 'indigo', rem(48px), rem(49px)),
        compact: if($variant == 'indigo', rem(40px), rem(41px))
    );

    $grid-grouping-indicator-padding: (
        comfortable: rem(24px),
        cosy: rem(16px),
        compact: rem(12px)
    );

    $indicator-icon-width: map.get((
        'material': rem(24px),
        'fluent': rem(24px),
        'bootstrap': rem(24px),
        'indigo': rem(16px),
    ), $variant);

    $drag-icon-size: rem(24px);

    $grid-header-weight: map.get((
        'material': 600,
        'fluent': 800,
        'bootstrap': 700,
        'indigo': 600,
    ), $variant);

    $editing-outline-width: rem(2px);

    $filtering-row-height: #{sizable(
        map.get($grid-header-height, 'compact'),
        map.get($grid-header-height, 'cosy'),
        map.get($grid-header-height, 'comfortable')
    )};

    %cell-input-overrides {
        // Have a more stable visual editing experience
        > igx-input-group,
        igx-combo,
        igx-simple-combo,
        igx-select,
        igx-date-picker,
        igx-time-picker {
            position: relative;
            height: auto;
            width: 100% !important;
            overflow: hidden;
        }

        igx-input-group {
            background: var-get($theme, 'cell-editing-background');

            .igx-input-group__input {
                height: 100%;
                color: var-get($theme, 'cell-editing-foreground');
            }

            .igx-input-group__input:focus {
                color: var-get($theme, 'cell-editing-focus-foreground');
            }
        }

        igx-select,
        igx-combo,
        igx-simple-combo,
        igx-time-picker,
        igx-date-picker {
            igx-input-group {
                height: 100%;
            }
        }

        .igx-input-group__bundle {
            background: transparent !important;
            height: 100% !important;
            min-height: 100% !important;
            border: none !important;

            .igx-input-group__filler,
            .igx-input-group__notch {
                border: none !important;
            }

            &::before {
                content: none !important;
            }

            &::after {
                display: none;
            }
        }

        .igx-input-group--indigo .igx-input-group__bundle:hover,
        .igx-input-group--indigo .igx-input-group__bundle:focus {
            background: transparent;
        }

        .igx-input-group__bundle-main,
        .igx-input-group__bundle-start,
        .igx-input-group__bundle-end {
            height: auto;
            border: none !important;
            border-radius: 0 !important;
        }

        .igx-input-group__bundle-main {
            padding: 0;
        }

        .igx-input-group__line {
            display: none;
        }

        igx-prefix,
        igx-suffix {
            background: transparent !important;
            border-radius: 0 !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            border: none !important;
            padding-inline: sizable(rem(4px), rem(6px), rem(8px)) !important;
        }

        .igx-input-group--indigo {
            padding-inline: sizable(rem(6px), rem(8px), rem(12px)) !important;

            igx-prefix {
                padding-inline-start: 0 !important;
            }

            igx-suffix {
                padding-inline-end: 0 !important;
            }
        }

        .igx-input-group__input {
            padding-inline: sizable(rem(4px), rem(6px), rem(8px)) !important;
            margin: 0 auto;
            max-width: 100%;
        }

        igx-date-range-picker {
            height: 100%;
        }

        igx-time-picker [igxLabel] {
            display: none;
        }

        %form-group-input {
            // ignore global typography
            font-size: $grid-cell-fs !important;
            line-height: $grid-cell-lh !important;
        }

        .igx-input-group__input,
        .igx-input-group__file-input,
        .igx-input-group__textarea {
            box-shadow: none !important;
            border: none !important;
        }

        .igx-input-group--disabled,
        .igx-input-group--disabled igx-prefix,
        .igx-input-group--disabled igx-suffix {
            color: var-get($theme, 'cell-disabled-color');
        }
    }

    @if $variant != 'indigo' {
        %filtering-row-input-overrides {
            igx-input-group {
                width: 100%;
                max-width: rem(200px);
                min-width: rem(140px);

                @if $variant != 'fluent' {
                    border: rem(1px) solid color($color: 'gray', $variant: 300);
                }

                --size: calc(#{$filtering-row-height} - #{rem(8px)});

                .igx-input-group__bundle,
                .igx-input-group__bundle-start,
                .igx-input-group__bundle-end,
                igx-prefix,
                igx-suffix {
                    background: transparent;
                    border-radius: 0;

                    /* stylelint-disable-next-line */
                    &:hover {
                        background: transparent;
                    }
                }

                igx-prefix,
                igx-suffix {
                    height: 100% !important;
                    padding: 0 sizable(rem(4px), rem(6px), rem(8px));
                }

                .igx-input-group__input {
                    font-size: sizable(rem(12px), rem(14px), rem(16px));
                    padding-inline-start: 0;
                    padding-block: 0;
                    height: 100%;
                }

                .igx-input-group__bundle,
                .igx-input-group__bundle-start,
                .igx-input-group__bundle-end,
                .igx-input-group__input {
                    border: 0;

                    /* stylelint-disable-next-line */
                    &:hover {
                        border: 0;
                        box-shadow: none;
                    }
                }

                .igx-input-group__bundle::after {
                    display: none;
                }

                .igx-input-group__bundle-main {
                    padding-inline-start: 0;
                }

                color: var-get($theme, 'filtering-row-text-color');

                &:hover{
                    color: var-get($theme, 'filtering-row-text-color');
                    border-color: color($color: 'primary', $variant: 500);
                }
            }

            .igx-input-group--focused {
                @if $variant != 'fluent' {
                    border-color: color($color: 'primary', $variant: 500);
                    border-width: rem(1px);
                }

                color: var-get($theme, 'filtering-row-text-color');

                .igx-input-group__bundle,
                .igx-input-group__bundle-start,
                .igx-input-group__bundle-end,
                .igx-input-group__input {
                    border: 0 !important;

                    @if $variant != 'fluent' {
                        box-shadow: none !important;
                    }
                }

                .igx-input-group__bundle-main,
                .igx-input-group__bundle-start,
                .igx-input-group__bundle-end {
                    margin: 0 !important;
                }

                .igx-input-group__bundle,
                .igx-input-group__bundle-start,
                .igx-input-group__bundle-end,
                igx-prefix,
                igx-suffix {
                    background: transparent !important;
                    border-radius: 0;
                }
            }

            .igx-input-group__line {
                display: none;
            }

            igx-prefix:focus {
                color: color(map.get($theme, 'palette'), 'secondary');
            }

            igx-suffix {
                igx-icon {
                    outline-style: none;

                    &:focus {
                        color: color($color: 'secondary');
                    }

                    + igx-icon {
                        margin-inline-start: rem(4px);
                    }
                }
            }
        }
    }

    igx-grid,
    igx-hierarchical-grid,
    igx-pivot-grid,
    igx-tree-grid {
        @if $variant == 'material' {
            @if $theme-variant == 'light' {
                --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)};
                --ig-chip-disabled-background: #{color($color: 'gray', $variant: 300)};
                --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 300)};
            }
            @if $theme-variant == 'dark' {
                --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 300)};
                --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
                --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
            }
        }

        @if $variant == 'fluent' {
            @if $theme-variant == 'dark' {
                --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 400)};
                --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
                --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
            }
        }

        @if $variant == 'bootstrap' {
            @if $theme-variant == 'dark' {
                --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 400)};
                --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
                --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
            }
        }

        @if $variant == 'indigo' {
            @if $theme-variant == 'light' {
                --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)};
                --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
                --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 300)};
            }
            @if $theme-variant == 'dark' {
                --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 300)};
                --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
                --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
            }
        }
    }

    %disable-focus-styles {
        outline: 0;
    }

    %grid-host {
        @include sizable();

        --component-size: var(--ig-size, var(--ig-size-large));
        --grid-size: var(--component-size);
    }

    %grid-display {
        --header-size: #{sizable(
            map.get($grid-header-height, 'compact'),
            map.get($grid-header-height, 'cosy'),
            map.get($grid-header-height, 'comfortable')
        )};

        --grouparea-size: #{sizable(
            map.get($grouparea-min-height, 'compact'),
            map.get($grouparea-min-height, 'cosy'),
            map.get($grouparea-min-height, 'comfortable')
        )};

        --ig-tree-indent-size: #{sizable(rem(12px), rem(16px), rem(24px))};

        position: relative;
        display: grid;
        grid-template-rows: auto auto auto 1fr auto auto;
        grid-template-columns: 100%;
        overflow: hidden;
        contain: inline-size;
        box-shadow: $grid-shadow;

        @if $variant == 'fluent' {
            box-shadow: 0 0 0 rem(1px) var-get($theme, 'grid-border-color');
        }

        outline-style: none;
        z-index: 1;

        %cbx-display {
            min-width: $cbx-size;

            @if $variant == 'material' {
                %cbx-composite-wrapper {
                    padding: 0;
                }

                %cbx-label-pos--after {
                    margin-inline-start: rem(12px);
                }

                %cbx-label-pos--before {
                    margin-inline-end: rem(12px);
                }

                %cbx-label-pos--before,
                %cbx-label-pos--after {
                    &:empty {
                        margin: 0;
                    }
                }
            }
        }
    }

    %grid-caption {
        display: flex;
        align-items: center;
        font-size: $grid-caption-fs;
        line-height: $grid-caption-lh;
        padding: $grid-caption-padding;
        grid-row: 1;
    }

    %grid-thead,
    %grid-tfoot {
        position: relative;
        display: flex;
        background: var-get($theme, 'header-background');
        color: var-get($theme, 'header-text-color');
        overflow: hidden;
        outline-style: none;

        %grid-row {
            position: relative;
            background: inherit;
            color: inherit;
            z-index: 2;

            &:hover {
                background: inherit;
                color: inherit;
            }
        }

        > [aria-activedescendant] {
            outline-style: none;
        }
    }

    %grid-thead {
        border-bottom: $grid-header-border;

        @if $bootstrap-theme {
            border-bottom-width: rem(2px);
        }

        z-index: 2;

        %grid__cbx-selection--push {
            align-items: flex-start;
            padding-block-start: pad-block(
                math.div(map.get($grid-header-height, 'compact') - rem(20px), 2),
                math.div(map.get($grid-header-height, 'cosy') - rem(20px), 2),
                math.div(map.get($grid-header-height, 'comfortable') - rem(20px), 2)
            );
        }

        %grid-row {
            border-bottom: none;
        }
    }

    %grid-thead-container {
        grid-row: 3;
        display: flex;
        overflow: hidden;

        %igx-grid__header-indentation {
            igx-icon {
                --component-size: #{if($variant == 'indigo', 2, 3)};
            }

            @if $variant == 'indigo' {
                %igx-grid__group-expand-btn {
                    color: var-get($theme, 'expand-icon-color');
                }

                %igx-grid__group-expand-btn:hover{
                    color: var-get($theme, 'expand-icon-hover-color');
                }
            }

        }

        %igx-grid__drag-indicator {
            cursor: default;
        }

        %grid-row--mrl {
            %igx-grid__hierarchical-expander--header,
            %igx-grid__hierarchical-expander,
            %igx-grid__header-indentation,
            %igx-grid__row-indentation,
            %grid__cbx-selection {
                border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
            }
        }

        &:focus-visible {
            outline-color: transparent;
        }
    }

    %grid-thead-title {
        flex-basis: auto !important;
        align-items: center !important;
        border-bottom: $grid-header-border;
        height: var(--header-size);

        @if $variant != 'indigo' {
            padding-inline: pad-inline(
                map.get($grid-cell-padding-inline, 'compact'),
                map.get($grid-cell-padding-inline, 'cosy'),
                map.get($grid-cell-padding-inline, 'comfortable')
            );
        } @else {
            padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));

            igx-icon {
                opacity: if($theme-variant == 'light', .75, .85);

                &:hover {
                    opacity: 1;
                    cursor: pointer;
                }
            }
        }

        padding-block: 0;
    }

    %grid-thead-title--pinned {
        border-inline-end: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important;
    }

    %grid-thead-group {
        display: flex;
        flex-flow: row nowrap;
    }

    /* We set those with position relative
    so that the drop indicators be scoped
    to their respective group. The item
    being the topmost element, while the
    subgroup encapsulates children of each
    thead item and group.
    */
    %grid-thead-item {
        display: flex;
        flex-flow: column nowrap;

        %grid-thead-group {
            flex: 1 1 auto;
        }

        %grid-cell-header {
            flex: 1 1 auto;
        }

        %grid-thead-title {
            flex: 0 0 auto;
        }
    }

    %grid-thead-item,
    %grid-thead-subgroup {
        position: relative;
    }

    %grid-tfoot {
        grid-row: 5;
        border-top: $grid-header-border;
        z-index: 10001;
    }

    %grid-footer {
        grid-row: 7;
    }

    %grid-display-container-thead {
        width: 100%;
        overflow: visible;
    }

    %grid-display-container-tr {
        width: 100%;
        overflow: visible;
        flex: 1;
        // needed to override the min-width of the column headers
        min-width: 0;
    }

    %grid-mrl-block {
        display: grid;
        background: inherit;
        position: relative;

        %grid-thead-item {
            display: flex;
        }

        %grid-cell-header {
            align-items: center;
            flex-grow: 1;
            border-bottom: $grid-header-border;
        }

        %grid-cell-display {
            border-inline-end: rem(1px) solid var-get($theme, 'header-border-color');
            border-bottom: rem(1px) solid var-get($theme, 'header-border-color');
        }
    }

    %grid-row--mrl {
        &%grid-row {
            border-bottom-color: transparent;

            @if $variant == 'indigo' {
                %grid-cell-display {
                    border-inline-end: rem(1px) solid var-get($theme, 'row-border-color');
                    border-bottom: rem(1px) solid var-get($theme, 'row-border-color');
                }
            }
        }

        %grid__cbx-selection,
        %igx-grid__hierarchical-expander,
        %igx-grid__row-indentation,
        %igx-grid__drag-indicator {
            border-bottom: rem(1px) solid var-get($theme, 'row-border-color');
        }
    }

    %grid-tbody {
        position: relative;
        background: var-get($theme, 'content-background');
        color: var-get($theme, 'content-text-color');
        overflow: hidden;
        z-index: 1;
        outline-style: none;
    }

    %grid-tbody-container {
        position: relative;
        display: flex;
        grid-row: 4;
        overflow: hidden;
    }

    %grid-tbody-message {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        color: var-get($theme, 'content-text-color');
        flex-direction: column;
        padding: rem(24px);
    }

    %igx-grid__loading {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        min-height: rem(100px);

        > %circular-display {
            width: rem(50);
            height: rem(50);
        }
    }

    %grid-scroll {
        grid-row: 6;
        display: flex;
        flex-flow: row nowrap;
        width: 100%;
        background: var-get($theme, 'header-background');
        z-index: 10001;
    }

    %grid-thead-thumb {
        background: var-get($theme, 'header-background');
        border-inline-start: rem(1px) solid var-get($theme, 'header-border-color');
    }

    %grid-tfoot-thumb {
        position: absolute;
        top: 0;
        inset-inline-end: 0;
        background: var-get($theme, 'header-background');
        border-inline-start: rem(1px) solid var-get($theme, 'header-border-color');
    }

    %grid-tbody-scrollbar {
        background: var-get($theme, 'content-background');
        border-inline-start: rem(1px) solid var-get($theme, 'row-border-color');
        position: relative;
    }

    %grid-tbody-scrollbar-start {
        background: var-get($theme, 'header-background');
    }

    %grid-tbody-scrollbar-main {
        position: relative;
    }

    %grid-tbody-scrollbar-end {
        background: var-get($theme, 'header-background');
    }

    %grid-scroll-start {
        background: var-get($theme, 'header-background');
    }

    %grid-scroll-main {
        igx-display-container {
            height: 0;
        }

        igx-horizontal-virtual-helper {
            height: 100%;
        }
    }

    %grid-row {
        display: flex;
        background: var-get($theme, 'content-background');
        border-bottom: rem(1px) solid var-get($theme, 'row-border-color');
        outline-style: none;
        position: relative;
        background-clip: content-box !important;

        &:hover {
            background: var-get($theme, 'row-hover-background');
            color: var-get($theme, 'row-hover-text-color');

            %grid-cell--column-selected {
                color: var-get($theme, 'row-selected-hover-text-color');
                background: var-get($theme, 'row-selected-hover-background');
            }

            %grid-cell--cross-selected {
                color: var-get($theme, 'cell-selected-within-text-color');
                background: var-get($theme, 'cell-selected-within-background');
            }
        }

        &%igx-grid__tr--ghost {
            background: var-get($theme, 'row-ghost-background');
            color: var-get($theme, 'row-drag-color');
            z-index: 10002;

            @include css-vars((
                name: 'igx-grid-row',
                row-ghost-background: map.get($theme, 'row-ghost-background'),
                row-drag-color: map.get($theme, 'row-drag-color')
            ));
        }
    }

    %igx-grid__drag-indicator {
        display: flex;
        align-items: center;
        justify-content: center;

        @if $variant != 'indigo' {
            padding-inline: pad-inline(
                map.get($grid-cell-padding-inline, 'compact'),
                map.get($grid-cell-padding-inline, 'cosy'),
                map.get($grid-cell-padding-inline, 'comfortable')
            );
            min-height: sizable(
                    rem(32px),
                    rem(40px),
                    rem(50px)
                );
        } @else {
            padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
            min-height: sizable(
                    rem(32px),
                    rem(40px),
                    rem(48px)
                );

            igx-icon {
                opacity: if($theme-variant == 'light', .75, .85);
            }

            &:hover {
                igx-icon {
                    opacity: 1;
                }
            }
        }

        padding-block: 0;
        flex: 0 0 auto;
        background: inherit;
        z-index: 4;
        cursor: move;
        border-inline-end: rem(1px) solid transparent;
        background-clip: border-box;

        igx-icon {
            --component-size: #{if($variant == 'indigo', 2, 3)};
        }
    }

    %igx-grid__drag-indicator--header {
        border-inline-end: $grid-header-border;
    }

    %igx-grid__drag-indicator--off {
        color: var-get($theme, 'row-drag-color');
    }

    %igx-grid__tr--drag {
        opacity: .5;
    }

    %grid-row--odd {
        background: var-get($theme, 'row-odd-background');
        color: var-get($theme, 'row-odd-text-color');
    }

    %grid-row--even {
        background: var-get($theme, 'row-even-background');
        color: var-get($theme, 'row-even-text-color');
    }

    %igx-grid__tr--expanded {
        border-bottom: none;
    }

    %igx-grid__tr--pinned {
        position: relative;
        background: inherit;
        z-index: 10000;

        %igx-grid__hierarchical-expander--empty {
            border-inline-end: rem(1px) solid var-get($theme, 'header-border-color');
        }
    }

    %igx-grid__tr--pinned-top {
        border-bottom: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important;
    }

    %igx-grid__tr--pinned-bottom {
        border-top: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important;
        position: absolute;
        bottom: 0;
    }

    %igx-grid__td--centered {
        justify-content: center;
    }

    %igx-grid__td--bool {
        display: flex;
        flex-grow: 1;

        igx-icon {
            --component-size: #{if($variant == 'indigo', 2, 1)};
        }

        %igx-icon--error {
            @if $variant == 'indigo' or $theme-variant == 'dark' {
                color: color($color: 'gray', $variant: 500);
            } @else {
                color: color($color: 'gray', $variant: 600);
            }
        }
    }

    %igx-grid__td--bool-true {
        %igx-icon--success {
            color: color($color: 'gray', $variant: 700);
        }
    }

    %igx-grid__tr--edit {
        border-bottom: rem(1px) solid var-get($theme, 'edit-mode-color');
        position: relative;

        &::after {
            content: '';
            position: absolute;
            height: rem(1);
            width: 100%;
            top: rem(-1);
            inset-inline-start: 0;
            background: var-get($theme, 'edit-mode-color');
        }

        &%grid-row {
            border-bottom: rem(1px) solid var-get($theme, 'edit-mode-color');
        }

        %igx-grid__td--editing {
            border: none;

            %form-group-bundle--focus {
                caret-color: var-get($theme, 'edit-mode-color') !important;
            }

            %form-group-border {
                background: var-get($theme, 'edit-mode-color') !important;
            }
        }

        [aria-readonly='true'] {
            color: var-get($theme, 'cell-disabled-color');

            igx-icon {
                color: var-get($theme, 'cell-disabled-color');
            }
        }
    }

    %igx-grid__tr--inner {
        display: flex;
        background: inherit;
    }

    %igx-grid__tr--header {
        display: flex;
        align-items: center;

        igx-icon {
            --component-size: #{if($variant == 'indigo', 2, 3)};
        }
    }

    %igx-grid__tr--add-animate {
        @include animation(scale-in-ver-center .2s $ease-in-out-quad);
    }

    %grid-row--edit-mrl {
        &:first-of-type::after {
            top: 0;
            z-index: 5;
        }
    }

    %igx-grid__tr--edited {
        &::before {
            content: '';
            position: absolute;
            width: if($variant == 'indigo', rem(4px), rem(2px));
            height: 100%;
            z-index: 10000;
            background: var-get($theme, 'edited-row-indicator');
        }
    }

    %grid-row--group {
        position: relative;
        background: var-get($theme, 'header-background') !important;
    }

    %igx-grid-row--filtered {
        %grid-cell-text {
            color: var-get($theme, 'tree-filtered-text-color');
        }

        %igx-grid__tree-grouping-indicator {
            color: var-get($theme, 'tree-filtered-text-color');

            &:hover {
                color: var-get($theme, 'tree-filtered-text-color');
            }
        }

        %grid-cell--selected {
            %grid-cell-text {
                color: var-get($theme, 'tree-selected-filtered-cell-text-color');
            }

            %igx-grid__tree-grouping-indicator {
                color: var-get($theme, 'tree-selected-filtered-cell-text-color');

                &:hover {
                    color: var-get($theme, 'tree-selected-filtered-cell-text-color');
                }
            }
        }
    }

    %grid-row--selected--filtered {
        %grid-cell-text {
            color: var-get($theme, 'tree-selected-filtered-row-text-color');
        }

        %igx-grid__tree-grouping-indicator {
            color: var-get($theme, 'tree-selected-filtered-row-text-color');

            &:hover {
                color: var-get($theme, 'tree-selected-filtered-row-text-color');
            }
        }

        %grid-cell--selected {
            %grid-cell-text {
                color: var-get($theme, 'tree-selected-filtered-cell-text-color');
            }

            %igx-grid__tree-grouping-indicator {
                color: var-get($theme, 'tree-selected-filtered-cell-text-color');

                &:hover {
                    color: var-get($theme, 'tree-selected-filtered-cell-text-color');
                }
            }
        }
    }

    %igx-grid__tree-grouping-indicator {
        display: flex;
        align-items: center;
        justify-content: center;
        user-select: none;
        outline-style: none;
        margin-inline-end: if($variant == 'indigo', rem(4px), rem(8));
        cursor: pointer;

        color: var-get($theme, 'expand-icon-color');

        &:hover {
            color: var-get($theme, 'expand-icon-hover-color')
        }

        [dir='rtl'] & {
            transform: scaleX(-1);
        }

        igx-icon {
            --component-size: #{if($variant == 'indigo', 2, 3)};;
        }
    }

    %igx-grid__tree-loading-indicator {
        width: rem(24px, 16px);
        height: rem(24px, 16px);
        margin-inline-end: rem(8px, 16px);

        %circular-outer {
            stroke: var-get($theme, 'expand-icon-color');
        }

        > %circular-display {
            width: rem(24);
            height: rem(24);
        }
    }

    %grid-cell-display {
        position: relative;
        display: flex;
        flex: 1 1 0%;
        align-items: center;
        outline-style: none;

        @extend %cell-input-overrides;

        igx-input-group {
            background: transparent;
        }

        @if $variant != 'indigo' {
            padding-inline: pad-inline(
                map.get($grid-cell-padding-inline, 'compact'),
                map.get($grid-cell-padding-inline, 'cosy'),
                map.get($grid-cell-padding-inline, 'comfortable')
            );
        } @else {
            padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
        }

        padding-block: 0;
        color: inherit;
        text-align: start;
        background-clip: border-box !important;

        @if $variant != 'indigo' {
            font-size: $grid-cell-fs;
            line-height: $grid-cell-lh;
            min-height: sizable(
                rem(32px),
                rem(40px),
                rem(50px)
            );
        } @else {
            @include type-style('detail-1', false);

            min-height: sizable(
                rem(32px),
                rem(40px),
                rem(48px)
            );
        }
    }

    // This is no longer being extended and is left
    // here for reference purposes only. It seems setting
    // overflow: hidden on the cell prevents drag and selection
    // of the cell.
    // See github issue #9821
    %igx-grid__td--tree-cell {
        overflow: hidden;
    }

    %grid-cell-text {
        @include ellipsis();

        pointer-events: none;
    }

    %grid-cell--fixed-width {
        flex-grow: 0;
        outline-style: none;

        igx-icon {
            --component-size: #{if($variant == 'indigo', 2, 3)};
        }
    }

    %grid-cell--active {
        box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'cell-active-border-color');

        > %igx-grid__filtering-cell,
        > %grid-cell-header {
            border-inline-end-color: var-get($theme, 'cell-active-border-color');
            border-bottom-color: var-get($theme, 'cell-active-border-color');
        }
    }

    %grid-cell--invalid {
        padding-inline-end: rem(4px) !important;

        > igx-icon {
            color: color($color: 'error');
            width: var(--ig-icon-size, rem(18px));
            height: var(--ig-icon-size, rem(18px));
            font-size: var(--ig-icon-size, rem(18px));
        }

        %grid-cell-text {
            width: 100%;
        }

        .igx-input-group__bundle {
            &:focus-within {
                &::after {
                    border: none !important;
                }
            }
        }
    }

    %grid-cell--valid {
        box-shadow: inset 0 0 0 rem(2px) color($color: 'success') !important;
    }

    %grid-cell--pinned-selected,
    %grid-cell--selected {
        color: var-get($theme, 'cell-selected-text-color');
        background: var-get($theme, 'cell-selected-background');
        // this is causing an issue https://github.com/IgniteUI/igniteui-angular/issues/4981
        // border-bottom: 0;

        %igx-grid__tree-grouping-indicator {
            &:hover {
                color: var-get($theme, 'cell-selected-text-color');
            }
        }
    }

    %grid-row--selected {
        color: var-get($theme, 'row-selected-text-color');
        background: var-get($theme, 'row-selected-background');

        %grid-cell--selected,
        %grid-cell--pinned-selected {
            color: var-get($theme, 'cell-selected-within-text-color');
            background: var-get($theme, 'cell-selected-within-background');
        }

        &:hover {
            background: var-get($theme, 'row-selected-hover-background');
            color: var-get($theme, 'row-selected-hover-text-color');

            %grid-cell--column-selected {
                color: var-get($theme, 'row-selected-hover-text-color');
                background: var-get($theme, 'row-selected-hover-background');
            }
        }

        %igx-grid__tree-grouping-indicator {
            color: var-get($theme, 'row-selected-text-color');

            &:hover {
                color: var-get($theme, 'row-selected-text-color');
            }
        }
    }

    %grid-cell--column-selected {
        color: var-get($theme, 'row-selected-text-color');
        background: var-get($theme, 'row-selected-background');
    }

    %grid-cell--cross-selected {
        color: var-get($theme, 'cell-selected-within-text-color');
        background: var-get($theme, 'cell-selected-within-background');
    }

    %igx-grid__td--new {
        color: var-get($theme, 'cell-new-color');
    }

    %igx-grid__td--edited {
        %grid-cell-text {
            font-style: italic;
            color: var-get($theme, 'cell-edited-value-color');
            padding: 0 rem(1px);
        }
    }

    %igx-grid__tr--merged {
        border-block-end: 0;
    }

    %igx-grid__tr--merged-top {
        position: absolute;
        width: 100%;
    }

    %igx-grid__td--merged {
        z-index: 1;
        grid-row: 1 / -1;
    }

    %igx-grid__td--merged-selected {
        color: var-get($theme, 'row-selected-text-color');
        background: var-get($theme, 'row-selected-background') !important;
    }

    %igx-grid__td--merged-hovered {
        background: var-get($theme, 'row-hover-background') !important;
        color: var-get($theme, 'row-hover-text-color');
    }

    %igx-grid__td--merged-selected-hovered {
        background: var-get($theme, 'row-selected-hover-background') !important;
        color: var-get($theme, 'row-selected-hover-text-color');
    }

    %igx-grid__tr--deleted {
        %grid-cell-text {
            font-style: italic;
            color: color(map.get($theme, 'palette'), 'error');
            text-decoration: line-through;
        }
    }

    %igx-grid__tr--disabled {
        %grid-cell-text {
            color: var-get($theme, 'cell-disabled-color');
        }
    }

    %igx-grid__td--editing {
        background: var-get($theme, 'cell-editing-background') !important;
        box-shadow: inset 0 0 0 $editing-outline-width var-get($theme, 'edit-mode-color');
        padding-inline: rem(4px);

        &.igx-grid__td--invalid {
            box-shadow: inset 0 0 0 rem(2px) color($color: 'error') !important;
        }

        &%grid-cell-number {
            justify-content: flex-start !important;
        }
    }

    %grid-cell--pinned {
        position: relative;
        background: inherit;
        z-index: 9999;
    }

    %grid-cell--pinned--column-selected {
        color: var-get($theme, 'row-selected-text-color');
        background: var-get($theme, 'row-selected-background');

        &:hover {
            background: var-get($theme, 'row-selected-hover-background');
            color: var-get($theme, 'row-selected-text-color');
        }
    }

    %grid-cell--pinned-last {
        border-inline-end: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important;

        %igx-grid__filtering-cell,
        %grid-cell-header {
            border-inline-end: none;
        }

        &%grid-cell--editing {
            border-inline-end: map.get($cell-pin, 'style') var-get($theme, 'cell-selected-background') !important;
        }
    }

    %grid-cell--pinned-first {
        border-inline-start: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important;

        &%grid-cell--editing {
            border-inline-start: map.get($cell-pin, 'style') var-get($theme, 'cell-selected-background') !important;
        }
    }

    %grid-cell--row-pinned-first {
        overflow: hidden;
    }

    %grid-cell--pinned-chip {
        margin-inline-end: pad-inline(rem(4px), rem(8px), rem(12px));
    }

    %grid-cell-header {
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: flex-end;

        @if $variant != 'indigo' {
            font-size: $grid-head-fs;
            font-weight: $grid-head-fw;

            padding-inline: pad-inline(
                map.get($grid-header-padding-inline, 'compact'),
                map.get($grid-header-padding-inline, 'cosy'),
                map.get($grid-header-padding-inline, 'comfortable')
            );
        } @else {
            padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
        }

        min-width: 0;
        padding-block: 0;
        border-inline-end: $grid-header-border;
        min-height: var(--header-size);
        outline-style: none;
        overflow: hidden;
        transition: color 250ms ease-in-out;
    }

    %grid-cell-header--filtering {
        background: var-get($theme, 'filtering-header-background');
        color: var-get($theme, 'filtering-header-text-color');
        z-index: 3;
    }

    %grid-cell-header-title {
        @include ellipsis();

        @if $variant != 'indigo' {
            font-weight: $grid-header-weight;
        } @else {
            @include type-style('detail-2', false);
        }

        min-width: 3ch;
        user-select: none;
        cursor: initial;
        flex-grow: 1; /* hey IE, the text should take most of the space */
        // align-self: flex-end; /* commenting out for now on external request */
        line-height: var(--header-size);
        transition: color 250ms ease-in-out;
    }

    %grid-cell-header-icons {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        user-select: none;
        min-width: rem(30px); /* sort-icon + filter icon width */
        height: var(--header-size);
        align-self: flex-end;

        &:empty {
            min-width: 0;
        }

        .sort-icon {
            position: relative;
            display: flex;


            @if $variant != 'indigo' {
                igx-icon {
                    --size: var(--ig-icon-size, #{rem(15px)});
                }
            }

            &::after {
                content: attr(data-sortIndex);
                position: absolute;
                top: rem(-5px);
                inset-inline-end: rem(-1px);
                font-size: rem(10px);
                text-align: end;
                font-family: sans-serif;
                line-height: rem(10px);
            }
        }
    }


    %igx-grid-th__expander {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-inline-end: rem(8px);
        cursor: pointer;

        igx-icon {
            @if $variant == 'indigo' {
                --component-size: 2;
            }

            color: var-get($theme, 'expand-icon-color');
        }

        &:hover {
            igx-icon {
                color: var-get($theme, 'expand-icon-hover-color');
            }
        }
    }

    %igx-grid-th__group-title {
        @include ellipsis();

        @if $variant == 'indigo' {
            @include type-style('detail-2', false);
        }
    }

    %igx-grid-th--collapsible {
        justify-content: normal;
    }

    %igx-grid-th--selectable {
        @if $variant != 'indigo' {
            opacity: if($theme-variant == 'light', .75, .85);

            &%grid__drag-ghost-image {
                opacity: 1;
            }
        } @else {
            opacity: 1;
        }

        .sort-icon {
            color: var-get($theme, 'header-selected-text-color');

            ::after {
                background: var-get($theme, 'header-selected-background');
            }
        }
    }

    // TODO, remove igx-banner__row extra div if possible
    @if $variant {
        %igx-banner__row {
            display: contents;
        }
    }

    %igx-grid-th--selected {
        .sort-icon::after {
            background: var-get($theme, 'header-selected-background');
        }
    }

    %igx-grid-th--selectable,
    %igx-grid-th--selected {
        color: var-get($theme, 'header-selected-text-color');
        background: var-get($theme, 'header-selected-background');

        &%igx-grid-th--sorted {
            .sort-icon {
                color: var-get($theme, 'header-selected-text-color');

	            > igx-icon {
		            color: inherit;
	            }

                &:focus,
                &:hover {
                    color: var-get($theme, 'header-selected-text-color');

	                > igx-icon {
		                color: inherit;
	                }
                }
            }
        }

        @if $variant == 'indigo' {
            %grid-excel-icon--filtered,
            %grid-excel-icon {
                color: var-get($theme, 'header-selected-text-color');

                igx-icon {
                    color: var-get($theme, 'header-selected-text-color');
                }

                &:focus,
                &:hover {
                    color: var-get($theme, 'header-selected-text-color');

                    igx-icon {
                        color: var-get($theme, 'header-selected-text-color');
                    }
                }
            }
        }
    }

    %igx-grid-th--active {
        @extend %grid-cell--active;

        %igx-grid-th--selected,
        %igx-grid-th--selectable {
            @extend %grid-cell--active;
        }
    }

    %igx-grid-summary--active {
        @extend %grid-cell--active !optional;
    }

    %igx-grid-th--sortable {
        .sort-icon {
            cursor: pointer;
            opacity: if($variant == 'indigo', if($theme-variant == 'light', .75, .85), .7);

            &:hover {
                opacity: 1;
            }
        }
    }

    %igx-grid-th--sorted {
        .sort-icon {
            opacity: 1;
            color: var-get($theme, 'sorted-header-icon-color');

	        > igx-icon {
		        color: inherit;
	        }

            &:hover {
                color: var-get($theme, 'sortable-header-icon-hover-color');

	            > igx-icon {
		            color: inherit;
	            }
            }
        }
    }

    %igx-grid-th--filtrable {
        %grid-cell-header-title {
            @if $variant != 'indigo' {
                opacity: .7;
            }
        }
    }

    %igx-grid-th--filtrable-sortable {
        .sort-icon {
            cursor: pointer;
            opacity: if($variant == 'indigo', 1, .7);

            &:hover {
                opacity: 1;
            }
        }
    }

    %grid-excel-icon--filtered,
    %grid-excel-icon,
    .sort-icon {
        transition: all 250ms ease-in-out;
    }

    %grid-cell-number {
        text-align: $grid-cell-align-num;
        justify-content: flex-end;
        flex-grow: 1;

        %grid-cell-header-icons {
            justify-content: flex-start;
            order: -1;

            .sort-icon {
                order: 1;
            }
        }
    }

    %grid__cbx-selection {
        display: flex;
        justify-content: center;
        align-items: center;
        background: inherit;
        z-index: 4;
        background-clip: border-box;
    }

    %cbx-padding {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-inline: pad-inline($cbx-padding-compact, $cbx-padding-cosy, $cbx-padding);
    }

    %grid__resize-handle {
        position: absolute;
        width: rem(4px);
        top: 0;
        inset-inline-end: rem(-2px);
        height: 100%;
        z-index: 2;
    }

    %grid__resize-line {
        position: absolute;
        cursor: col-resize;
        width: rem(4px);
        background: var-get($theme, 'resize-line-color');
        z-index: 2;

        &::before,
        &::after {
            position: absolute;
            content: '';
            height: 100%;
            width: rem(96px);
        }

        &::before {
            inset-inline-end: 100%;
        }

        &::after {
            inset-inline-start: 100%;
        }
    }

    %grid-summaries {
        display: flex;
        overflow: hidden;
        outline-style: none;
        background-color: var-get($theme, 'summaries-patch-background');
    }

    %grid-summaries--body {
        --summaries-patch-background: var(--ig-gray-100);

        border-bottom: rem(1px) dashed var-get($theme, 'row-border-color');
        background-color: var-get($theme, 'summaries-patch-background');

        &:last-of-type {
            border-bottom: none;
        }

        .igx-grid-summary {
          --background-color: inherit;
          --result-color: #{adaptive-contrast(var(--background-color))};
        }
    }

    %grid-summaries-patch {
        position: relative;
        background: inherit;
        border-inline-end: rem(1px) solid var-get($theme, 'header-border-color');
        z-index: 1;

        @if $variant == 'indigo' {
            border-top: rem(1px) solid var-get($theme, 'header-border-color');
        }
    }

    // Column moving
    %igx-grid-th__drop-indicator-left,
    %igx-grid-th__drop-indicator-right {
        position: absolute;
        width: rem(1px);
        height: 100%;
        top: 0;
        z-index: 1;
    }

    %igx-grid-th__drop-indicator-left {
        inset-inline-start: rem(-1px);
    }

    %igx-grid-th__drop-indicator-right {
        inset-inline-end: rem(-1px);
    }

    %igx-grid-th__drop-indicator--active {
        &%igx-grid-th__drop-indicator-left,
        &%igx-grid-th__drop-indicator-right {
            border-inline-end: rem(1px) solid var-get($theme, 'drop-indicator-color');
        }

        &::after,
        &::before {
            position: absolute;
            content: '';
            width: 0;
            height: 0;
            border-style: solid;
            inset-inline-start: rem(-3px);
        }

        &::before {
            bottom: 0;
            border-width: 0 rem(4px) rem(4px);
            border-color: transparent transparent var-get($theme, 'drop-indicator-color');
        }

        &::after {
            top: 0;
            border-width: rem(4px) rem(4px) 0;
            border-color: var-get($theme, 'drop-indicator-color') transparent transparent;
        }
    }

    %grid__scroll-on-drag-left,
    %grid__scroll-on-drag-right {
        position: absolute;
        width: rem(15px);
        top: 0;
        height: 100%;
        z-index: 25;
    }

    %grid__scroll-on-drag-left {
        inset-inline-start: 0;
    }

    %grid__scroll-on-drag-right {
        inset-inline-end: 0;
    }

    %grid__scroll-on-drag-pinned {
        position: absolute;
        width: rem(15px);
        height: 100%;
        top: 0;
        z-index: 25;
    }

    %grid__drag-ghost-image {
        position: absolute;
        display: flex;
        align-items: center;
        background: var-get($theme, 'ghost-header-background');
        color: var-get($theme, 'ghost-header-text-color');
        min-width: rem(168px);
        max-width: rem(320px);
        height: var(--header-size);
        min-height: var(--header-size);
        top: rem(-99999px);
        inset-inline-start: rem(-99999px);
        border: none;
        box-shadow: var-get($theme, 'drag-elevation');
        overflow: hidden;
        z-index: 20;

        %grid-cell-header-title {
            @include ellipsis();
            flex: 1 0 0;
            text-align: if($variant == 'indigo', start, end);
        }

        %grid-cell-header-icons {
            display: none;
        }

        %grid-thead-title {
            border: none;
        }
    }

    %grid__drag-ghost-image-icon {
        color: var-get($theme, 'ghost-header-icon-color');
        margin-inline-end: if($variant == 'indigo', rem(8px), rem(12px));
    }

    %grid__drag-ghost-image-icon-group {
        color: var-get($theme, 'ghost-header-icon-color');
        padding: $padding-comfortable;
        padding-inline-end: 0;
        margin-inline-end: rem(8);
    }

    %igx-grid__drag-col-header {
        background: var-get($theme, 'header-background');

        %grid-cell-header {
            > * {
                opacity: .4;
            }
        }
    }

    // Group by section
    %igx-grid__group-row {
        background: var-get($theme, 'group-row-background');
        display: flex;
        outline-style: none;
        border-bottom: rem(1px) solid var-get($theme, 'row-border-color');
        min-height: var(--header-size);

        %igx-grid__drag-indicator {
            cursor: default;
            flex-grow: 0;
        }

        %grid__cbx-selection {
            background: initial;
        }
    }

    %igx-grid__group-row--active {
        background: var-get($theme, 'group-row-selected-background');
        @extend %grid-cell--active !optional;

        %igx-grid__grouping-indicator {
            color: var-get($theme, 'expand-icon-color');
        }

        %igx-grid__drag-indicator {
            border: rem(1px) solid var-get($theme, 'cell-active-border-color');
            border-inline-start-width: 0;
            border-inline-end-width: 0;
            box-shadow: inset rem(1px) 0 0 0 var-get($theme, 'cell-active-border-color');
        }

        &:hover {
            background: var-get($theme, 'group-row-selected-background');
        }
    }

    %igx-group-label {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        line-height: rem(16px);
        gap: rem(4px);
    }

    %igx-group-label__icon {
        @at-root igx-icon#{&} {
            --component-size: #{if($variant == 'indigo', 2, 1)};

            color: var-get($theme, 'group-label-icon');
            user-select: none;
        }
    }

    %igx-group-label__column-name {
        @if $variant != 'indigo' {
            font-weight: 600;
            font-size: rem(12px);
        } @else {
            @include type-style('detail-2', false);
        }

        color: var-get($theme, 'group-label-column-name-text');

    }


        %igx-group-label__count-badge {
            --background-color: #{var-get($theme, 'group-count-background')};
            --text-color: #{var-get($theme, 'group-count-text-color')};

            @if $variant == 'indigo' {
                --shadow: none;
            }

            > span {
                font-size: $grid-head-fs;
            }
        }


    %igx-group-label__text {
        @if $variant != 'indigo' {
            font-size: rem(13px);
        } @else {
            @include type-style('detail-1', false);
        }
        color: var-get($theme, 'group-label-text')
    }

    [dir='rtl'] {
        %igx-group-label {
            > * {
                margin-inline-start: rem(4px);

                &:last-child {
                    margin-inline-start: 0;
                }
            }
        }
    }

    %igx-grid__group-content {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex: 1 1 auto;
        @if $variant != 'indigo' {
            padding-inline-start: pad-inline(
                map.get($grid-grouping-indicator-padding, 'compact'),
                map.get($grid-grouping-indicator-padding, 'cosy'),
                map.get($grid-grouping-indicator-padding, 'comfortable')
            );
        } @else {
            padding-inline-start: 0;
        }

        min-height: sizable(
            map.get($grid-header-height, 'compact'),
            map.get($grid-header-height, 'cosy'),
            map.get($grid-header-height, 'comfortable')
        );

        &:focus {
            outline: transparent;
        }
    }

    %igx-grid__row-indentation {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-inline-start: pad-inline(
            map.get($grid-grouping-indicator-padding, 'compact'),
            map.get($grid-grouping-indicator-padding, 'cosy'),
            map.get($grid-grouping-indicator-padding, 'comfortable')
        );
        padding-inline-end: pad-inline(
            map.get($grid-grouping-indicator-padding, 'compact'),
            map.get($grid-grouping-indicator-padding, 'cosy'),
            map.get($grid-grouping-indicator-padding, 'comfortable')
        );
        border-inline-end: rem(1px) solid var-get($theme, 'header-border-color');
        background: inherit;
        z-index: 1;
        background-clip: border-box;

        &::after {
            content: '';
            position: absolute;
            width: 100%;
            height: rem(1px);
            bottom: rem(-1px);
            inset-inline-start: 0;
            background: transparent;
        }

        %igx-icon-button-display {
            width: rem(28px);
            height: rem(28px);
            color: var-get($theme, 'expand-all-icon-color');
        }

        &:focus,
        &:hover {
            %igx-icon-button-display {
                color: var-get($theme, 'expand-all-icon-hover-color');
            }
        }
    }

    %igx-grid-grouparea {
        grid-row: 2;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        border-bottom: $grid-header-border;
        background: var-get($theme, 'grouparea-background');
        color: var-get($theme, 'grouparea-color');
        min-height: var(--grouparea-size);
        padding-inline: pad-inline(
            map.get($grouparea-padding-inline, 'compact'),
            map.get($grouparea-padding-inline, 'cosy'),
            map.get($grouparea-padding-inline, 'comfortable')
        );
        padding-block: 0;
        z-index: 2;
        height: 100%;
        overflow: hidden;

        &:focus {
            outline-style: none;
        }

        %igx-chip {
            margin-block: pad-block(rem(4px), rem(8px), rem(8px));
        }
    }

    %igx-grid-grouparea__connector {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        margin: 0 rem(4px);

        igx-icon {
            width: var(--ig-icon-size, #{rem(16px)});
            height: var(--ig-icon-size, #{rem(16px)});
            font-size: var(--ig-icon-size, #{rem(16px)});
        }

        [dir='rtl'] & {
            transform: scaleX(-1);
        }
    }

    %igx-drop-area {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        min-width: rem(80px);
        height: sizable(
            map.get($drop-area-height, 'compact'),
            map.get($drop-area-height, 'cosy'),
            map.get($drop-area-height, 'comfortable')
        );

        @if $variant != 'indigo' {
            padding-inline: pad-inline(
                map.get($grid-cell-padding-inline, 'compact'),
                map.get($grid-cell-padding-inline, 'cosy'),
                map.get($grid-cell-padding-inline, 'comfortable')
            );
        } @else {
            padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
        }

        padding-block: 0;
        flex: 1 0 0%;
        background: var-get($theme, 'drop-area-background');
        border-radius: var-get($theme, 'drop-area-border-radius');

        %igx-drop-area__icon {
            color: var-get($theme, 'drop-area-icon-color');
            width: rem(16px);
            height: rem(16px);
            font-size: rem(16px);
            margin-inline-end: rem(8px);
        }
    }

    %igx-drop-area--hover {
        background: var-get($theme, 'drop-area-on-drop-background');
    }

    %igx-drop-area__text {
        @include ellipsis();
        color: var-get($theme, 'drop-area-text-color');
        font-size: rem(13px);
    }

    %igx-grid__grouping-indicator {
        position: relative;
        display: flex;
        user-select: none;
        justify-content: center;
        align-items: center;
        z-index: 1;
        cursor: pointer;
        padding-inline-end: if($variant == 'indigo', rem(16px), rem(12px));
        margin-inline-start: sizable(
            #{map.get($grid-grouping-indicator-padding, 'compact')},
            #{map.get($grid-grouping-indicator-padding, 'cosy')},
            #{map.get($grid-grouping-indicator-padding, 'comfortable')
        });
        min-height: var(--header-size);

        igx-icon {
            --component-size: #{if($variant == 'indigo', 2, 3)};

            color: var-get($theme, 'expand-icon-color');
        }

        &:hover,
        &:focus {
            outline-style: none;

            igx-icon {
                color: var-get($theme, 'expand-icon-hover-color');
            }
        }

        [dir='rtl'] & {
            transform: scaleX(-1);
        }
    }

    %igx-grid__header-indentation {
        position: relative;
        padding-inline-end: sizable(
            map.get($grid-grouping-indicator-padding, 'compact'),
            map.get($grid-grouping-indicator-padding, 'cosy'),
            map.get($grid-grouping-indicator-padding, 'comfortable')
        );
        border-inline-end: rem(1px) solid var-get($theme, 'header-border-color');
        background: var-get($theme, 'header-background');
        z-index: 4;

        igx-icon {
            --component-size: #{if($variant == 'indigo', 2, 3)};
        }
    }

    %igx-grid__group-expand-btn {
        position: absolute;
        cursor: pointer;
        user-select: none;
        inset-block-start: calc(50% - #{$indicator-icon-width} / 2);
        inset-inline-start: var(--indicator-inline-inset);

        &:hover {
            color: var-get($theme, 'expand-icon-hover-color');
        }

        &%igx-grid__group-expand-btn--push {
            inset-block-start: sizable(
                math.div(map.get($grid-header-height, 'compact') - $indicator-icon-width, 2),
                math.div(map.get($grid-header-height, 'cosy') - $indicator-icon-width, 2),
                math.div(map.get($grid-header-height, 'comfortable') - $indicator-icon-width, 2)
            );
        }
    }

    @for $i from 1 through 10 {
        $row-indentation-level: (
            comfortable: calc(#{$i * map.get($grid-grouping-indicator-padding, 'comfortable')} + #{$indicator-icon-width}),
            cosy: calc(#{$i * map.get($grid-grouping-indicator-padding, 'cosy')} + #{$indicator-icon-width}),
            compact: calc(#{$i * map.get($grid-grouping-indicator-padding, 'compact')} + #{$indicator-icon-width})
        );

        $level--comfortable: map.get($row-indentation-level, 'comfortable');
        $level--cosy: map.get($row-indentation-level, 'cosy');
        $level--compact: map.get($row-indentation-level, 'compact');

        %igx-grid__row-indentation--level-#{$i} {
            --indicator-inline-inset: #{sizable(
                map.get($grid-grouping-indicator-padding, 'compact'),
                map.get($grid-grouping-indicator-padding, 'cosy'),
                map.get($grid-grouping-indicator-padding, 'comfortable')
            )};
            padding-inline-start: pad-inline($level--compact, $level--cosy, $level--comfortable);
        }

        $indicator-padding--comfortable: #{$i * map.get($grid-grouping-indicator-padding, 'comfortable')};
        $indicator-padding--cosy: #{$i * map.get($grid-grouping-indicator-padding, 'cosy')};
        $indicator-padding--compact: #{$i * map.get($grid-grouping-indicator-padding, 'compact')};

        %igx-grid__group-row--padding-level-#{$i} {
            %igx-grid__grouping-indicator {
                padding-inline-start: pad-inline($indicator-padding--compact, $indicator-padding--cosy, $indicator-padding--comfortable);
            }
        }
    }

    %igx-grid__outlet {
        --ig-size: var(--grid-size);

        z-index: 10002;
        position: fixed;
    }

    %igx-grid__loading-outlet {
        width: 100%;
        height: 100%;
        z-index: -1;
        position: absolute;

        > %overlay-wrapper--modal {
            background: none;
        }

        %circular-display {
            width: rem(50);
            height: rem(50);
        }
    }

    %igx-grid__row-editing-outlet {
        z-index: 10000;
        position: absolute;

        %overlay-wrapper {
            /* Change wrapper position from 'fixed' to 'absolute' so that it is hidden when scrolled below the parent grid body content. */
            position: absolute;
        }
    }

    %igx-grid__addrow-snackbar {
        position: absolute;
        z-index: 5;
        bottom: rem(24px);
        inset-inline-start: 50%;
        transform: translateX(-50%);
    }

    %igx-grid__filtering-cell {
        display: flex;
        align-items: center;
        border-inline-end: $grid-header-border;
        border-top: $grid-header-border;
        height: var(--header-size);

        @if $variant != 'indigo' {
            padding-inline: pad-inline(
                map.get($grid-header-padding-inline, 'compact'),
                map.get($grid-header-padding-inline, 'cosy'),
                map.get($grid-header-padding-inline, 'comfortable')
            );
        } @else {
            padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
        }

        padding-block: 0;
        overflow: hidden;

        igx-chips-area {
            transition: transform .25s $ease-out-back;
            flex-wrap: nowrap;

            .igx-filtering-chips__connector {
                font-size: rem(12px);
                text-transform: uppercase;
                font-weight: 600;
                margin: 0 rem(8px);
            }
        }
    }

    %igx-grid__filtering-cell--selected {
        color: var-get($theme, 'header-selected-text-color');
        background: var-get($theme, 'header-selected-background');
    }

    %igx-grid__filtering-cell-indicator {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-inline-end: rem(8px);
        margin-inline-start: rem(8px);
        cursor: pointer;
        visibility: visible;

        igx-icon {
            --component-size: #{if($variant == 'indigo', 2, 1)};
        }

        %igx-badge-display {
            --size: #{rem(14px)};
            --font-size: #{rem(12px)};
            line-height: 0;
            position: absolute;
            inset-inline-end: 0;
        }
    }

    %igx-grid__filtering-cell-indicator--hidden {
        visibility: hidden;
    }

    %igx-grid__filtering-row {
        position: absolute;
        display: flex;
        width: 100%;
        height: $filtering-row-height;
        padding-inline: pad-inline($cell-padding-compact, $cell-padding-cosy, $cell-padding-comfortable);
        align-items: center;
        justify-content: space-between;
        background: var-get($theme, 'filtering-row-background');
        color: var-get($theme, 'filtering-row-text-color');
        inset-inline-start: 0;
        bottom: 0;
        z-index: 3;

        &::after {
            display: block;
            position: absolute;
            content: '';
            background: inherit;
            inset-inline-start: 0;
            inset-inline-end: 0;
            top: 0;
            bottom: 0;
            box-shadow: 0 rem(1px) 0 var-get($theme, 'filtering-row-background'),
                0 rem(4px) rem(10px) rgba(0, 0, 0, .12);
            z-index: -1;
        }

        @extend %filtering-row-input-overrides !optional;

        igx-input-group {
            --ig-size: var(--grid-size) !important;
        }

        [igxIconButton] {
            --ig-size: 1;
        }

        @if $variant == 'bootstrap' {
            [igxButton] {
                margin: rem(4px);
            }
        }
    }

    %igx-grid__filtering-dropdown-items {
        display: flex;
        align-items: center;
    }

    %igx-grid__filtering-dropdown-text {
        margin-inline-start: rem(16px);
    }

    %igx-grid__filtering-row-main {
        display: flex;
        flex: 1;
        overflow: hidden;
        max-width: calc(100% - 176px);
        min-width: rem(56px);

        igx-chips-area {
            transition: transform .25s $ease-out-back;
            flex-wrap: nowrap;
            margin-inline: if($variant == 'indigo', rem(12px), rem(8px));
            gap: rem(4px);
        }

        @if $variant != 'indigo' {
            igx-chip {
                margin: 0 rem(4px);
            }

            [igxButton] {
                igx-icon {
                    position: absolute;
                    inset-inline-start: rem(12px);
                    // IE fix for vertical alignment
                    top: 50%;
                    transform: translateY(-50%);
                }

                span {
                    margin-inline-start: rem(16px);
                }
            }
        }
    }

    %igx-grid__filtering-scroll-start {
        &::after {
            @include _filtering-scroll-mask($theme, right);
            inset-inline-start: calc(100% + 6px);
        }

        [dir='rtl'] & {
            &::before {
                @include _filtering-scroll-mask($theme, right);
                inset-inline-end: calc(100% + 6px);
            }
        }
    }

    %igx-grid__filtering-scroll-end {
        &::before {
            @include _filtering-scroll-mask($theme, left);
            inset-inline-end: calc(100% + 6px);
        }

        [dir='rtl'] & {
            &::after {
                @include _filtering-scroll-mask($theme, left);
                inset-inline-start: calc(100% + 6px);
            }
        }
    }

    %igx-grid__filtering-scroll-start,
    %igx-grid__filtering-scroll-end {
        width: rem(24px);
        height: rem(24px);
        position: relative;
        overflow: visible;
        margin: if($variant == 'indigo', rem(12px), rem(8px));
        z-index: 1;

        [dir='rtl'] & {
            transform: scaleX(-1);

            &::after {
                content: initial;
            }
        }
    }

    %igx-grid__tr--highlighted {
        position: relative;

        &::after {
            content: '';
            position: absolute;
            top: 0;
            inset-inline-start: 0;
            width: rem(4px);
            height: 100%;
            background: var-get($theme, 'row-highlight');
            z-index: 3;
        }

        %igx-grid__tr--edited {
            &::before {
                inset-inline-start: rem(4px);
            }
        }

        &::before {
            inset-inline-start: rem(4px);
        }
    }

    %igx-grid__tr-container {
        overflow: auto;
        width: 100%;
        border-bottom: rem(1px) solid var-get($theme, 'row-border-color');
    }

    %igx-grid__tr-container--active {
        @extend %grid-cell--active !optional;
    }

    %igx-grid__hierarchical-expander {
        user-select: none;
        background: inherit;
        padding-inline: pad-inline(
            map.get($hierarchical-grid-indent, 'compact'),
            map.get($hierarchical-grid-indent, 'cosy'),
            map.get($hierarchical-grid-indent, 'comfortable')
        );
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 3;
        color: var-get($theme, 'expand-icon-color');
        background-clip: border-box;

        &:focus {
            outline: none;

            igx-icon {
                color: var-get($theme, 'expand-icon-hover-color');
            }
        }

        &:hover {
            igx-icon {
                color: var-get($theme, 'expand-icon-hover-color');
            }
        }

        igx-icon {
            --component-size: #{if($variant == 'indigo', 2, 3)};;

            color: var-get($theme, 'expand-icon-color');
            max-width: $hierarchical-action-icon;
            min-width: min-content;
        }

        [dir='rtl'] & {
            transform: scaleX(-1);
        }

        &--empty {
            cursor: default;
            pointer-events: none;
        }
    }

    %igx-grid__hierarchical-expander--header {
        background: inherit;
        border-inline-end: rem(1px) solid var-get($theme, 'header-border-color');
        z-index: 3;
        background-clip: border-box;

        igx-icon {
            display: flex;
            align-items: center;
        }
    }

    %igx-grid__hierarchical-expander--push {
        align-items: flex-start;

        igx-icon {
            min-height: var(--header-size);
            max-height: var(--header-size);
        }
    }

    %igx-grid__header-indentation--no-border {
        border-inline-end: rem(1px) solid transparent;
    }

    %igx-grid__hierarchical-indent {
        display: flex;
        margin-inline-start: pad-inline(
            map.get($hierarchical-indent, 'compact'),
            map.get($hierarchical-indent, 'cosy'),
            map.get($hierarchical-indent, 'comfortable')
        );
        margin-inline-end: pad-inline(
            map.get($hierarchical-grid-indent, 'compact'),
            map.get($hierarchical-grid-indent, 'cosy'),
            map.get($hierarchical-grid-indent, 'comfortable')
        );
        margin-block: pad-block(
            map.get($hierarchical-grid-indent, 'compact'),
            map.get($hierarchical-grid-indent, 'cosy'),
            map.get($hierarchical-grid-indent, 'comfortable')
        );

        &--scroll {
            margin-inline-end: pad-inline(
                map.get($hierarchical-indent-scroll, 'compact'),
                map.get($hierarchical-indent-scroll, 'cosy'),
                map.get($hierarchical-indent-scroll, 'comfortable')
            );
        }
    }

    @include excel-filtering($theme);

    %advanced-filtering-dialog {
	    @if $variant == 'indigo' {
		    $light-variant: contrast-color($color: 'gray', $variant: 900);
		    $dark-variant: color($color: 'gray', $variant: 50);
		    background: if($theme-variant == 'light', $light-variant,  $dark-variant);
	    } @else {
		    background: color($color: 'surface', $variant: 500);
	    }

        box-shadow: elevation(if($variant == 'indigo', if($theme-variant == 'light', 24, 23), 24));

        @if $variant == 'material' or $variant == 'bootstrap' {
            border-radius: rem(4px);
        }

        @if $variant == 'fluent' {
            border-radius: rem(2px);
        }

        @if $variant == 'indigo' {
            border-radius: rem(10px);
        }

        igx-query-builder {
            box-shadow: none;
            border: none;
            border-radius: inherit;
        }

        igx-query-builder-header {
            cursor: grab;
        }
    }

    %igx-grid__filtering-row-editing-buttons--small,
    %igx-grid__filtering-row-editing-buttons {
        display: flex;
        align-items: center;

        button {
            transition: none;
        }
    }

    %igx-grid__filtering-row-editing-buttons--small {
        button {
            &:not([disabled]) {
                igx-icon {
                    color: var-get($theme, 'sorted-header-icon-color');
                }
            }
        }
    }

    %igx-grid__tr-action {
        &:last-of-type {
            border-inline-end: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
            @if $variant != 'indigo' {
                min-height: sizable(
                    rem(32px),
                    rem(40px),
                    rem(50px)
                );
            } @else {
                min-height: sizable(
                    rem(32px),
                    rem(40px),
                    rem(48px)
                );
            }
        }
    }

    igx-child-grid-row {
        igx-child-grid-row {
            %igx-grid__tr-action {
                border-inline-end: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
            }
        }
    }

    // Pivot grid
    %igx-grid__pivot--super-compact {
        --ig-size: 1 !important;
        %grid-cell-display,
        %grid-cell-header {
            padding: 0 if($variant != 'indigo', rem(4px), rem(6px)) !important;
            min-height: rem(24px) !important;
            height: rem(24px);
        }

        %grid-cell-header {
            > * {
                line-height: normal;
                align-self: initial;
                max-height: 100%;
            }
        }

        %igx-grid__tr-pivot--row-area {
            padding-bottom: rem(4px);
        }
    }

    %grid-thead--pivot {
        display: flex;

        %grid-thead--virtualizationWrapper {
            border-inline-start: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
        }
    }

    %grid-thead--virtualizationWrapper {
        height: 100%;
    }

    %grid-thead--virtualizationContainer {
        overflow: visible;
        height: 100%;
    }

    %igx-grid__tr-pivot {
        display: flex;
        align-items: center;
        background: inherit;
        overflow: hidden;
        z-index: 3;
        height: var(--header-size);

        @if $variant != 'indigo' {
            padding-inline: pad-inline(
                map.get($grid-header-padding-inline, 'compact'),
                map.get($grid-header-padding-inline, 'cosy'),
                map.get($grid-header-padding-inline, 'comfortable')
            );
        } @else {
            padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
        }

        padding-block: 0;
        background-clip: border-box !important;
        border-inline-start: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
        border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');

        igx-chips-area {
            flex-wrap: nowrap;
            width: auto;

            > * {
                margin-inline-end: rem(4px);
            }

            &:last-child {
                margin-inline-end: 0;
            }
        }
    }

    %igx-grid__pivot-filter-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        position: relative;

        > igx-badge {
            position: absolute;
            top: rem(-4px);
            inset-inline-start: 60%;
            width: rem(18px);
            min-width: rem(18px);
            height: rem(18px);
            font-size: rem(10px);
            pointer-events: none;
            user-select: none;
        }
    }

    %igx-grid__pivot-empty-chip-area {
        @if $variant != 'indigo' {
            line-height: normal;
            font-size: rem(14px);
        } @else {
            @include type-style('body-2');

            @if $theme-variant == 'light' {
                color: color($color: 'gray', $variant: 600);
            } @else {
                color: contrast-color($color: 'gray', $variant: 50, $opacity: .6);
            }
        }

        margin-inline-end: 0 !important;
    }

    %igx-grid__tr-pivot--row-area {
        height: auto !important;
        align-items: flex-end;
        padding-bottom: pad-block(
            map.get($pivot-row-aria-padding, 'compact'),
            map.get($pivot-row-aria-padding, 'cosy'),
            map.get($pivot-row-aria-padding, 'comfortable')
        );
        border-inline-start: 0;
        border-bottom: 0;
    }

    %igx-grid__tr-pivot--small-row-area {
        height: var(--header-size);
        align-items: flex-end;

        border-inline-start: 0;
        border-inline-end: 0;
        border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
    }

    %igx-grid__tr-pivot--filter-container {
        display: flex;
        flex-direction: column;
    }

    %igx-grid__tr-pivot--chip_drop_indicator {
        width: rem(2px);
        background: var-get($theme, 'resize-line-color');
        visibility: hidden;
    }

    %igx-grid__tr-pivot--drop-row-area {
        flex-grow: 1;
    }

    %igx-grid__tr-pivot--filter {
        height: var(--header-size);

        border-inline-start: 0;
        border-inline-end: 0;
        border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
    }

    %igx-grid-thead__wrapper--pivot {
        border-bottom: 0;
    }

    %igx-grid__tr-pivot-group {
        flex: 1;
    }

    %igx-grid__tr-pivot-toggle-icons {
        display: inline-flex !important;
    }

    %igx-grid__tr-pivot--columnDimensionLeaf {
        box-shadow: none;

        igx-grid-header {
            border: none;
        }
    }

    %igx-grid__tr-pivot--columnMultiRowSpan {
        igx-grid-header {
            > * {
                visibility: hidden;
            }
        }
    }

    %igx-grid__tr-header-row {
        igx-pivot-row-dimension-header-group {
            igx-pivot-row-dimension-header {
                align-items: center;
            }

            @if $variant == 'indigo' {
                igx-icon {
                    opacity: if($theme-variant == 'light', .75, .85);

                    &:hover {
                        opacity: 1;
                        cursor: pointer;
                    }
                }
            }
        }

        igx-pivot-row-header-group {
            @if $variant != 'indigo' {
                padding-inline-start: pad-inline(
                    map.get($grid-header-padding-inline, 'compact'),
                    map.get($grid-header-padding-inline, 'cosy'),
                    map.get($grid-header-padding-inline, 'comfortable')
                );
            } @else {
                padding-inline-start: pad-inline(rem(8px), rem(12px), rem(16px));
            }

            igx-pivot-row-dimension-header {
                align-items: center;

                .igx-grid-th__icons {
                    @if $variant != 'indigo' {
                        padding-inline-end: pad-inline(
                            map.get($grid-header-padding-inline, 'compact'),
                            map.get($grid-header-padding-inline, 'cosy'),
                            map.get($grid-header-padding-inline, 'comfortable')
                        );
                    } @else {
                        padding-inline-end: pad-inline(rem(8px), rem(12px), rem(16px));
                    }

                    align-self: center;
                }
            }

            &:last-of-type {
                igx-pivot-row-dimension-header {
                    border-inline-end: 0;
                }
            }
        }
    }

    .igx-pivot-grid-row-filler__wrapper {
        .igx-grid-thead__wrapper {
            height: 100%;
            border-bottom: initial;

            .igx-grid-th {
                height: 100%;
            }
        }
    }

    %igx-grid__tbody-pivot-mrl-dimension {
        .igx-grid-th {
            border-bottom: none;
        }
    }

    // Pivot grid END
}