: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.bold {
    font-weight: bold;
}

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

table tbody:empty {
    display: none;
}

table .col-btn {
    width: 7rem;
}

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 .trusted-ip {
    display: flex;
    gap: 0.25em;
}

table .col-terminate,
table .col-details,
table .col-reload {
    position: relative;
    width: 2rem;
}

table .col-ip-address,
table .col-session-start,
table .col-user-name {
    width: 10rem;
}

table th.col-reload::before,
table td.col-details::before,
table td.col-terminate::before {
    display: block;
}

table th.col-reload,
table td.col-details,
table td.col-terminate,
table td.col-btn {
    text-align: center;
    cursor: pointer;
    color: rgba(var(--iq-foreground-color-rgb), 0.5);
}

table th.col-reload,
table td.col-details {
    font-size: 1.625em;
}

table th.col-reload:hover,
table td.col-details:hover
table td.col-terminate: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;
}

table td.trusted,
table td.col-btn .btn-container {
    display: flex;
    justify-content: center;
}

table td.col-btn .btn-container :not(:last-child) {
    margin-right: calc(var(--padding-step) / 2);
}

table td.col-btn {
    padding-top: calc(var(--padding-step) / 2);
    padding-bottom: calc(var(--padding-step) / 2);
}

table td.col-btn .count-selected {
    min-width: 1rem;
    text-align: center;
}