@24vlh/vds 0.1.0 → 0.1.1

package/dist/components/tables.css

@@ -1,591 +1 @@
-/************************************************************
- * VLAH DESIGN SYSTEM (VDS) - Tables System
- *
- *  Responsibilities:
- *    - Provide full table architecture: wrappers, panels, headers, body,
- *      sticky headers/cols, row states, groups, expandable rows
- *    - Implement visual variants (bordered/minimal/striped/inset/clear)
- *    - Supply density modes (A/B/C/compact) + HF mode for high-frequency data
- *    - Define numerical, currency, percent, and trend helpers using
- *      tabular-nums, masks, and semantic lanes
- *    - Support empty/loading states, responsive collapse, and metric tables
- *
- *  System Notes:
- *    - 100% token-driven: spacing, borders, radii, text-scales, numeric
- *      variants, semantic colours
- *    - Pure CSS; JS optional only for toggling expandable rows
- *    - Compatible with skeleton loaders, overlays, finance states, and
- *      dark/light themes
- ************************************************************/
-
-/* ---------------------------------------------------------
-   1. TABLE TOKEN DEFINITIONS
---------------------------------------------------------- */
-
-[data-vds-table],
-.vds-table {
-    --table-currency-tint: color-mix(in srgb, currentColor 50%, transparent 30%);
-}
-
-/* ---------------------------------------------------------
-   2. TABLE WRAPPERS & PANELS
---------------------------------------------------------- */
-
-.table-wrapper {
-    width: 100%;
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-}
-
-.table-panel {
-    background-color: var(--color-surface);
-    border-radius: var(--radius-md);
-    border: var(--border-width) solid var(--color-border-subtle);
-    box-shadow: var(--shadow-xs);
-    padding: var(--space-4);
-}
-
-.table-panel__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--space-3);
-    margin-bottom: var(--space-3);
-}
-
-.table-panel__title {
-    font-size: var(--text-sm);
-    font-weight: 600;
-    color: var(--color-text);
-}
-
-.table-panel__meta {
-    font-size: var(--text-xs);
-    color: var(--color-text-muted);
-}
-
-/* ---------------------------------------------------------
-   3. BASE TABLE STRUCTURE
---------------------------------------------------------- */
-
-.table {
-    width: 100%;
-    border-collapse: collapse;
-    border-spacing: 0;
-    background-color: var(--color-surface);
-    color: var(--color-text);
-
-    --table-cell-pad-y: var(--space-3);
-    --table-cell-pad-x: var(--space-4);
-    --table-cell-font-size: var(--text-sm);
-}
-
-.table th,
-.table td {
-    padding: var(--table-cell-pad-y) var(--table-cell-pad-x);
-    border-bottom: var(--border-width) solid var(--color-border-subtle);
-    vertical-align: middle;
-    text-align: left;
-    font-size: var(--table-cell-font-size);
-}
-
-.table th {
-    font-weight: 600;
-    color: var(--color-text);
-    background-color: var(--color-surface-subtle);
-    border-bottom: var(--border-width-strong) solid var(--color-border-strong);
-    white-space: nowrap;
-    font-size: var(--text-sm);
-}
-
-.table caption {
-    caption-side: top;
-    text-align: left;
-    margin-bottom: var(--space-2);
-    font-size: var(--text-xs);
-    color: var(--color-text-muted);
-}
-
-/* ---------------------------------------------------------
-   4. DENSITY (A/B/C) & COMPACT
---------------------------------------------------------- */
-
-.table--a {
-    --table-cell-pad-y: var(--space-4);
-    --table-cell-pad-x: var(--space-5);
-    --table-cell-font-size: var(--text-md);
-}
-
-.table--b {
-    --table-cell-pad-y: var(--space-3);
-    --table-cell-pad-x: var(--space-4);
-    --table-cell-font-size: var(--text-sm);
-}
-
-.table--c {
-    --table-cell-pad-y: var(--space-2);
-    --table-cell-pad-x: var(--space-3);
-    --table-cell-font-size: var(--text-xs);
-}
-
-.table--compact {
-    --table-cell-pad-y: var(--space-1);
-}
-
-/* ---------------------------------------------------------
-   5. VISUAL VARIANTS
---------------------------------------------------------- */
-
-.table--bordered th,
-.table--bordered td {
-    border: var(--border-width) solid var(--color-border-subtle);
-}
-
-.table--no-borders th,
-.table--no-borders td {
-    border: none;
-}
-
-.table--striped tbody tr:nth-child(odd) {
-    background-color: var(--color-surface-subtle);
-}
-
-.table--hover tbody tr:hover {
-    background-color: var(--color-surface-soft);
-}
-
-.table--minimal th,
-.table--minimal td {
-    background-color: transparent;
-    border-bottom-color: var(--color-border-subtle);
-}
-
-.table--clear th,
-.table--clear td {
-    border: none;
-    background-color: transparent;
-}
-
-.table--inset {
-    border-radius: var(--radius-md);
-    overflow: hidden;
-}
-
-.table--truncate-cells th,
-.table--truncate-cells td {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-/* ---------------------------------------------------------
-   6. STICKY HEADER / COL
---------------------------------------------------------- */
-
-.table--sticky-header thead th {
-    position: sticky;
-    top: 0;
-    z-index: var(--z-sticky);
-    background-color: var(--color-bg-elevated, var(--color-surface));
-    box-shadow: 0 1px 0 var(--color-border-subtle);
-}
-
-.table--sticky-col td:first-child,
-.table--sticky-col th:first-child {
-    position: sticky;
-    left: 0;
-    z-index: var(--z-sticky-col);
-    background-color: var(--color-bg-elevated, var(--color-surface));
-}
-
-/* ---------------------------------------------------------
-   7. ROW STATES
---------------------------------------------------------- */
-
-.table-row--selected {
-    background-color: var(--color-accent-soft);
-}
-
-.table-row--success {
-    background-color: var(--table-row-good-bg, var(--color-success-soft));
-}
-
-.table-row--danger {
-    background-color: var(--table-row-bad-bg, var(--color-danger-soft));
-}
-
-.table-row--warning {
-    background-color: var(--table-row-warning-bg, var(--color-warning-soft));
-}
-
-.table-row--info {
-    background-color: var(--table-row-info-bg, var(--color-info-soft));
-}
-
-.table-row--muted {
-    background-color: var(--table-row-muted-bg, var(--color-muted-bg));
-    color: var(--color-text-muted);
-}
-
-/* ---------------------------------------------------------
-   8. INLINE ACTIONS
---------------------------------------------------------- */
-
-.table-actions {
-    display: flex;
-    gap: var(--space-2);
-    align-items: center;
-}
-
-.table-actions .icon {
-    width: var(--icon-sm);
-    height: var(--icon-sm);
-    color: var(--color-icon-muted);
-    flex-shrink: 0;
-    cursor: pointer;
-}
-
-.table-actions .icon:hover {
-    color: var(--color-icon-strong);
-}
-
-/* ---------------------------------------------------------
-   9. EXPANDABLE ROWS
---------------------------------------------------------- */
-
-.table-row--expandable {
-    cursor: pointer;
-}
-
-.table-row--details {
-    display: none;
-}
-
-.table-row--expanded + .table-row--details,
-.table-row--details[data-expanded="true"] {
-    display: table-row;
-}
-
-.table-row--details td {
-    padding: var(--space-4);
-    background-color: var(--color-surface-subtle);
-}
-
-/* ---------------------------------------------------------
-   10. GROUP HEADERS
---------------------------------------------------------- */
-
-.table-group-header th {
-    background-color: var(--color-surface-soft);
-    font-weight: 600;
-    padding-top: var(--space-3);
-    padding-bottom: var(--space-2);
-    border-top: var(--border-width-strong) solid var(--color-border-strong);
-}
-
-/* ---------------------------------------------------------
-   11. METRIC TABLES
---------------------------------------------------------- */
-
-.metric-table {
-    width: 100%;
-    border-collapse: collapse;
-}
-
-.metric-table tr:not(:last-child) td {
-    border-bottom: var(--border-width) solid var(--color-border-subtle);
-}
-
-.metric-table__label {
-    font-weight: 500;
-    color: var(--color-text-muted);
-    padding: var(--space-2) 0;
-    font-size: var(--text-xs);
-}
-
-.metric-table__value {
-    text-align: right;
-    font-weight: 600;
-    padding: var(--space-2) 0;
-    font-size: var(--text-sm);
-    font-feature-settings: "tnum";
-    font-variant-numeric: tabular-nums;
-}
-
-/* ---------------------------------------------------------
-   12. EMPTY & LOADING STATES
---------------------------------------------------------- */
-
-.table-empty {
-    text-align: center;
-    padding: var(--space-6) 0;
-    color: var(--color-text-muted);
-}
-
-.table-empty__content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-}
-
-.table-empty__icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 0.5rem;
-    margin-bottom: var(--space-2, 0.5rem);
-}
-
-.table-loading td {
-    position: relative;
-    color: transparent;
-    overflow: hidden;
-}
-
-.table-loading td::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    transform: translateX(-150%);
-    background: linear-gradient(90deg, transparent, var(--color-muted-bg), transparent);
-    animation: table-loading 1.6s infinite;
-}
-
-@keyframes table-loading {
-    0% {
-        transform: translateX(-150%);
-    }
-    100% {
-        transform: translateX(150%);
-    }
-}
-
-/* ---------------------------------------------------------
-   13. RESPONSIVE COLLAPSE
---------------------------------------------------------- */
-
-@media (max-width: 640px) {
-    .table--collapse thead {
-        display: none;
-    }
-
-    .table--collapse tbody tr {
-        display: block;
-        border: var(--border-width) solid var(--color-border-subtle);
-        margin-bottom: var(--space-4);
-        border-radius: var(--radius-md);
-        background-color: var(--color-surface);
-        overflow: hidden;
-    }
-
-    .table--collapse tbody td {
-        display: flex;
-        justify-content: space-between;
-        padding: var(--space-3);
-        border-bottom: var(--border-width) solid var(--color-border-subtle);
-        font-size: var(--text-sm);
-    }
-
-    .table--collapse tbody td:last-child {
-        border-bottom: none;
-    }
-
-    .table--collapse tbody td::before {
-        content: attr(data-label);
-        font-weight: 600;
-        color: var(--color-text-muted);
-        margin-right: var(--space-2);
-        font-size: var(--text-xs);
-    }
-}
-
-/* ---------------------------------------------------------
-   14. HIGH FREQUENCY TABLE (HF)
---------------------------------------------------------- */
-
-.table--hf {
-    font-size: var(--text-xs);
-}
-
-.table--hf th,
-.table--hf td {
-    padding: var(--space-1) var(--space-2);
-    border: var(--border-width) solid var(--color-border-subtle);
-}
-
-.table--hf thead th {
-    background-color: var(--color-surface-subtle);
-    position: sticky;
-    top: 0;
-    z-index: var(--z-sticky);
-    border-bottom: var(--border-width-strong) solid var(--color-border-strong);
-}
-
-.table--hf td[data-type="num"] {
-    text-align: right;
-    font-feature-settings: "tnum";
-    font-variant-numeric: tabular-nums;
-}
-
-/* ---------------------------------------------------------
-   15. NUMERIC / CURRENCY / PERCENT HELPERS (SPAN-BASED)
---------------------------------------------------------- */
-
-.t-num,
-.t-pct {
-    text-align: right;
-    font-feature-settings: "tnum";
-    font-variant-numeric: tabular-nums;
-    white-space: nowrap;
-}
-
-.t-cur {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-    font-feature-settings: "tnum";
-    font-variant-numeric: tabular-nums;
-    white-space: nowrap;
-}
-
-.cur-eur::before {
-    content: "€";
-}
-
-.cur-usd::before {
-    content: "$";
-}
-
-.cur-gbp::before {
-    content: "£";
-}
-
-.cur-ron::before {
-    content: "RON";
-}
-
-.cur-chf::before {
-    content: "CHF";
-}
-
-.cur-jpy::before {
-    content: "¥";
-}
-
-.cur-eur::before,
-.cur-usd::before,
-.cur-gbp::before,
-.cur-ron::before,
-.cur-chf::before,
-.cur-jpy::before {
-    margin-right: var(--space-1);
-    font-size: var(--text-xxxs);
-    font-weight: 600;
-    color: var(--table-currency-tint);
-}
-
-.t-pct {
-    color: inherit;
-}
-
-/* ---------------------------------------------------------
-   16. TREND HELPERS (SPAN-BASED)
---------------------------------------------------------- */
-
-.t-trend {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-feature-settings: "tnum";
-    font-variant-numeric: tabular-nums;
-    white-space: nowrap;
-    text-align: right;
-    width: 100%;
-}
-
-.t-up,
-.t-down,
-.t-flat {
-    display: inline-flex;
-    align-items: center;
-}
-
-.t-up {
-    color: var(--table-trend-up, var(--color-success-strong));
-}
-
-.t-down {
-    color: var(--table-trend-down, var(--color-danger-strong));
-}
-
-.t-flat {
-    color: var(--table-trend-flat, var(--color-text-muted));
-}
-
-.t-up::before,
-.t-down::before,
-.t-flat::before {
-    content: "";
-    width: var(--icon-xs);
-    height: var(--icon-xs);
-    -webkit-mask-size: contain;
-            mask-size: contain;
-    -webkit-mask-repeat: no-repeat;
-            mask-repeat: no-repeat;
-    background-color: currentColor;
-    margin-right: var(--space-1);
-}
-
-.t-up::before {
-    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'><path d='M9 15 H7 V8 H5 L8 1 L11 8 H9 Z'/></svg>");
-            mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'><path d='M9 15 H7 V8 H5 L8 1 L11 8 H9 Z'/></svg>");
-}
-
-.t-down::before {
-    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'><path d='M7 1 H9 V8 H11 L8 15 L5 8 H7 Z'/></svg>");
-            mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'><path d='M7 1 H9 V8 H11 L8 15 L5 8 H7 Z'/></svg>");
-}
-
-.t-flat::before {
-    -webkit-mask-image: url("data:image/svg+xml,<svg stroke='currentColor' fill='none' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><line x1='3' y1='8' x2='13' y2='8' stroke-width='2'/></svg>");
-            mask-image: url("data:image/svg+xml,<svg stroke='currentColor' fill='none' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><line x1='3' y1='8' x2='13' y2='8' stroke-width='2'/></svg>");
-}
-
-/* ---------------------------------------------------------
-   17. FINANCE ROW STATES (NAMESPACED)
---------------------------------------------------------- */
-
-.table-fin--good {
-    background-color: var(--table-row-good-bg, var(--color-success-soft));
-}
-
-.table-fin--bad {
-    background-color: var(--table-row-bad-bg, var(--color-danger-soft));
-}
-
-.table-fin--warning {
-    background-color: var(--table-row-warning-bg, var(--color-warning-soft));
-}
-
-.table-fin--info {
-    background-color: var(--table-row-info-bg, var(--color-info-soft));
-}
-
-.table-fin--muted {
-    background-color: var(--table-row-muted-bg, var(--color-muted-bg));
-    color: var(--color-text-muted);
-}
-
-.table-fin--flagged {
-    background-color: var(--table-row-flagged-bg, var(--color-danger-soft));
-    border-left: var(--border-width-strong) solid var(--color-danger);
-}
-
-.table-fin--curious {
-    background-color: var(--table-row-curious-bg, var(--color-surface-subtle));
-    border-left: var(--border-width-strong) solid var(--color-accent);
-}
+.vds-table,[data-vds-table]{--table-currency-tint:color-mix(in srgb,currentColor 50%,transparent 30%)}.table-wrapper{-webkit-overflow-scrolling:touch;overflow-x:auto;width:100%}.table-panel{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-xs);padding:var(--space-4)}.table-panel__header{align-items:center;display:flex;gap:var(--space-3);justify-content:space-between;margin-bottom:var(--space-3)}.table-panel__title{color:var(--color-text);font-size:var(--text-sm);font-weight:600}.table-panel__meta{color:var(--color-text-muted);font-size:var(--text-xs)}.table{--table-cell-pad-y:var(--space-3);--table-cell-pad-x:var(--space-4);--table-cell-font-size:var(--text-sm);background-color:var(--color-surface);border-collapse:collapse;border-spacing:0;color:var(--color-text);width:100%}.table td,.table th{border-bottom:var(--border-width) solid var(--color-border-subtle);font-size:var(--table-cell-font-size);padding:var(--table-cell-pad-y) var(--table-cell-pad-x);text-align:left;vertical-align:middle}.table th{background-color:var(--color-surface-subtle);border-bottom:var(--border-width-strong) solid var(--color-border-strong);color:var(--color-text);font-size:var(--text-sm);font-weight:600;white-space:nowrap}.table caption{caption-side:top;color:var(--color-text-muted);font-size:var(--text-xs);margin-bottom:var(--space-2);text-align:left}.table--a{--table-cell-pad-y:var(--space-4);--table-cell-pad-x:var(--space-5);--table-cell-font-size:var(--text-md)}.table--b{--table-cell-pad-y:var(--space-3);--table-cell-pad-x:var(--space-4);--table-cell-font-size:var(--text-sm)}.table--c{--table-cell-pad-y:var(--space-2);--table-cell-pad-x:var(--space-3);--table-cell-font-size:var(--text-xs)}.table--compact{--table-cell-pad-y:var(--space-1)}.table--bordered td,.table--bordered th{border:var(--border-width) solid var(--color-border-subtle)}.table--no-borders td,.table--no-borders th{border:none}.table--striped tbody tr:nth-child(odd){background-color:var(--color-surface-subtle)}.table--hover tbody tr:hover{background-color:var(--color-surface-soft)}.table--minimal td,.table--minimal th{background-color:transparent;border-bottom-color:var(--color-border-subtle)}.table--clear td,.table--clear th{background-color:transparent;border:none}.table--inset{border-radius:var(--radius-md);overflow:hidden}.table--truncate-cells td,.table--truncate-cells th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.table--sticky-header thead th{background-color:var(--color-bg-elevated,var(--color-surface));box-shadow:0 1px 0 var(--color-border-subtle);position:sticky;top:0;z-index:var(--z-sticky)}.table--sticky-col td:first-child,.table--sticky-col th:first-child{background-color:var(--color-bg-elevated,var(--color-surface));left:0;position:sticky;z-index:var(--z-sticky-col)}.table-row--selected{background-color:var(--color-accent-soft)}.table-row--success{background-color:var(--table-row-good-bg,var(--color-success-soft))}.table-row--danger{background-color:var(--table-row-bad-bg,var(--color-danger-soft))}.table-row--warning{background-color:var(--table-row-warning-bg,var(--color-warning-soft))}.table-row--info{background-color:var(--table-row-info-bg,var(--color-info-soft))}.table-row--muted{background-color:var(--table-row-muted-bg,var(--color-muted-bg));color:var(--color-text-muted)}.table-actions{align-items:center;display:flex;gap:var(--space-2)}.table-actions .icon{color:var(--color-icon-muted);cursor:pointer;flex-shrink:0;height:var(--icon-sm);width:var(--icon-sm)}.table-actions .icon:hover{color:var(--color-icon-strong)}.table-row--expandable{cursor:pointer}.table-row--details{display:none}.table-row--details[data-expanded=true],.table-row--expanded+.table-row--details{display:table-row}.table-row--details td{background-color:var(--color-surface-subtle);padding:var(--space-4)}.table-group-header th{background-color:var(--color-surface-soft);border-top:var(--border-width-strong) solid var(--color-border-strong);font-weight:600;padding-bottom:var(--space-2);padding-top:var(--space-3)}.metric-table{border-collapse:collapse;width:100%}.metric-table tr:not(:last-child) td{border-bottom:var(--border-width) solid var(--color-border-subtle)}.metric-table__label{color:var(--color-text-muted);font-size:var(--text-xs);font-weight:500;padding:var(--space-2) 0}.metric-table__value{font-feature-settings:"tnum";font-size:var(--text-sm);font-variant-numeric:tabular-nums;font-weight:600;padding:var(--space-2) 0;text-align:right}.table-empty{color:var(--color-text-muted);padding:var(--space-6) 0;text-align:center}.table-empty__content{align-items:center;display:flex;flex-direction:column;text-align:center}.table-empty__icon{align-items:center;display:flex;justify-content:center;margin-bottom:.5rem;margin-bottom:var(--space-2,.5rem)}.table-loading td{color:transparent;overflow:hidden;position:relative}.table-loading td:after{animation:table-loading 1.6s infinite;background:linear-gradient(90deg,transparent,var(--color-muted-bg),transparent);bottom:0;content:"";left:0;position:absolute;right:0;top:0;transform:translateX(-150%)}@keyframes table-loading{0%{transform:translateX(-150%)}to{transform:translateX(150%)}}@media (max-width:640px){.table--collapse thead{display:none}.table--collapse tbody tr{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);display:block;margin-bottom:var(--space-4);overflow:hidden}.table--collapse tbody td{border-bottom:var(--border-width) solid var(--color-border-subtle);display:flex;font-size:var(--text-sm);justify-content:space-between;padding:var(--space-3)}.table--collapse tbody td:last-child{border-bottom:none}.table--collapse tbody td:before{color:var(--color-text-muted);content:attr(data-label);font-size:var(--text-xs);font-weight:600;margin-right:var(--space-2)}}.table--hf{font-size:var(--text-xs)}.table--hf td,.table--hf th{border:var(--border-width) solid var(--color-border-subtle);padding:var(--space-1) var(--space-2)}.table--hf thead th{background-color:var(--color-surface-subtle);border-bottom:var(--border-width-strong) solid var(--color-border-strong);position:sticky;top:0;z-index:var(--z-sticky)}.t-num,.t-pct,.table--hf td[data-type=num]{font-feature-settings:"tnum";font-variant-numeric:tabular-nums;text-align:right}.t-cur,.t-num,.t-pct{white-space:nowrap}.t-cur{font-feature-settings:"tnum";align-items:baseline;display:flex;font-variant-numeric:tabular-nums;justify-content:space-between}.cur-eur:before{content:"€"}.cur-usd:before{content:"$"}.cur-gbp:before{content:"£"}.cur-ron:before{content:"RON"}.cur-chf:before{content:"CHF"}.cur-jpy:before{content:"¥"}.cur-chf:before,.cur-eur:before,.cur-gbp:before,.cur-jpy:before,.cur-ron:before,.cur-usd:before{color:var(--table-currency-tint);font-size:var(--text-xxxs);font-weight:600;margin-right:var(--space-1)}.t-pct{color:inherit}.t-trend{font-feature-settings:"tnum";align-items:center;display:flex;font-variant-numeric:tabular-nums;justify-content:space-between;text-align:right;white-space:nowrap;width:100%}.t-down,.t-flat,.t-up{align-items:center;display:inline-flex}.t-up{color:var(--table-trend-up,var(--color-success-strong))}.t-down{color:var(--table-trend-down,var(--color-danger-strong))}.t-flat{color:var(--table-trend-flat,var(--color-text-muted))}.t-down:before,.t-flat:before,.t-up:before{background-color:currentColor;content:"";height:var(--icon-xs);margin-right:var(--space-1);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:var(--icon-xs)}.t-up:before{-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M9 15H7V8H5l3-7 3 7H9Z"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M9 15H7V8H5l3-7 3 7H9Z"/></svg>')}.t-down:before{-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M7 1h2v7h2l-3 7-3-7h2Z"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M7 1h2v7h2l-3 7-3-7h2Z"/></svg>')}.t-flat:before{-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg stroke="currentColor" fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path stroke-width="2" d="M3 8h10"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg stroke="currentColor" fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path stroke-width="2" d="M3 8h10"/></svg>')}.table-fin--good{background-color:var(--table-row-good-bg,var(--color-success-soft))}.table-fin--bad{background-color:var(--table-row-bad-bg,var(--color-danger-soft))}.table-fin--warning{background-color:var(--table-row-warning-bg,var(--color-warning-soft))}.table-fin--info{background-color:var(--table-row-info-bg,var(--color-info-soft))}.table-fin--muted{background-color:var(--table-row-muted-bg,var(--color-muted-bg));color:var(--color-text-muted)}.table-fin--flagged{background-color:var(--table-row-flagged-bg,var(--color-danger-soft));border-left:var(--border-width-strong) solid var(--color-danger)}.table-fin--curious{background-color:var(--table-row-curious-bg,var(--color-surface-subtle));border-left:var(--border-width-strong) solid var(--color-accent)}