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

        .menu-row
            touch-callout none
            user-select none

        //     &: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-content
            cursor $datagrid-header-cursor
            text-overflow ellipsis
            white-space nowrap
            overflow hidden

        &.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