.DataTable {
    --padding: calc(var(--base-gap) * .4);

    max-width: 100%;
}

.DataTable > .table {
    max-width: 100%;
    max-height: max(60vh, 200px);
    overflow-y: auto;
}

.DataTable > .table > table {

    table-layout: fixed;
    max-width: 100%;
    border-collapse: collapse;

    font-size: var(--font-size-smaller);

    & > thead {
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--color-background);
        box-shadow:
            0 1px 0 var(--color-base-faintest-2), /* The bottom line must be made with box-shadow, for some reason border-bottom disappears when scrolling with the sticky setting */
            0 10px 10px -10px hsl(from var(--color-base) h s 50 / .15);
    }

    & > tbody {
        background: linear-gradient(180deg,rgba(138, 154, 166, 1) 0, rgba(255, 255, 255, 0) 20px);
        background-position: top center;
        background-attachment: fixed;
    }

    & > :is(thead,tbody) > tr {

        > th {
            padding: var(--padding);
            padding-top: 0;
        }

        > td {
            padding: var(--padding);
        }

        > th,td {
            &.alignLeft {
                text-align: left;
            }

            &.alignCenter {
                text-align: center;
            }

            &.alignRight {
                text-align: right;
            }

            &.verticalAlignTop {
                vertical-align: top;
            }

            &.verticalAlignCenter {
                vertical-align: middle;
            }

            &.verticalAlignBottom {
                vertical-align: bottom;
            }

            &.grow {
                width: 100%;
            }

            &.ellipsisOverflow {
                max-width: 50px;
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
                word-break: break-all;
                text-overflow: ellipsis;
            }
        }
    }

    & > thead > tr {
        > th {
            font-weight: var(--font-weight);
            color: var(--color-base-fainter);
        }
    }

    & > tbody > tr:hover {
        background-color: var(--color-base-faintest-3);
    }

    & > tbody > tr:not(:last-child) {
        border-bottom: dashed var(--color-base-faintest-2) 1px;
    }

    & > tbody > tr > td {
        & > .Image > .content > img {
            height: 22px;
        }
    }
}

.DataTable > .footer {
    padding: var(--base-gap);
    border-top: solid var(--color-base-faintest-2) 1px;

    box-shadow:
        0 -10px 10px -10px hsl(from var(--color-base) h s 50 / .15);

    display: flex;
    justify-content: space-between;
    gap: var(--padding);

    font-size: var(--font-size-smaller);
    color: var(--color-base-fainter);
}