@include exports("grid/theme") {

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

        td,
        .k-grid-content,
        .k-grid-header-locked,
        .k-grid-content-locked {
            border-color: $grid-border;
        }

        // Alt row
        .k-alt {
            color: $grid-alt-text;
            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
        th.k-state-selected,
        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;
        }

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

        // Locked

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


    // Toolbar
    .k-grid-toolbar {
        @include fill(
            $toolbar-text,
            $toolbar-bg,
            inherit,
            $toolbar-gradient
        );
    }


    // Grouping header
    .k-grouping-header {
        @include fill( $grid-header-text, $grid-header-bg, $grid-header-border );
    }
    .k-grouping-header .k-group-indicator {
        @include fill(
            $button-text,
            $button-bg,
            $button-border,
            $button-gradient
        );
    }


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

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

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

        .k-grid-footer-locked {
            border-color: inherit;
        }
    }


    // Pager
    .k-grid-pager {
        @include fill( $grid-header-text, $grid-header-bg, $grid-header-border );
    }


    // Grouping
    .k-grouping-row,
    .k-group-cell {
        @include fill( $grid-header-text, $grid-header-bg, $grid-header-border );
    }

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

    .k-column-list-wrapper {
        border-color: inherit;
    }

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