@layer ui {
    data-table .table-body {
        background-color: var(--theme-bg-background);
    }

    data-table .table-header {
        font-weight: 500;
        font-size: 14px;
        letter-spacing: normal;
    }

    data-table .table-row {
        display: grid;
        overflow: hidden;
        transition: background-color 50ms;
        background-color: transparent;
        position: relative;
    }

    data-table .table-row>.ripple-container {
        position: absolute !important;
        inset: 0;
        border-radius: var(--data-table-row-radius, 2rem);
    }

    data-table .table-row::before {
        content: "";
        position: absolute;
        pointer-events: none;
        inset: 0;
        border-radius: var(--data-table-row-radius, 2rem);
    }

    data-table .table-row:hover::before {
        background: linear-gradient(var(--theme-bg-hover), var(--theme-bg-hover));
    }

    data-table .table-row.selected {
        color: var(--theme-primary-light-contrast);
    }

    data-table .table-row.selected::before {
        background: linear-gradient(var(--theme-primary-light), var(--theme-primary-light));
    }

    data-table .table-row.selected:hover::before {
        background: linear-gradient(var(--theme-bg-hover), var(--theme-bg-hover)), linear-gradient(var(--theme-primary-light), var(--theme-primary-light));
    }

    data-table .table-cell {
        display: block;
        padding: 0px 2px;
        z-index: 0;
    }
}