.react-datagrid {
    .z-header-menu-column {
        background: white;
        position: absolute;
        top: 0px;

        .menu-row {
            @extend .z-unselectable;
        }

        //     &:before
        //         visibility hidden
        //         padding 10px
        //         display inline-block
        //         content '\2714'

        // .menu-row.z-selected
        //     &:before
        //         visibility visible
        .menu-row.over {
            background: $datagrid-row-over-background;
        }
    }

    .z-header {
        align-items: stretch /* for vertical aligning text in header */;
    }

    &.z-with-column-menu {
        .z-column-header {
            .z-show-filter,
            .z-show-menu {
                display: none;
                position: absolute;
                cursor: pointer;
                right: 0px;
                top: 0px;
                width: $datagrid-column-menu-icon-width;
                height: 100%;
                border-left: $datagrid-header-border-width $datagrid-header-border-style $datagrid-header-border-color;
            // .z-show-menu
            //     // color $datagrid-column-sort-icon-color
            //     // padding-top 3px
            //     align-items center
            //     padding-bottom 6px
            }

            .z-show-filter{
                // &::after
                //     content ' '
                //     display block
                //     position absolute
                //     // margin auto
                //     top 50%
                //     margin-top - $datagrid-column-sort-icon-width
                //     margin-left - $datagrid-column-sort-icon-width
                //     left 50%
                //     // right 0px
                //     // bottom 0px
                //     // width 0px
                //     // height 0px
                //     // border-left $datagrid-column-sort-icon-width solid transparent
                //     // border-right $datagrid-column-sort-icon-width solid transparent
                //     // border-top $datagrid-column-sort-icon-height solid $datagrid-column-sort-icon-color   
            }


            .z-show-filter {
                right: $datagrid-column-menu-icon-width;
                background: $datagrid-column-menu-icon-hover-background;

                // &::before
                //     content ' '
                //     height 8px
                //     position absolute
                //     top 50%
                //     margin-left -1px
                //     left 50%
                //     margin-top -$datagrid-column-menu-icon-width
                //     display block
                //     border-left 3px solid $datagrid-column-sort-icon-color
            }

            &.z-filterable .z-show-filter.z-active,
            &.z-filterable .z-show-filter:hover,
            .z-show-menu.z-active,
            .z-show-menu:hover {
                background: $datagrid-column-menu-icon-hover-background;
            }

            &.z-active .z-show-menu,
            &.z-active.z-filterable .z-show-filter,
            &.z-over .z-show-menu {
                display: block;
            }
            &.z-over.z-filterable .z-show-filter {
                display: block;
            }
            &.z-filtered {
                font-style: italic;
            }
        }
    }

    //styles for column headers
    .z-header-wrapper {
        flex: 0 0 auto;
        background: $datagrid-header-background;
        border-bottom: $datagrid-header-border-width $datagrid-header-border-style $datagrid-header-border-color;

        &.z-dragging {
            .z-column-header:not(.z-drag) {
                transition: left 0.4s;
            }
        }
    }

    .z-column-header {
        position: relative;
        font-weight: $datagrid-column-header-font-weight;

        .z-inner {
            display: flex;
            align-items: center;
            align-content: flex-start;
            flex-flow: row;
            height: 100%;
        }

        .z-text {
            cursor: $datagrid-header-cursor;
            @extend .u-ellipsis;
        }

        &.z-sortable {
            .z-inner {
                cursor: pointer;
            }
        }

        &.z-over {
            background: $datagrid-header-over-background;
        }

        //style for the sort icon
        .z-icon-sort-info {
            display: inline-block;
            size: 0px;
            margin-left: 10px;
            border-left: $datagrid-column-sort-icon-width solid transparent;
            border-right: $datagrid-column-sort-icon-width solid transparent;
        }

        &.z-asc {
            .z-icon-sort-info {
                border-bottom: $datagrid-column-sort-icon-height solid $datagrid-column-sort-icon-color;
            }
        }

        &.z-desc {
            .z-icon-sort-info {
                border-top: $datagrid-column-sort-icon-height solid $datagrid-column-sort-icon-color;
            }
        }

        //styles to be applied to the column header when it is dragged
        &.z-drag {
            z-index: 1;
            background: $datagrid-header-over-background;
            border-right: $datagrid-header-border-width $datagrid-header-border-style $datagrid-header-border-color;
            border-left: $datagrid-header-border-width $datagrid-header-border-style $datagrid-header-border-color;
            // .z-inner
        }

        //styles for the small column resize handle
        .z-column-resize {
            display: inline-block;
            height: 100%;
            width: 3px;
            right: 0px;
            cursor: e-resize;
            top: 0px;
            position: absolute;
            z-index: 10;
        }

        //make sure the last column does not have a resize handle visible
        //since resize handles are position to the right of every column
        &.z-last {
            .z-inner {
                .z-column-resize {
                    display: none !important;
                }
            }
        }
    }

    //set left border correctly for each column header. (the first one should not have a left border)
    .z-header .z-column-header.z-cell:not(.z-first) {
        border-left: $datagrid-header-border-width $datagrid-header-border-style $datagrid-header-border-color;
    }

    .z-header .z-column-header.z-cell.z-last {
        border-right: $datagrid-header-border-width $datagrid-header-border-style $datagrid-header-border-color;
    }
}