// @import '~react-load-mask/style/index.styl'
// @import '~css-utils/index.styl'
// @import './constants.styl' (changed to variables)

// @import "index";
@import "variables";
@import "resize";

// from bottom:
@import "header";
@import "contents";
@import "borders";
@import "summary";

.z-unselectable {
    touch-callout: none;
    user-select: none;
}

.react-datagrid {
    &, & * {
        box-sizing: border-box;
    }
}


//////////////////////////
// This is wierd 
//////////////////////////
datagrid-cell() { 
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    cursor: $datagrid-cell-cursor;
    position: relative;

    .z-inner {
        display: flex;
        align-items: center;
        size: 100%;
        position: absolute;
        margin: auto 0;
        overflow: hidden;
    }

    .z-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.react-datagrid {
    @extend .u-flex-column;
    align-items: stretch;

    .z-header-menu-column {
        z-index: 100;
    }

    table {
        border-collapse: separate;
    }
   
    //////////////////////////////////////
    // I DON'T KNOW WHAT TO DO WITH THESE 2 LINES
    //
    // @extend .u-flex-column 
    // align-items stretch
    //
    ///////////////////////////////////////

    //keep overflow hidden since in the body we can also have toolbars
    //and we don't want to scroll them as well
    // overflow hidden

    & > .z-inner {
        flex: 1;
        overflow: hidden;
        position: relative;
        display: flex;
        flex-flow: column;

        .z-wrapper {
            display: flex;
            flex-flow: column;
            flex: 1 1 auto;
            overflow: hidden;
        }
    }

    .z-vertical-scroller {
        overflow: hidden;
        overflow-y: auto;
        right: 0px;
        top: 0px;
        width: 1px;
        visibility: hidden;
    }

    .z-horizontal-scroller {
        height: 1px;
        visibility: hidden;
    }

    .z-vertical-scrollbar {
        overflow: auto;
        transform: translate3d(0px, 0px, 2px);
        position: relative;
        display: block;

        .z-inner {
            overflow: auto;
            size: 100%;
            position: absolute;
        }
    }

    .z-horizontal-scrollbar {
        transform: translate3d(0px, 0px, 1px);
        flex: 0 0 auto;
        height: auto;
        width: 100%;
        position: relative;
        left: 0px;
        bottom: 0px;
        overflow: auto;
        z-index: 100;
    
        &.mac-fix {
            display: flex;
            flex-flow: row;
            align-items: stretch;
            align-content: flex-start;
            justify-content: stretch;
        }
    }

    //needed for mac safari
    .z-horizontal-scrollbar-fix {
        flex: 1;
        overflow: auto;
    }

    .z-table-wrapper {
        flex: 1 1 auto;
        display: flex;
        align-items: stretch;
        align-content: flex-start;
        justify-content: flex-start;
        flex-flow: row;
        position: relative;
        overflow: hidden;
        z-index: 10;
    }

    .z-table-wrapper-fix {
        z-index: -1;
        flex: 1;
    }

    .z-header-wrapper,
    .z-footer-wrapper {
        width: 100%;
    }

    .z-table {
        display: block;
        flex: 1;
        /** 2 RULES FOR SAFARI VERTICAL SCROLLBAR */
        transform: translate3d(0px, 0px, 0px);
        position: relative;
        z-index: 10;
    }

    .z-header,
    .z-summary,
    .z-table .z-row {
        display: flex;
        flex-flow: row;
        z-index: 1;
    }

    .z-mask-wrapper {
        bottom: 0px;
        width: 100%;
        position: absolute;
        display: none;
    }

    &.z-loading {
        .z-mask-wrapper {
            display: block;
        }
    }
}

.react-datagrid.z-empty {
    .z-table-wrapper {
        @extend .u-flex-column;
        justify-content: center;
        align-items: center;

        .z-empty-text {
            display: inline-block;
            font-style: italic;
            color: gray;
        }
    }
}

// @import './header.styl'
// @import './contents.styl'
// @import './borders.styl'
// @import './summary.styl'