.grid-component {

    min-height: 250px;
    width: 100%;
    border: 1px solid $table-border-color;
    position: relative;

    display: flex;
    flex-direction: column;
    flex: 1;

    // styles shared between header and row
    .header, .r {
        display: flex;
        flex-direction: row;
        min-height: 40px;
        display: flex;
        flex-direction: row;
        page-break-inside: avoid;
        .c {
            padding: $table-cell-padding;
            line-height: $line-height-base;
            display: flex;
            flex-direction: row;
            &.center { justify-content: center;   }
            &.right  { justify-content: flex-end; }

        }
        &:first-child {
            border-top: 0;
        }
    }

    .header {
        min-height: 40px;
        .c {
            border: 1px solid $table-border-color;
            align-items: flex-end;
            display: inline-block;
            cursor: pointer;

            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;

            &.sort {
                &:after {
                    content: $fa-var-sort;
                    font-family: FontAwesome;
                    position: relative;
                    right: -5px;
                    color: lightgray;
                }
                &:not(.asc):not(.desc) {
                    &:after {
                        @include hidden-print;
                    }
                }
                &.asc:after {
                    color: gray;
                    content: $fa-var-sort-asc;
                }
                &.desc:after {
                    color: gray;
                    content: $fa-var-sort-desc;
                }
            }
        }
    }
    .r {
        margin-right: 10px;
        /* page-break-inside: avoid; */
        break-inside: avoid-page;
    }
    .grid-body {
        border-top: 1px solid $table-border-color;
        overflow: auto;
        position: relative; // for absolutely positioned row editor
        flex-grow: 1;
        height: 1px; // panel needs height to force scroll
        @media print {
            overflow: visible;
            height: initial;
        }
        .r:nth-child(odd) {
            background-color: $table-bg-accent;
        }
        .c {
            align-items: center;
        }
    }

    .toolbar {
        margin-bottom: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    @import "./editors";

}