.#{$prefix}grid-body {
    background: $panel-body-background-color;
    border-width: $grid-body-border-width;
    border-style: $grid-body-border-style;
    border-color: $grid-body-border-color;
}

.#{$prefix}grid-empty {
    padding: 10px;
    color: gray;
    font: normal 11px tahoma, arial, helvetica, sans-serif;
}

.#{$prefix}grid-view {
    overflow: hidden;
    position: relative;
}

.#{$prefix}grid-table {
    table-layout: fixed;
    border-collapse: separate;
}

.#{$prefix}grid-row {
    .#{$prefix}grid-cell {
        @if $grid-row-cell-color {
            color: $grid-row-cell-color;
        }
        font: $grid-row-cell-font;
        background-color: $grid-row-cell-background-color;
        border-color: $grid-row-cell-background-color;
        border-style: $grid-row-cell-border-style;
        border-width: $grid-cell-border-width 0;
    }
}

.#{$prefix}grid-with-row-lines .#{$prefix}grid-cell {
    border-width: $grid-row-cell-border-width;
    border-top-color: lighten($grid-row-cell-border-color, 5);
    border-bottom-color: $grid-row-cell-border-color;
}

.#{$prefix}grid-row-alt .#{$prefix}grid-td {
    background-color: $grid-row-cell-alt-background-color;
}

.#{$prefix}grid-row-over .#{$prefix}grid-td {
    border-color: $grid-row-cell-over-border-color;
    background-color: $grid-row-cell-over-background-color;
}

.#{$prefix}grid-row-focused .#{$prefix}grid-td {
    border-top: $grid-cell-border-width $grid-row-focus-border-style $grid-row-cell-focus-border-color!important;
    border-bottom: $grid-cell-border-width $grid-row-focus-border-style $grid-row-cell-focus-border-color!important;
    background-color: $grid-row-cell-focus-background-color;
}

.#{$prefix}grid-row-selected {
    .#{$prefix}grid-td {
        border-style: $grid-row-cell-selected-border-style;
        border-color: $grid-row-cell-selected-border-color;
        background-color: $grid-row-cell-selected-background-color !important;
    }
}

// The two rules below ensure that summary rows which are embedded within selected/focused
// wrapped rows do not also get a visible border.
.#{$prefix}grid-row-selected .#{$prefix}grid-row-summary .#{$prefix}grid-td {
    border-bottom-color: $grid-row-cell-selected-background-color!important;
    border-top-width: 0!important;
}
.#{$prefix}grid-row-focused .#{$prefix}grid-row-summary .#{$prefix}grid-td {
    border-bottom-color: $grid-row-cell-focus-background-color!important;
    border-top-width: 0!important;
}

.#{$prefix}grid-cell {
    overflow: hidden;
    border-color: $grid-row-cell-background-color;
    vertical-align: middle;
}

// Special cases like row expander columns, row numberer columns, checkbox columns, and action columns are top aligned
.#{$prefix}grid-cell-special, .#{$prefix}grid-cell-checkcolumn, .#{$prefix}action-col-cell {
    vertical-align: top;
}

.#{$prefix}grid-cell-inner {
    overflow: hidden;

    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;

    line-height: $grid-row-cell-line-height;
    padding: $grid-cell-inner-padding;

    white-space: nowrap;
}

@if $include-ext-grid-rownumberer or $include-ext-selection-checkboxmodel {
    // .x-grid-cell-special is used by both RowNumberer and CheckboxModel
    .#{$prefix}grid-row .#{$prefix}grid-cell-special {
        padding: 0;
        border-right: $grid-cell-border-width solid $grid-cell-special-border-color;
        @if $grid-cell-special-background-color != null {
            @if $grid-cell-special-background-gradient == null {
                background-color: $grid-cell-special-background-color;
            } @else {
                @include background-gradient($grid-cell-special-background-color, $grid-cell-special-background-gradient);
            }
        }
    }

    @if $include-rtl {
        @if $grid-cell-special-border-color != null {
            .#{$prefix}grid-row .#{$prefix}rtl.#{$prefix}grid-cell-special {
                border-right: 0;
                border-left: $grid-cell-border-width solid $grid-cell-special-border-color;
            }
        }
    }

    .#{$prefix}grid-row-selected .#{$prefix}grid-cell-special {
        @if $grid-cell-special-selected-border-color != null {
            border-right: $grid-cell-border-width solid $grid-cell-special-selected-border-color;
        }
        @if $grid-row-cell-selected-background-color != null {
            @if $grid-cell-special-background-gradient == null {
                background-color: $grid-row-cell-selected-background-color;
            } @else {
                @include background-gradient($grid-row-cell-selected-background-color, $grid-cell-special-background-gradient, left);
            }
        }
    }

    .#{$prefix}grid-cell-special .#{$prefix}grid-cell-inner {
        padding-left: 4px;
        padding-right: 4px;

        // This is needed in IEQuirks to give the cell-inner layout so that padding-bottom is honoured.
        zoom: 1;
    }

    @if not $supports-gradients or $compile-all {
        .#{$prefix}nlg {
            .#{$prefix}grid-cell-special {
                background-repeat: repeat-y;
                background-position: top right;
            }

            @if $grid-cell-special-background-image != null {
                .#{$prefix}grid-row .#{$prefix}grid-cell-special,
                .#{$prefix}grid-row-over .#{$prefix}grid-cell-special {
                    background-image: theme-background-image($grid-cell-special-background-image);

                }
            }

            @if $grid-cell-special-selected-background-image != null {
                .#{$prefix}grid-row-focused .#{$prefix}grid-cell-special,
                .#{$prefix}grid-row-selected .#{$prefix}grid-cell-special {
                    background-image: theme-background-image($grid-cell-special-selected-background-image);
                }
            }
        }
    }
}

.#{$prefix}grid-dirty-cell {
    background-image: theme-background-image('grid/dirty');
    background-position: 0 0;
    background-repeat: no-repeat;
}

@if $include-rtl {
    .#{$prefix}rtl.#{$prefix}grid-dirty-cell {
        background-image: theme-background-image('grid/dirty-rtl');
        background-position: right 0;
    }
}

.#{$prefix}grid-cell-selected {
    background-color: #B8CFEE !important;
}

// Column lines on leading edge where there may be whitespace following
.#{$prefix}grid-with-col-lines .#{$prefix}grid-cell {
    padding-right: 0;
    border-right: $grid-cell-border-width solid $grid-cell-with-col-lines-border-color;
}

// Column lines in RTL mode - leading edge is left.
@if $include-rtl {
    .#{$prefix}rtl.#{$prefix}grid-with-col-lines .#{$prefix}grid-cell {
        border-right: 0 none;
        border-left: $grid-cell-border-width solid $grid-cell-with-col-lines-border-color;
    }
}

.#{$prefix}grid-resize-marker {
    position: absolute;
    z-index: 5;
    top: 0;
    width: $grid-cell-border-width;
    background-color: #0f0f0f;
}