.dataloom-table {
    display: table;
    table-layout: fixed;
    border-collapse: separate;
}

.dataloom-header {
    display: table-header-group;
}

.dataloom-body {
    display: table-row-group;
}

.dataloom-footer {
    display: table-footer-group;
}

.dataloom-row {
    display: table-row;
}

.dataloom-cell {
    display: table-cell;
}

.dataloom-cell--left-corner {
    width: 35px;
}

.dataloom-cell.dataloom-cell--freeze {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: var(--background-primary);
}

.dataloom-cell.dataloom-cell--freeze-header {
    background-color: var(--background-secondary);
    z-index: 3;
}

.dataloom-cell.dataloom-cell--freeze-footer {
    z-index: 3;
}

.dataloom-cell--header {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--background-secondary);
    border-bottom: 1px solid var(--table-border-color);
    border-right: 1px solid var(--table-border-color);
        
    &:last-of-type {
        border-right: 0;
        background-color: var(--background-primary);
    }
}

.dataloom-cell--body {
    border-bottom: 1px solid var(--table-border-color);
    border-right: 1px solid var(--table-border-color);
    vertical-align: top;

    /** This is hack to make the children to have something to calculate their height percentage from. */
    height: 1px;
                                
    &:last-of-type {
        border-right: 0;
    }
}

.dataloom-cell--footer {
    position: sticky;
    bottom: 0;
    z-index: 1;
    background-color: var(--background-primary);
    border-top: 1px solid var(--table-border-color);
}

.dataloom-body > .dataloom-row:last-child > .dataloom-cell {
    border-bottom: 0;
}
