:host {
    display: block;
}

table {
    display       : flex;
    flex-flow     : column;
    border-spacing: 0;
    margin-top    : var(--padding-step);
    width         : 100%;
}

table thead,
table tbody,
table tfoot {
    font-size: 1rem;
}

table thead,
table tfoot {
    /* Scrollbar */
    padding-right: 15px;
}

table tbody,
table tfoot {
    display: block;
}

table tbody {
    flex      : 1 1 auto;
    overflow-y: scroll;
    max-height: 40vh;
}

table tbody tr,
table tfoot tr {
    width: 100%;
}

table thead {
    background-color: rgba(var(--iq-palette-color-1-variant-rgb), 0.15);
}

table tbody tr.highlightable:hover {
    background-color: rgba(var(--iq-palette-color-2-variant-rgb), 0.077);
}

table tbody:empty {
    display: none;
}

table tbody tr,
table tfoot tr,
table thead {
    display     : table;
    table-layout: fixed;
}

table tr {
    border-bottom: var(--border-thickness-heavy) solid var(--iq-palette-color-1-variant);
}

table tr > th,
table tr > td {
    padding: 0 0.5rem;
    text-align: center;
}

table tr > th {
    height: 3rem;
}

table tr > td {
    height: 2.5rem;
}

table tr.restricted {
    color           : rgba(var(--iq-foreground-color-rgb), 0.5);
    background-color: rgba(var(--iq-palette-color-9-rgb), 0.102);
}

table tfoot.seperator {
    border-top: var(--border-thickness-heavy) solid var(--iq-palette-color-1-variant);
    margin-top: calc(0px - var(--border-thickness-heavy));
    padding-top: 2em;
    font-size: inherit;
}

table td.space-elements > :not(:last-child) {
    margin-right: calc(var(--padding-step) / 2);
}