: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: 44vh;
}

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

table thead {
    text-align: left;
}

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 {
    box-sizing: border-box;
    padding: var(--padding-step) 0;
    border-bottom: var(--border-thickness-heavy) solid var(--iq-palette-color-1-variant);
    user-select: none;
}

table tr > th,
table tr > td {
    padding: 0 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

table tr > th {
    height: 3rem;
}

table tr > td {
    height: 1.625rem;
}

table .col-icon {
    position: relative;
    width: 3rem;
}

table .col-edited {
    width: 10rem;
}

table .col-folder,
table .col-editor {
    width: 10rem;
}

table .col-status {
    width: 4rem;
}

table .col-options {
    width: 2rem;
}

table .col-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

table td.col-status {
    font-size: 2em;
}

table th.col-icon::before,
table td.col-status::before,
table td.col-options::before {
    display: block;
}

table th.col-icon,
table td.col-options {
    font-size: 1.625em;
    text-align: center;
    cursor: pointer;
    color: rgba(var(--iq-foreground-color-rgb), 0.5);
}

table th.col-icon:hover,
table td.col-options:hover {
    color: var(--iq-foreground-color);
}

table tr th.sortable {
    position: relative;
    cursor: pointer;
}

table tr th.sortable i.asc,
table tr th.sortable i.desc {
    position: absolute;
    right: 1em;
    display: none;
}

table tr th.sortable.asc i.asc,
table tr th.sortable.desc i.desc {
    display: inline;
}

.icon-incompatible::after {
    display: block;
    position: absolute;
    right: calc(var(--padding-step) / 2);
    top: 0;
    content: "";

    background-color: var(--iq-error-color);
    width: 1em;
    height: 1em;
    border-radius: 100%;
}