.react-datagrid {
    .z-footer-wrapper {
        background: $datagrid-summary-row-background;
    }

    .z-summary {
        border-top: $datagrid-header-border-width $datagrid-header-border-style $datagrid-header-border-color;
        align-items: stretch; /* for vertical aligning text in header */

        .z-cell {
            position: relative;
            // could be wrong here...
            border-bottom: $datagrid-header-border-width $datagrid-header-border-style $datagrid-header-border-color;

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

            .z-text {
                @extend .u-ellipsis;
            }

            ////////////////////////////////////////
            // DON'T KNOW WHAT TO DO WITH THIS LINE
            //
            //border-bottom: $datagrid-header-border-width $datagrid-header-border-style $datagrid-header-border-color;
            //
            ////////////////////////////////////////////

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

            &:not(.z-first) {
                border-left: $datagrid-header-border-width $datagrid-header-border-style $datagrid-header-border-color;
            }
        }
    }
}