:root {
    --z-table-header-colour: #7b4dff;
    --z-table-footer-colour: #e7e7e7;
    --z-table-filter-width: 20em;
}

div.z-table {
    display: grid;
    overflow: auto;
    position: relative;
    grid-template-rows: auto auto auto 1fr;
}

div.z-table-header {
    display: grid;
    grid-template-columns: subgrid;
    background-color: var(--z-table-header-colour);
    color: white;
    padding: 0.2em;
    position: sticky;
    z-index: 2;
    top: 0;
    grid-column: 1 / -1;
}

div.z-table-body {
    display: grid;
    grid-template-columns: subgrid;
    grid-auto-rows: max-content;
    grid-column: 1 / -1;
}

div.z-table-footer {
    display: grid;
    grid-template-columns: subgrid;
    background-color: var(--z-table-footer-colour);
    position: sticky;
    bottom: 0;
    grid-column: 1 / -1;
}

div.z-table-space {
    grid-column: 1 / -1;
}

div.z-table-row {
    display: grid;
    grid-template-columns: subgrid;
    height: fit-content;
    grid-auto-rows: max-content;
    grid-column: 1 / -1;
    padding: 0 0.2em;
}

.z-table-header-item {
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    position: relative;
    gap: 0.5em;
}

.z-table-header-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    right: 0;
    top: 0;
    width: 3em;
    background-color: var(--z-table-header-colour);
}

.z-table-header-buttons {
    display: inline-flex;
    align-items: center;
}

.z-table-header-buttons > button {
    border-radius: 0.2em;
    padding: 0.1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;

    background-color: var(--z-table-header-colour);
    color: white;

    /* Buttons are weird */
    border: none;
    margin: 0;
    text-decoration: none;
    font-size: 1rem;
    appearance: none;
}

.z-table-header-buttons > button:hover {
    background-color: rgba(238, 238, 238, 0.4) !important;
}

.z-table-header-buttons > button.active {
    background-color: rgba(238, 238, 238, 0.2);
}

.z-table-header-filter {
    width: var(--z-table-filter-width);
    position: absolute;
    top: calc(100% + 0.2em);
    left: calc(50% - var(--z-table-filter-width) / 2);
    right: calc(50% - var(--z-table-filter-width) / 2);
    background-color: white;
    color: black;
    border: 0.1em solid rgb(143, 143, 143);
    z-index: 3;
}

.z-table-header-filter.hidden {
    display: none;
}

.z-table-header-item:first-child .z-table-header-filter {
    left: -0.2em;
    right: unset;
}

.z-table-header-item:last-child .z-table-header-filter {
    left: unset;
    right: 0;
}


div.grid-footer {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
}

div.block-footer {
    grid-column: 1 / -1;
}

.z-table-virtual-space {
    grid-column: 1 / -1;
}

div.z-table-row.no-grid  {
    display: flex;
    grid-template-columns: unset;
    flex-direction: row;
}

.z-table-virtual-space {
    grid-column: 1 / -1;
}

.z-table-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}