.#{$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;
}

// Allow sort arrow to appear when column narrowed.
// Will not overflow column header itself
.#{$prefix}column-header-sort-DESC .#{$prefix}column-header-text,
.#{$prefix}column-header-sort-ASC .#{$prefix}column-header-text {
    overflow: visible;
}

// Make the text a block element, so the checkbox wraps
// If there is NO text, hide the empty text element
.#{$prefix}column-header-text-inner {
    background-repeat: no-repeat;
}
.#{$prefix}column-header-inner-empty .#{$prefix}column-header-text-inner {
    display: none;
}
.#{$prefix}column-header-inner-empty .#{$prefix}column-header-text-container {
    line-height: 0;
}

@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;
    text-align: center;
}

.#{$prefix}ie9m .#{$prefix}column-header-trigger {
    // IE9m fix: Needs to be 6 to clear the docked-item that contains it.
    // Not even sure why lesser value doesn't work but hey it's IE9m.
    // Other browsers as well as IE10+ don't need that.
    z-index: 6;
}

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