// This fixes a browser bug in Chrome (current as of 40.0.2214.111).
// When using the buffered renderer plugin, the view rows are positioned by using CSS transforms.
// However, b/c of the browser bug, the scrollbar will be covered by the itemcontainer when scrolled
// to a point where the view is refreshed so we need to bump up its z-index. See EXTJS-15608.
.#{$prefix}grid-view,
.#{$prefix}tree-view {
    z-index: 1;
}

// So that we can easily ascertain the default theme grid row height once per app run.
.#{$prefix}theme-row-height-el {
    height: $grid-row-height;
}

.#{$prefix}grid-body {
    background: $grid-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: $grid-empty-padding;
    color: $grid-empty-color;
    background-color: $grid-empty-background-color;
    font: $grid-empty-font-weight $grid-empty-font-size $grid-empty-font-family;
}

// Default background color applied at table level - each row is its own separate table
.#{$prefix}grid-item {
    color: $grid-row-cell-color;
    font: $grid-row-cell-font;
    background-color: $grid-row-cell-background-color;
}

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

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

// IE does not support outline-offset property, so we have to
// use pseudo element to show the focused cell border
.#{$prefix}grid-item-focused {
    // This is to remove the default outline in FF and IE
    outline: 0;

    .#{$prefix}grid-cell-inner {
        // Inner grid cell element has position: relative,
        // so setting z-index: 2 will elevate it just above default position with z-index 1
        z-index: 2;
    }

    .#{$prefix}keyboard-mode & {
        // Pseudo-el is positioned *below* the inner grid cell content
        // but its border will shine through
        .#{$prefix}grid-cell-inner:before {
            content: "";
            position: absolute;
            z-index: -1;
            top: $grid-row-cell-focus-border-inset;
            right: $grid-row-cell-focus-border-inset;
            bottom: $grid-row-cell-focus-border-inset;
            left: $grid-row-cell-focus-border-inset;
            pointer-events: none;

            border: $grid-row-cell-focus-border-width $grid-row-cell-focus-border-style $grid-row-cell-focus-border-color;
        }

        @if not is-null($grid-row-cell-focus-color) {
            color: $grid-row-cell-focus-color;
        }

        @if not is-null($grid-row-cell-focus-background-color) {
            background-color: $grid-row-cell-focus-background-color;
        }
    }
}

.#{$prefix}grid-item-selected {
    color: $grid-row-cell-selected-color;
    background-color: $grid-row-cell-selected-background-color;
}

.#{$prefix}grid-with-row-lines {
    .#{$prefix}grid-item {
        border-style: $grid-row-cell-border-style;
        border-width: $grid-row-cell-border-width 0 0;
        border-color: $grid-row-border-color;
    }

    .#{$prefix}grid-item:first-child {
        border-top-color: $grid-row-cell-background-color;
    }

    // the following rules have .x-grid-item added to increase specificity over the
    // :first-child rule above
    .#{$prefix}grid-item.#{$prefix}grid-item-over {
        border-style: $grid-row-cell-over-border-style;
        border-color: $grid-row-cell-over-border-color;
    }

    .#{$prefix}grid-item-over + .#{$prefix}grid-item {
        border-top-style: $grid-row-cell-over-border-style;
        border-top-color: $grid-row-cell-over-border-color;
    }

    .#{$prefix}grid-item.#{$prefix}grid-item-selected {
        border-style: $grid-row-cell-selected-border-style;
        border-color: $grid-row-cell-selected-border-color;
    }

    .#{$prefix}grid-item-selected + .#{$prefix}grid-item {
        border-top-style: $grid-row-cell-selected-border-style;
        border-top-color: $grid-row-cell-selected-border-color;
    }

    .#{$prefix}grid-item:last-child {
        border-bottom-width: $grid-row-cell-border-width;
    }

    // IE8 doesn't have last-child, so we end up with no border on the bottom row.
    // To work around this issue we give all the rows a bottom border and negative
    // margin so that they overlap.  This approach doesn't work everywhere though...
    // in newer IE, using the browser's zoom feature can result in rounding errors on 
    // the negative margin, resulting in the appearance of some borders being double.
    .#{$prefix}ie8 & {
        .#{$prefix}grid-item {
            border-width: $grid-row-cell-border-width 0;
            margin-top: (-$grid-row-cell-border-width);
        }

        .#{$prefix}grid-item:first-child {
            margin-top: 0;
        }
    }
}

.#{$prefix}grid-cell-inner {
    position: relative;
    // Inner grid cell element is set to position: relative,
    // This causes a bug in IE where on scrolling cells disappear from view (see ExtJS-26552) 
    // so z-index: 1 will elevate it just above default position so that they may be visible
    z-index: 1;
    text-overflow: $grid-cell-inner-text-overflow;
    padding: $grid-cell-inner-padding;
}

@if $include-rtl and (left($grid-cell-inner-padding) != right($grid-cell-inner-padding)) {
    .#{$prefix}rtl.#{$prefix}grid-cell-inner {
        padding: rtl($grid-cell-inner-padding);
    }
}

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

            .#{$prefix}grid-item-selected & {
                @if not is-null($grid-cell-special-selected-border-color) {
                    border-right-color: $grid-cell-special-selected-border-color;
                }

                @if not is-null($grid-row-cell-selected-background-color) {
                    @if is-null($grid-cell-special-background-gradient) {
                        background-color: $grid-row-cell-selected-background-color;
                    } @else {
                        @include background-gradient($grid-row-cell-selected-background-color, $grid-cell-special-background-gradient, left);
                    }
                }
            }

            @if $include-slicer-gradient {
                .#{$prefix}nlg & {
                    background-repeat: repeat-y;
                    background-image: slicer-background-image(grid-cell-special, 'grid/cell-special-bg');
                }

                .#{$prefix}nlg .#{$prefix}grid-item-selected & {
                    background-image: slicer-background-image(grid-cell-special-selected, 'grid/cell-special-selected-bg');
                }
                @include x-slicer(grid-cell-special);
                @include x-slicer(grid-cell-special-selected);
            }
        }
    }

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

.#{$prefix}grid-dirty-cell {
    @if $enable-font-icons and ($grid-cell-dirty-glyph != null) {
        > .#{$prefix}grid-cell-inner:after {
            @include font-icon($grid-cell-dirty-glyph, $pseudo: false);
            color: $grid-cell-dirty-glyph-color;
            position: absolute;
            top: 0;
            left: 0;
        }
    } @else {
        background: theme-background-image('grid/dirty') no-repeat 0 0;
    }
}

@if $include-rtl {
    .#{$prefix}rtl.#{$prefix}grid-dirty-cell {
        @if $enable-font-icons and ($grid-cell-dirty-glyph-rtl != null) {
            > .#{$prefix}grid-cell-inner:after {
                @include font-icon($grid-cell-dirty-glyph-rtl, $pseudo: false);
                right: 0;
            }
        } @else {
            background-image: theme-background-image('grid/dirty-rtl');
            background-position: right 0;
        }
    }
}

// add grid-row class to increase specificity over the state rules that set background-color
// e.g. .x-grid-item-over .x-grid-td, .x-grid-row-focused .x-grid-td
.#{$prefix}grid-row .#{$prefix}grid-cell-selected {
    color: $grid-cell-selected-color;
    background-color: $grid-cell-selected-background-color;
}

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

    .#{$prefix}grid-item-over .#{$prefix}grid-cell {
        border-color: $grid-row-cell-over-border-color;
        border-style: $grid-row-cell-over-border-style;
    }

    .#{$prefix}grid-item-selected .#{$prefix}grid-cell {
        border-color: $grid-row-cell-selected-border-color;
        border-style: $grid-row-cell-selected-border-style;
    }
}

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

.#{$prefix}grid-resize-marker {
    width: $grid-row-cell-border-width;
    background-color: $grid-resize-marker-background-color;
}