.su-table table, table {
    border: none !important;
    border-collapse: collapse;
    overflow-x: auto;
    width: auto !important;
    min-width: 100% !important
}

.su-table, .scrollable-container {
    margin-bottom: var(--spacing-5x);
    overflow-x: auto;
}

.wp-block-table thead {
    border: none;
}

table:not(:has(thead)) tr:first-child td,
.su-table table th, table th,
.su-table table td, table td {
    border: none !important;
}

table:not(:has(thead)) tr:first-child td:first-child,
.su-table table th:first-child, table th:first-child,
.su-table table thead td:first-child, table thead td:first-child {
    border-bottom-left-radius: var(--radius-1x);
    border-top-left-radius: var(--radius-1x);
}

table:not(:has(thead)) tr:first-child td:last-child,
.su-table table th:last-child, table th:last-child,
.su-table table thead td:last-child, table thead td:last-child {
    border-bottom-right-radius: var(--radius-1x);
    border-top-right-radius: var(--radius-1x);
}

table:not(:has(thead)) tr:first-child td,
.su-table table th, table th,
.su-table table thead td, table thead td {
    background-color: var(--action-secondary) !important;
    padding: var(--spacing-15-x) var(--spacing-3x) !important;
}

/* header */
table:not(:has(thead)) tr:first-child td, .su-table table th, table th, .su-table table thead td, table thead td,
table:not(:has(thead)) tr:first-child td *, .su-table table th *, table th *, .su-table table thead td *, table thead td * {
    color: var(--text-primary);
    font-family: var(--font-family-body), var(--font-family-reserve);
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: var(--font-line-height-sm);
    text-align: left !important;
    margin: 0;
}

table:not(:has(thead)) tr:first-child td a, .su-table table th a, table th a, .su-table table thead td a, table thead td a {
    color: var(--action-primary);
}

.su-table table td, .su-table table td *, table td, table td * {
    margin: var(--spacing-0x);
    color: var(--text-primary);
    font-family: var(--font-family-body), var(--font-family-reserve);
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: var(--font-line-height-sm);
}

.su-table table td a, table td a {
    color: var(--action-primary);
}

.su-table table td, .su-table table tr:nth-child(even) td, table td, table tr:nth-child(even) td {
    background-color: var(--colors-neutral---light-0) !important;
    padding: calc(var(--spacing-15-x) + var(--spacing-2x)) var(--spacing-3x) !important;
}

.su-table table tbody tr, table tbody tr {
    border-bottom: 1px solid var(--surface-3);
}

.su-table table tbody tr:last-child, table tbody tr:last-child,
table:not(:has(thead)) tr:first-child {
    border-bottom: none;
}

@media (max-width: 768px) {
    table:not(:has(thead)) tr:first-child td,
    .su-table table th, table th,
    .su-table table thead td, table thead td {
        padding: 8px 10px !important;
        white-space: nowrap;
    }

    .su-table table td, .su-table table tr:nth-child(even) td,
    table td, table tr:nth-child(even) td {
        background-color: var(--colors-neutral---light-0) !important;
        padding: 16px 10px !important;
        white-space: nowrap;
    }
}