﻿.lazy-loader {
    position: relative;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
}

.lazy-loader > .scroller {
    width: 100%;
    overflow-y: scroll;
    flex-grow: 100;
    height: 0; 
}

.lazy-loader > footer {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    z-index: 1;
    text-align: center;
    border-top: 1px solid var(--color-text);
    background: var(--color-container);
    width: 100%;
}
.lazy-loader > footer:empty { display: none; }
.lazy-loader > header {
    background: var(--color-accent);
    color: var(--color-accent-text);
    padding: 0.25em;
}

/* #region table override */
    .lazy-loader table thead th {
        padding: 0.25em 0.5em;
        background: var(--color-text);
        color: var(--color-text-text);
        position: sticky;
        top: 0;
        z-index: 1;
        font-weight: normal;
        text-align: left;
    }
    .lazy-loader table thead th:not(:last-child) {
        border-right: 1px solid var(--color-stripe-border);
    }
    .lazy-loader table td {
        padding: 0.25em 0.5em;
        border: 1px solid transparent;
        border-right-color: var(--color-header-border);
        border-bottom-color: var(--color-stripe-border);
        overflow-x: auto;
        white-space: nowrap;
    }

/* #endregion */