:root {
    display: block;
}

.table-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    width: 100%;
    height: 100%;
}

.table-header {
    display: flex;
    align-items: stretch;
    flex: 0;
    font-weight: bold;
    background-color: rgba(var(--iq-palette-color-1-variant-rgb), 0.15);
    user-select: none;

    /* Scrollbar */
    padding-right: 15px;
}

.table-segment-container {
    display: block;
    position: relative;
    flex: 1;

    overflow-y: scroll;
}

.table-segment-container::before {
    display: block;
    content: "";

    position: relative;
    visibility: hidden;
    top: 0px;
    left: 0px;
    width: 0px;
    height: calc(var(--row-height, 0px) * var(--num-elements, 0));
}

.table-segment-container .segment {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    user-select: none;

    position: absolute;
    width: 100%;
}

.table-segment-container .segment .row {
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    height: var(--row-height, initial);
}

.table-segment-container .segment .row.selected {
    background-color: var(--iq-highlight-color);
}

.table-segment-container .segment .cell,
.table-header .cell {
    overflow: hidden;
    padding: 0.25em 0.25em;
}

.table-segment-container .segment .cell:empty {
    display: none;
}