/* SoAI Website - Site table styles [soai.to/public/assets/css/site-table.css] | Copyright (c) 2024-2026 SoAI. All rights reserved. */

.site-table-sortable {
    --reorder-motion-duration: 400ms;
    --reorder-motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

:where(.site-table, .site-tables table) {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--code-block-border);
    border-radius: var(--border-radius);
    overflow: hidden;
    background: var(--code-block-bg);
}

:where(.site-table, .site-tables table) :where(th, td) {
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--code-block-border);
    border-right: 1px solid var(--code-block-border);
    transition: background-color 140ms ease;
}

@media (min-width: 900px) {
    :where(.site-table, .site-tables table) :where(th, td):first-child code {
        overflow-wrap: normal;
    }
}

:where(.site-table, .site-tables table) td {
    color: var(--text-secondary);
}

:where(.site-table, .site-tables table) th {
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
}

:where(.site-table, .site-tables table) tbody th {
    background: none;
    color: var(--text-secondary);
    font-weight: 400;
}

:is(.site-table, .site-tables table) tbody tr:nth-child(odd) > :is(th, td) {
    background: var(--bg-checker);
}

:is(.site-table, .site-tables table) tbody:not(.soaibench-table__empty) tr:is(:hover, :focus-within) > :is(th, td) {
    background: color-mix(in srgb, var(--text-primary) 18%, var(--code-block-bg));
}

:where(.site-table, .site-tables table) :where(th, td):last-child {
    border-right: none;
}

:where(.site-table, .site-tables table) tbody tr:last-child :where(th, td) {
    border-bottom: none;
}

:is(.site-table-scroll, .table-scroll) {
    width: 100%;
    max-width: 100%;
    overflow: auto hidden;
}

:is(.site-table-scroll, .table-scroll)[data-table-overflow-left] {
    --table-fade-start: 32px;
}

:is(.site-table-scroll, .table-scroll)[data-table-overflow-right] {
    --table-fade-end: calc(100% - 32px);
}

:is(.site-table-scroll, .table-scroll):is([data-table-overflow-left], [data-table-overflow-right]) {
    mask-image: linear-gradient(
        to right,
        transparent,
        #000 var(--table-fade-start, 0),
        #000 var(--table-fade-end, 100%),
        transparent
    );
}

@media print {
    :is(.site-table-scroll, .table-scroll) {
        mask-image: none;
    }
}

.site-table-scroll:focus-visible {
    outline: 2px solid var(--ui-button-focus-ring);
    outline-offset: 2px;
}

th.site-table-sortable-header {
    position: relative;
    padding-right: calc(14px + 1.25em);
    cursor: pointer;
    transition:
        background-color 120ms ease,
        color 120ms ease;
}

th.site-table-sortable-header:is(:hover, :focus-visible) {
    background: var(--ui-button-bg-hover);
    color: var(--text-primary);
}

th.site-table-sortable-header.is-active:not(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--text-primary) 7%, var(--bg-secondary));
    color: var(--text-primary);
}

th.site-table-sortable-header:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--text-primary) 32%, var(--border));
    outline-offset: -3px;
}

.site-table-sort-indicator {
    position: absolute;
    top: 50%;
    right: 14px;
    display: inline-grid;
    width: 1em;
    height: 1em;
    visibility: hidden;
    color: var(--text-secondary);
    line-height: 1;
    place-items: center;
    transform: translateY(-50%);
}

.site-table-sort-indicator::before {
    content: '▴';
}

th.site-table-sortable-header.is-descending > .site-table-sort-indicator::before {
    content: '▾';
}

th.site-table-sortable-header.is-active > .site-table-sort-indicator {
    visibility: visible;
}