.#{$prefix}column-header {
    position: absolute;
    overflow: hidden;
    background-repeat: repeat-x;
}

/*
 * TODO:
 * When IE8 retires, revisit https://jsbin.com/honawo/quiet for better way to center header text
 */
.#{$prefix}column-header-inner {
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.#{$prefix}leaf-column-header {
    height: 100%;
    .#{$prefix}column-header-text-container {
        height: 100%;
    }
}

// The default case for column headers is to have a fixed width. Auto width can only done
// by specifying width: null which is rare
.#{$prefix}column-header-text-container {
    width: 100%;
    display: table;
    table-layout: fixed;

    &.#{$prefix}column-header-text-container-auto {
        table-layout: auto;
    }
}

.#{$prefix}column-header-text-wrapper {
    display: table-cell;
    vertical-align: middle;
}

.#{$prefix}column-header-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.#{$prefix}column-header-text-inner {
    background-repeat: no-repeat;
}

@if $include-ie and $include-rtl {
    .#{$prefix}rtl.#{$prefix}column-header-text {
        // in IE9, left and right padding are automatically reversed on inline elements when
        // the direction property is "rtl". inline-block fixes it. We only apply this hack
        // in rtl mode because inline-block breaks ellipsis.
        display: inline-block;
    }
}

.#{$prefix}column-header-trigger {
    display: none;
    height: 100%;
    background-repeat: no-repeat;
    position: absolute;
    right: 0;
    top: 0;
    // IE9m fix: Needs to be 4 to clear the docked-item that contains it which is at 2.
    z-index: 4;
    text-align: center;
}

@if $include-rtl {
    .#{$prefix}rtl.#{$prefix}column-header-trigger {
        left: 0;
        right: auto;
    }
}

.#{$prefix}column-header-over, .#{$prefix}column-header-open {
    .#{$prefix}column-header-trigger {
        display: block;
    }
}

.#{$prefix}column-header-align-right {
    text-align: right;
}

@if $include-rtl {
    .#{$prefix}rtl.#{$prefix}column-header-align-right {
        text-align: left;
    }
}

.#{$prefix}column-header-align-left {
    text-align: left;
}

@if $include-rtl {
    .#{$prefix}rtl.#{$prefix}column-header-align-left {
        text-align: right;
    }
}

.#{$prefix}column-header-align-center {
    text-align: center;
}
