.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.table th,
.table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid color-mix(in srgb, var(--val-color--border) 15%, var(--val-color--bg));
}

.table thead th {
    border-bottom-width: 2px;
    font-weight: 600;
}

.table-sort {
    color: inherit;
    text-decoration: none;
}
.table-sort:hover {
    text-decoration: underline;
}
.table-sort::after {
    content: "\25BC";
    margin-left: 0.25rem;
    font-size: 0.8em;
    opacity: 0.15;
}
.table-sort-asc::after {
    content: "\25B2";
    font-size: 0.8em;
    opacity: 1;
}
.table-sort-desc::after {
    content: "\25BC";
    font-size: 0.8em;
    opacity: 1;
}

.table-empty {
    text-align: center;
    font-style: italic;
    color: var(--val-color--text--muted);
}