.#{$prefix}grid-locked .#{$prefix}grid-inner-locked {
    border-width: 0 $grid-lockable-separator-border-width 0 0;
    border-style: $grid-lockable-separator-border-style;
}
@if $include-rtl {
    .#{$prefix}grid-locked .#{$prefix}rtl.#{$prefix}grid-inner-locked {
        border-width: 0 0 0 $grid-lockable-separator-border-width;
    }
}

// When the locking grid is configured with a splitter, the locked grid needs a border on its trailing edge
.#{$prefix}grid-locked-split .#{$prefix}grid-inner-normal {
    border-width: 0 0 0 $grid-lockable-separator-border-width;
    border-style: $grid-lockable-separator-border-style;
    border-left-color: $grid-lockable-separator-border-color;
}
@if $include-rtl {
    .#{$prefix}grid-locked-split .#{$prefix}rtl.#{$prefix}grid-inner-normal {
        border-width: 0 $grid-lockable-separator-border-width 0 0;
        border-right-color: $grid-lockable-separator-border-color;
    }
}

.#{$prefix}grid-locking-body {
    border-width: $grid-lockable-body-border-width;

    // When locking grid is used with a border layout we give the views a background-color
    // to prevent the background-color of the border layout from bleeding through.
    // This causes the splitter area to lose its background color since splitters are transparent.
    // To fix this we have to give the splitter an explicit background color.
    > .#{$prefix}splitter {
        background-color: $border-layout-ct-background-color;
    }

    > .#{$prefix}splitter-active {
        background-color: $splitter-active-background-color;
    }
}

.#{$prefix}grid-inner-locked {
    // Inner locked grid has a 1px border. Last cell looks bad with an extra grey one.
    // The rules must be last because they override default header and cell bordering.
    // Must use the border-right property because we have to override the .x-column-header border-right setting.
    // Override last border width
    .#{$prefix}column-header-last,
    .#{$prefix}grid-cell-last {
        border-right-width: 0!important;
    }
    @if $include-rtl {
        .#{$prefix}rtl.#{$prefix}column-header-last {
            border-left-width: 0!important;
        }
    }

    // Explicitly set separating border color so that themes can override if the panel border color does not contrast enough
    border-right-color: $grid-lockable-separator-border-color;
}
@if $include-rtl {
    .#{$prefix}rtl.#{$prefix}grid-inner-locked {
        .#{$prefix}grid-row {
            .#{$prefix}column-header-last {
                border-left: 0 none;
            }
            .#{$prefix}grid-cell-last {
                border-left: 0 none;
            }
        }

        // Override separating border side for RTL
        border-right-color: $panel-border-color;
        border-left-color: $grid-lockable-separator-border-color;
    }
}

.#{$prefix}hmenu-lock {
    @if $enable-font-icons and ($grid-lockable-header-menu-lock-glyph != null) {
        @include font-icon($grid-lockable-header-menu-lock-glyph, $line-height: $menu-item-icon-size);
        @if $grid-header-menu-glyph-color != $menu-glyph-color {
            color: $grid-header-menu-glyph-color;
        }
    } @else {
        background-image: theme-background-image('grid/hmenu-lock', 'png');
    }
}

.#{$prefix}hmenu-unlock {
    @if $enable-font-icons and ($grid-lockable-header-menu-unlock-glyph != null) {
        @include font-icon($grid-lockable-header-menu-unlock-glyph, $line-height: $menu-item-icon-size);
        @if $grid-header-menu-glyph-color != $menu-glyph-color {
            color: $grid-header-menu-glyph-color;
        }
    } @else {
        background-image: theme-background-image('grid/hmenu-unlock', 'png');
    }
}

// When locked grid is used with a border layout we need a background-color on the normal
// views to keep the border-layout background from bleeding through when the columns are
//too narrow to fill up the available width.
.#{$prefix}grid-scrollbar-clipper {
    > .#{$prefix}grid-view,
    > .#{$prefix}tree-view {
        background-color: $grid-body-background-color;
    }
}

// Use same borders on the clipper elements which should exaactly mirror the grid panels.
.#{$prefix}grid-scrollbar-clipper-locked,
.#{$prefix}grid-scrollbar-locked {
    border-width: 0 $grid-lockable-separator-border-width 0 0;
    border-style: $grid-lockable-separator-border-style;
    border-color: $grid-lockable-separator-border-color;
}
@if $include-rtl {
    .#{$prefix}grid-locked {
        .#{$prefix}rtl.#{$prefix}grid-scrollbar-clipper-locked,
        .#{$prefix}rtl.#{$prefix}grid-scrollbar-locked, {
            border-width: 0 0 0 $grid-lockable-separator-border-width;
        }
    }
}

.#{$prefix}grid-scroll-container {
    background-color: $grid-body-background-color;
}

@if $include-rtl {
    .#{$prefix}rtl {
        > .#{$prefix}grid-scroll-container {
            direction: rtl;
            > .#{$prefix}grid-scroll-body {
                direction: rtl;
            }
        }
    }
}