@include exports("grid/theme") {

    $tooltip-bg: $primary !default;
    $tooltip-text: contrast-wcag($primary) !default;

    .k-grid-header,
    .k-header,
    .k-grid-header-wrap,
    .k-grouping-header,
    .k-grouping-header .k-group-indicator,
    .k-grid td,
    .k-grid-footer,
    .k-grid-footer-wrap,
    .k-grid-content-locked,
    .k-grid-footer-locked,
    .k-grid-header-locked,
    .k-filter-row > td,
    .k-filter-row > th {
        @include fill( $border: $grid-header-border );
    }

    .k-grid-header,
    .k-grid-toolbar,
    .k-grouping-header,
    .k-grid-add-row,
    .k-grid-footer {
        @include fill(
            $color: $grid-header-text,
            $bg: $grid-header-bg
        );
    }

    .k-drag-clue {
        @include fill(
            $color: $grid-group-drag-clue-text,
            $bg: $grid-group-drag-clue-bg
        );
    }

    .k-grid-content {
        // setting this background color resolves glitches in iOS
        @include fill($bg: $grid-bg );
    }

    .k-group-footer td,
    .k-grouping-row td,
    tbody .k-group-cell {
        @include fill(
            $color: $grid-grouping-row-text,
            $bg: $grid-grouping-row-bg
        );
    }

    .k-grouping-dropclue {
        &::before {
            border-color: $grid-header-text transparent transparent;
        }

        &::after {
            background-color: $grid-header-text;
        }
    }

    .k-grid {
        @include fill( $grid-text, $grid-bg, $grid-border );

        // Alt row
        tr.k-alt {
            background-color: $grid-alt-bg;
        }

        // Hover state
        tbody tr:hover,
        tbody tr.k-state-hover {
            color: $grid-hovered-text;
            background-color: $grid-hovered-bg;
        }

        // Selected state
        td.k-state-selected,
        tr.k-state-selected > td {
            color: $grid-selected-text;
            background-color: $grid-selected-bg;
        }

        // Focused state
        td.k-state-focused,
        th.k-state-focused {
            box-shadow: $grid-focused-shadow;
        }

        .k-grid-filter,
        .k-header-column-menu,
        .k-hierarchy-cell .k-icon {
            color: $grid-header-text;
        }

        .k-grouping-row {
            background-color: $grid-grouping-row-bg;

            .k-icon {
                color: $grid-header-text;
            }
        }

        .k-grid-search {
            color: $body-text;
        }

        // Locked columns
        .k-grid-header-locked {
            @include fill(
                $grid-sticky-header-text,
                $grid-sticky-header-bg,
                $grid-sticky-header-border
            );
        }

        .k-grid-content-locked {
            @include fill( $border: $grid-sticky-header-border );

            td {
                @include fill(
                    $grid-sticky-text,
                    $grid-sticky-bg,
                    $grid-sticky-border
                );
            }

            .k-alt td {
                @include fill( $bg: $grid-sticky-alt-bg );
            }

            // Selected state
            .k-state-selected td {
                @include fill( $bg: $grid-sticky-selected-bg );
            }

            .k-state-selected.k-alt td {
                @include fill( $bg: $grid-sticky-selected-alt-bg );
            }

            // Hovered state
            .k-state-hover td,
            tr:hover td {
                @include fill( $bg: $grid-sticky-hovered-bg );
            }

            // Selected hover
            .k-state-selected:hover td,
            .k-state-selected.k-state-hover td {
                @include fill( $bg: $grid-sticky-selected-hovered-bg );
            }
        }
    }

    col.k-sorted,
    th.k-sorted {
        background-color: $grid-sorted-bg;
    }

    // Grid header / footer
    .k-grid-header {

        .k-i-sort-asc-sm,
        .k-i-sort-desc-sm,
        .k-sort-order {
            color: $grid-sorting-indicator-text;
        }

        .k-grid-filter,
        .k-header-column-menu,
        .k-hierarchy-cell .k-icon {
            &:hover {
                color: $button-hovered-text;
                background-color: $button-hovered-bg;
            }
            &:focus {
                box-shadow: inset 0 0 0 2px rgba( 0, 0, 0, .1 );
            }
            &.k-state-active {
                color: $selected-text;
                background-color: $selected-bg;
            }
        }

        .k-grid-header-sticky,
        .k-grid-header-sticky.k-sorted {
            @include fill(
                $grid-sticky-header-text,
                $grid-sticky-header-bg,
                $grid-sticky-header-border
            );
        }
    }

    // Content
    .k-master-row {
        .k-grid-content-sticky {
            @include fill(
                $grid-sticky-text,
                $grid-sticky-bg,
                $grid-sticky-border
            );
        }

        &.k-alt {
            .k-grid-content-sticky {
                @include fill( $bg: $grid-sticky-alt-bg );
            }
        }

        // Selected state
        &.k-state-selected .k-grid-content-sticky {
            @include fill( $bg: $grid-sticky-selected-bg );
        }

        &.k-state-selected.k-alt .k-grid-content-sticky {
            @include fill( $bg: $grid-sticky-selected-alt-bg );
        }


        // Hovered state
        &:hover .k-grid-content-sticky,
        &.k-state-hover .k-grid-content-sticky {
            background-color: $grid-sticky-hovered-bg;
        }


        // Selected hover
        &.k-state-selected:hover .k-grid-content-sticky,
        &.k-state-selected.k-state-hover .k-grid-content-sticky {
            background-color: $grid-sticky-selected-hovered-bg;
        }
    }

    .k-group-footer {
        .k-grid-footer-sticky {
            @include fill( $bg: $grid-sticky-footer-bg );
        }

        &:hover .k-grid-footer-sticky,
        &.k-state-hover .k-grid-footer-sticky {
            @include fill( $bg: $grid-sticky-footer-hovered-bg );
        }
    }

    .k-column-list-item:hover,
    .k-columnmenu-item:hover {
        @include fill(
            $list-item-hovered-text,
            $list-item-hovered-bg
        );
    }

    .k-columnmenu-item {
        &.k-state-selected {
            @include fill(
                $list-item-selected-text,
                $list-item-selected-bg
            );
        }
    }

    .k-column-menu {

        .k-menu:not(.k-context-menu) {

            @include fill(
                $popup-text,
                $popup-bg,
                $popup-border
            );

            .k-item {
                @include fill(
                    $list-item-text,
                    $list-item-bg
                );

                &:hover,
                &.k-state-hover {
                    @include fill(
                        $list-item-hovered-text,
                        $list-item-hovered-bg
                    );
                }

                &.k-state-selected {
                    @include fill(
                        $list-item-selected-text,
                        $list-item-selected-bg
                    );
                }

                &:focus,
                &.k-state-focused {
                    @include box-shadow( $list-item-focused-shadow );
                }
            }
        }
    }

    .k-grid-norecords-template {
        background-color: $grid-bg;
        border-color: $grid-border;
    }

}