.data-table
{
}
.data-table .data-table__header
{
    font-weight: bold;
    grid-auto-rows: 2rem;
    grid-gap: 1px;
}
.data-table .data-table__header > div
{
    background-color: var(--panel-background);
    border: 2px solid color-mix(in lab, var(--panel-background), black 20%);
    border-top-color: color-mix(in lab, var(--panel-background), white 20%);
    border-bottom-color: color-mix(in lab, var(--panel-background), black 40%);
    padding: 0 4px;
    cursor: pointer;
    align-content: center;
}
.data-table .data-table__header > div[data-sort="ASC"]:after
{
    content: "↑";
    float: right;
}
.data-table .data-table__header > div[data-sort="DESC"]:after
{
    content: "↓";
    float: right;
}
.data-table .data-table__header > div:hover
{
    background-color: color-mix(in lab, var(--panel-background), white 10%);
}


.data-table .data-table__body
{
    display: flex;
    flex-direction: column;
}

.data-table .data-table__body > div:not(.placeholder)
{
    background-color: var(--panel-background);
    border: 2px solid color-mix(in lab, var(--panel-background), black 20%);
    border-top-color: color-mix(in lab, var(--panel-background), white 20%);
    border-bottom-color: color-mix(in lab, var(--panel-background), black 40%);
    cursor: pointer;
    align-items: center;
    grid-template-rows: 2rem auto;
    grid-gap: 1px;
}
.data-table .data-table__body > div:not(.placeholder) > div
{
    padding: 0 4px;
}

.data-table[data-columns="3"] .data-table__header,
.data-table[data-columns="3"] .data-table__body > div:not(.placeholder)
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.data-table[data-columns="4"] .data-table__header,
.data-table[data-columns="4"] .data-table__body > div:not(.placeholder)
{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1px;
}
.data-table[data-columns="5"] .data-table__header,
.data-table[data-columns="5"] .data-table__body > div:not(.placeholder)
{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 1px;
}

.data-table .data-table__body .placeholder
{
    padding: 12px;
}
.data-table .data-table__body .placeholder:not(:last-child)
{
    padding-bottom: 0;
}
.data-table .data-table__body .placeholder > div
{
    background-color: color-mix(in lab, var(--panel-background), black 10%);
    height: 12px;
}

.data-table [data-type="numeric"]
{
    text-align: right;
}
.data-table .data-table__body > div:not(.placeholder):hover
{
    background-color: color-mix(in lab, var(--panel-background), white 10%);

}

.data-table__editor
{
    display: none;
    background-color: var(--bg-color-dark);
    width: 100%;
    min-height: 5rem;
    padding: var(--content-padding) !important;
    grid-column-end: span 3;
}
.data-table .data-table__body .open .data-table__editor
{
    display: block;
}