sakana-element 2.4.2 → 2.5.0

package/dist/theme/Table.css

@@ -1,680 +1 @@
-/* ─── Table Variables ─── */
-.px-table {
-  --px-table-padding-y: 10px;
-  --px-table-padding-x: 14px;
-  --px-table-border-color: var(--px-border-color);
-  --px-table-bg-color: var(--px-bg-color-overlay);
-  --px-table-header-bg-color: var(--px-bg-color);
-  --px-table-row-hover-color: var(--px-fill-color-light);
-  --px-table-zebra-color: var(--px-fill-color);
-  --px-table-font-size: var(--px-font-size-base);
-  --px-table-shadow-color: var(--px-shadow-color);
-
-  /* Pixel-art interior styling */
-  --px-table-divider-color: var(--px-border-color-light);
-  --px-table-header-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.35);
-  --px-table-header-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.08);
-  --px-table-footer-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.2);
-  --px-table-footer-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.05);
-  --px-table-hover-overlay: rgba(0, 0, 0, 0.04);
-  --px-table-body-dot-color: rgba(0, 0, 0, 0.03);
-
-  /* Body cell subtle bevel */
-  --px-table-cell-highlight: inset 1px 1px 0 0 rgba(255, 255, 255, 0.12);
-  --px-table-cell-shadow: inset -1px -1px 0 0 rgba(0, 0, 0, 0.03);
-
-  /* Reduced bevel for outline variant */
-  --px-table-reduced-highlight: inset 1px 1px 0 0 rgba(255, 255, 255, 0.15);
-  --px-table-reduced-shadow: inset -1px -1px 0 0 rgba(0, 0, 0, 0.04);
-  --px-table-reduced-footer-highlight: inset 1px 1px 0 0 rgba(255, 255, 255, 0.10);
-  --px-table-reduced-footer-shadow: inset -1px -1px 0 0 rgba(0, 0, 0, 0.03);
-}
-/* ─── Base Table Styles — Pixel Game Aesthetic ─── */
-.px-table {
-  position: relative;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  font-family: var(--px-font-family);
-  font-size: var(--px-table-font-size);
-  color: var(--px-text-color-primary);
-  background: transparent;
-  border: none;
-  box-sizing: border-box;
-  transition: none;
-  overflow: hidden;
-  filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-table-shadow-color));
-}
-/* Border layer — filled with border color, clipped to pixel shape */
-.px-table::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: var(--px-table-border-color);
-    clip-path: polygon(
-      0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0,
-      calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
-      100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%,
-      4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px)
-    );
-    z-index: 0;
-}
-/* Fill layer — inset by border width, filled with bg color */
-.px-table::after {
-    content: '';
-    position: absolute;
-    inset: 2px;
-    background: var(--px-table-bg-color);
-    clip-path: polygon(
-      0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0,
-      calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
-      100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%,
-      4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px)
-    );
-    z-index: 0;
-}
-/* ─── Inner Scroll Wrapper ─── */
-.px-table__inner {
-  position: relative;
-  z-index: 1;
-  overflow: auto;
-  flex: 1 1 auto;
-  min-height: 0;
-  min-width: 0;
-}
-.px-table__inner table {
-    display: table;
-    width: 100%;
-    table-layout: fixed;
-    border-collapse: collapse;
-    border-spacing: 0;
-    margin: 0;
-    overflow-x: visible;
-}
-.px-table__inner th,
-  .px-table__inner td {
-    padding: var(--px-table-padding-y) var(--px-table-padding-x);
-    text-align: left;
-    vertical-align: middle;
-    border-bottom: none;
-    position: relative;
-}
-/* Header cells — beveled 3D raised panel with dot-grid texture */
-.px-table__inner th {
-    font-weight: 600;
-    color: var(--px-text-color-primary);
-    background:
-      repeating-linear-gradient(
-        to right,
-        var(--px-table-body-dot-color) 0,
-        var(--px-table-body-dot-color) 2px,
-        transparent 2px,
-        transparent 4px
-      ),
-      var(--px-table-header-bg-color);
-    box-shadow:
-      var(--px-table-header-highlight),
-      var(--px-table-header-shadow);
-}
-/* Pixel-dashed divider under thead */
-.px-table__inner thead th::after {
-    content: "";
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: calc(var(--px-border-width) * 2);
-    background-image: repeating-linear-gradient(
-      to right,
-      var(--px-table-border-color) 0px,
-      var(--px-table-border-color) 6px,
-      transparent 6px,
-      transparent 12px
-    );
-    pointer-events: none;
-}
-/* Subtle pixel-dot grid + bevel on body cells */
-.px-table__inner tbody td {
-    background-image: repeating-linear-gradient(
-      to right,
-      var(--px-table-body-dot-color) 0,
-      var(--px-table-body-dot-color) 2px,
-      transparent 2px,
-      transparent 4px
-    );
-    box-shadow:
-      var(--px-table-cell-highlight),
-      var(--px-table-cell-shadow);
-}
-/* Pixel-dashed row divider on body cells */
-.px-table__inner tbody td::after {
-    content: "";
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: var(--px-border-width);
-    background-image: repeating-linear-gradient(
-      to right,
-      var(--px-table-divider-color) 0px,
-      var(--px-table-divider-color) 6px,
-      transparent 6px,
-      transparent 12px
-    );
-    pointer-events: none;
-}
-/* Remove divider from last body row */
-.px-table__inner tbody tr:last-child td::after {
-    display: none;
-}
-/* Footer cells — lighter beveled panel with dot-grid texture */
-.px-table__inner tfoot th,
-  .px-table__inner tfoot td {
-    font-weight: 600;
-    background:
-      repeating-linear-gradient(
-        to right,
-        var(--px-table-body-dot-color) 0,
-        var(--px-table-body-dot-color) 2px,
-        transparent 2px,
-        transparent 4px
-      ),
-      var(--px-table-header-bg-color);
-    box-shadow:
-      var(--px-table-footer-highlight),
-      var(--px-table-footer-shadow);
-}
-/* Pixel-dashed divider at top of footer */
-.px-table__inner tfoot tr:first-child th::before,
-  .px-table__inner tfoot tr:first-child td::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: calc(var(--px-border-width) * 2);
-    background-image: repeating-linear-gradient(
-      to right,
-      var(--px-table-border-color) 0px,
-      var(--px-table-border-color) 6px,
-      transparent 6px,
-      transparent 12px
-    );
-    pointer-events: none;
-}
-/* ─── Caption ─── */
-.px-table__inner table caption {
-  padding: var(--px-table-padding-y) var(--px-table-padding-x);
-  font-weight: 600;
-  text-align: center;
-  position: relative;
-  caption-side: top;
-}
-/* Pixel-dashed bottom divider (same pattern as thead divider) */
-.px-table__inner table caption::after {
-    content: "";
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: calc(var(--px-border-width) * 2);
-    background-image: repeating-linear-gradient(
-      to right,
-      var(--px-table-border-color) 0px,
-      var(--px-table-border-color) 6px,
-      transparent 6px,
-      transparent 12px
-    );
-    pointer-events: none;
-}
-/* ─── Pixel-Art Scrollbar ─── */
-.px-table__inner {
-  /* Firefox */
-  scrollbar-width: thin;
-  scrollbar-color: var(--px-table-border-color) var(--px-fill-color-lighter);
-}
-/* Webkit (Chrome, Safari, Edge) */
-.px-table__inner::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-}
-.px-table__inner::-webkit-scrollbar-track {
-    background:
-      repeating-linear-gradient(
-        to right,
-        rgba(0, 0, 0, 0.03) 0,
-        rgba(0, 0, 0, 0.03) 2px,
-        transparent 2px,
-        transparent 4px
-      ),
-      var(--px-fill-color-lighter);
-    box-shadow: inset 1px 1px 0 0 rgba(0, 0, 0, 0.06), inset -1px -1px 0 0 rgba(255, 255, 255, 0.3);
-}
-.px-table__inner::-webkit-scrollbar-thumb {
-    background: var(--px-table-border-color);
-    box-shadow:
-      inset 1px 1px 0 0 rgba(255, 255, 255, 0.3),
-      inset -1px -1px 0 0 rgba(0, 0, 0, 0.15);
-}
-.px-table__inner::-webkit-scrollbar-corner {
-    background: var(--px-fill-color-lighter);
-}
-/* ─── Size Variants ─── */
-.px-table--xs {
-  --px-table-padding-y: 4px;
-  --px-table-padding-x: 8px;
-  --px-table-font-size: var(--px-font-size-extra-small);
-}
-.px-table--sm {
-  --px-table-padding-y: 6px;
-  --px-table-padding-x: 10px;
-  --px-table-font-size: var(--px-font-size-small);
-}
-.px-table--md {
-  --px-table-padding-y: 10px;
-  --px-table-padding-x: 14px;
-  --px-table-font-size: var(--px-font-size-base);
-}
-.px-table--lg {
-  --px-table-padding-y: 14px;
-  --px-table-padding-x: 18px;
-  --px-table-font-size: var(--px-font-size-large);
-}
-.px-table--xl {
-  --px-table-padding-y: 18px;
-  --px-table-padding-x: 22px;
-  --px-table-font-size: var(--px-font-size-extra-large);
-}
-/* ─── Zebra Stripes — Checkerboard Texture ─── */
-.px-table.is-zebra tbody tr:nth-child(even) td {
-  background:
-    linear-gradient(45deg, var(--px-table-hover-overlay) 25%, transparent 25%),
-    linear-gradient(-45deg, var(--px-table-hover-overlay) 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, var(--px-table-hover-overlay) 75%),
-    linear-gradient(-45deg, transparent 75%, var(--px-table-hover-overlay) 75%),
-    var(--px-table-zebra-color);
-  background-size: 4px 4px, 4px 4px, 4px 4px, 4px 4px, auto;
-  background-position: 0 0, 0 2px, 2px -2px, -2px 0, 0 0;
-}
-/* ─── Hover Highlight — Diagonal Stripe Overlay ─── */
-.px-table.is-hover tbody tr:hover td {
-  background:
-    repeating-linear-gradient(
-      -45deg,
-      transparent,
-      transparent 4px,
-      rgba(255, 255, 255, 0.18) 4px,
-      rgba(255, 255, 255, 0.18) 8px
-    ),
-    var(--px-table-row-hover-color);
-}
-/* ─── Full Borders — Pixel-Dashed Cell Outlines ─── */
-.px-table.is-border th,
-  .px-table.is-border td {
-    border: none;
-    background-image:
-      /* Bottom edge — horizontal dashes */
-      repeating-linear-gradient(
-        to right,
-        var(--px-table-border-color) 0 6px,
-        transparent 6px 12px
-      ),
-      /* Right edge — vertical dashes */
-      repeating-linear-gradient(
-        to bottom,
-        var(--px-table-border-color) 0 6px,
-        transparent 6px 12px
-      );
-    background-size:
-      100% var(--px-border-width),
-      var(--px-border-width) 100%;
-    background-position: 0 100%, 100% 0;
-    background-repeat: no-repeat;
-}
-/* Header cells: keep bevel, layer border dashes on top of header bg */
-.px-table.is-border thead th {
-    background:
-      /* Dashed border edges (bottom + right only) */
-      repeating-linear-gradient(to right, var(--px-table-border-color) 0 6px, transparent 6px 12px) 0 100% / 100% var(--px-border-width) no-repeat,
-      repeating-linear-gradient(to bottom, var(--px-table-border-color) 0 6px, transparent 6px 12px) 100% 0 / var(--px-border-width) 100% no-repeat,
-      /* Dot texture */
-      repeating-linear-gradient(to right, var(--px-table-body-dot-color) 0 2px, transparent 2px 4px),
-      /* Base header color */
-      var(--px-table-header-bg-color);
-}
-/* Footer cells: keep bevel, layer border dashes on top of footer bg */
-.px-table.is-border tfoot th,
-  .px-table.is-border tfoot td {
-    background:
-      repeating-linear-gradient(to right, var(--px-table-border-color) 0 6px, transparent 6px 12px) 0 100% / 100% var(--px-border-width) no-repeat,
-      repeating-linear-gradient(to bottom, var(--px-table-border-color) 0 6px, transparent 6px 12px) 100% 0 / var(--px-border-width) 100% no-repeat,
-      repeating-linear-gradient(to right, var(--px-table-body-dot-color) 0 2px, transparent 2px 4px),
-      var(--px-table-header-bg-color);
-}
-/* Disable pseudo-element dividers — border grid replaces them */
-.px-table.is-border tbody td::after,
-  .px-table.is-border thead th::after,
-  .px-table.is-border tfoot tr:first-child th::before,
-  .px-table.is-border tfoot tr:first-child td::before {
-    display: none;
-}
-/* is-border + zebra: layer dashed borders on top of checkerboard texture */
-.px-table.is-border.is-zebra tbody tr:nth-child(even) td {
-  background:
-    repeating-linear-gradient(to right, var(--px-table-border-color) 0 6px, transparent 6px 12px) 0 100% / 100% var(--px-border-width) no-repeat,
-    repeating-linear-gradient(to bottom, var(--px-table-border-color) 0 6px, transparent 6px 12px) 100% 0 / var(--px-border-width) 100% no-repeat,
-    linear-gradient(45deg, var(--px-table-hover-overlay) 25%, transparent 25%) 0 0 / 4px 4px,
-    linear-gradient(-45deg, var(--px-table-hover-overlay) 25%, transparent 25%) 0 2px / 4px 4px,
-    linear-gradient(45deg, transparent 75%, var(--px-table-hover-overlay) 75%) 2px -2px / 4px 4px,
-    linear-gradient(-45deg, transparent 75%, var(--px-table-hover-overlay) 75%) -2px 0 / 4px 4px,
-    var(--px-table-zebra-color);
-}
-/* is-border + hover: layer dashed borders on top of striped hover */
-.px-table.is-border.is-hover tbody tr:hover td {
-  background:
-    repeating-linear-gradient(to right, var(--px-table-border-color) 0 6px, transparent 6px 12px) 0 100% / 100% var(--px-border-width) no-repeat,
-    repeating-linear-gradient(to bottom, var(--px-table-border-color) 0 6px, transparent 6px 12px) 100% 0 / var(--px-border-width) 100% no-repeat,
-    repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(255, 255, 255, 0.18) 4px, rgba(255, 255, 255, 0.18) 8px),
-    var(--px-table-row-hover-color);
-}
-/* ─── Pin Rows (Sticky Header/Footer) ─── */
-.px-table.is-pin-rows thead th {
-    position: sticky;
-    top: 0;
-    z-index: 2;
-}
-.px-table.is-pin-rows tfoot th,
-  .px-table.is-pin-rows tfoot td {
-    position: sticky;
-    bottom: 0;
-    z-index: 2;
-}
-/* ─── Pin Cols (Sticky First Column) ─── */
-.px-table.is-pin-cols th:first-child,
-  .px-table.is-pin-cols td:first-child {
-    position: sticky;
-    left: 0;
-    z-index: 1;
-    /* Layer dot-grid texture on top of solid bg to prevent texture loss */
-    background:
-      repeating-linear-gradient(
-        to right,
-        var(--px-table-body-dot-color) 0,
-        var(--px-table-body-dot-color) 2px,
-        transparent 2px,
-        transparent 4px
-      ),
-      var(--px-table-bg-color);
-}
-.px-table.is-pin-cols thead th:first-child {
-    background:
-      repeating-linear-gradient(
-        to right,
-        var(--px-table-body-dot-color) 0,
-        var(--px-table-body-dot-color) 2px,
-        transparent 2px,
-        transparent 4px
-      ),
-      var(--px-table-header-bg-color);
-}
-/* ─── Pin Rows + Cols intersection ─── */
-.px-table.is-pin-rows.is-pin-cols thead th:first-child {
-    z-index: 3;
-}
-.px-table.is-pin-rows.is-pin-cols tfoot th:first-child,
-  .px-table.is-pin-rows.is-pin-cols tfoot td:first-child {
-    z-index: 3;
-}
-/* ─── Hide Header ─── */
-.px-table.is-hide-header thead {
-  display: none;
-}
-/* ─── Color Type Variants ─── */
-.px-table--primary {
-    --px-table-border-color: var(--px-color-primary);
-    --px-table-shadow-color: var(--px-color-primary-dark);
-    --px-table-header-bg-color: var(--px-color-primary-light-9);
-    --px-table-divider-color: var(--px-color-primary-light-5);
-    --px-table-header-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.4);
-    --px-table-header-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
-}
-.px-table--primary.is-outline {
-    --px-table-bg-color: transparent;
-    --px-table-border-color: var(--px-color-primary);
-    --px-table-header-highlight: none;
-    --px-table-header-shadow: none;
-    --px-table-cell-highlight: none;
-    --px-table-cell-shadow: none;
-}
-.px-table--primary.is-ghost {
-    --px-table-bg-color: transparent;
-    --px-table-border-color: transparent;
-    --px-table-shadow-color: transparent;
-    --px-table-header-highlight: none;
-    --px-table-header-shadow: none;
-    --px-table-cell-highlight: none;
-    --px-table-cell-shadow: none;
-}
-.px-table--success {
-    --px-table-border-color: var(--px-color-success);
-    --px-table-shadow-color: var(--px-color-success-dark);
-    --px-table-header-bg-color: var(--px-color-success-light-9);
-    --px-table-divider-color: var(--px-color-success-light-5);
-    --px-table-header-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.4);
-    --px-table-header-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
-}
-.px-table--success.is-outline {
-    --px-table-bg-color: transparent;
-    --px-table-border-color: var(--px-color-success);
-    --px-table-header-highlight: none;
-    --px-table-header-shadow: none;
-    --px-table-cell-highlight: none;
-    --px-table-cell-shadow: none;
-}
-.px-table--success.is-ghost {
-    --px-table-bg-color: transparent;
-    --px-table-border-color: transparent;
-    --px-table-shadow-color: transparent;
-    --px-table-header-highlight: none;
-    --px-table-header-shadow: none;
-    --px-table-cell-highlight: none;
-    --px-table-cell-shadow: none;
-}
-.px-table--info {
-    --px-table-border-color: var(--px-color-info);
-    --px-table-shadow-color: var(--px-color-info-dark);
-    --px-table-header-bg-color: var(--px-color-info-light-9);
-    --px-table-divider-color: var(--px-color-info-light-5);
-    --px-table-header-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.4);
-    --px-table-header-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
-}
-.px-table--info.is-outline {
-    --px-table-bg-color: transparent;
-    --px-table-border-color: var(--px-color-info);
-    --px-table-header-highlight: none;
-    --px-table-header-shadow: none;
-    --px-table-cell-highlight: none;
-    --px-table-cell-shadow: none;
-}
-.px-table--info.is-ghost {
-    --px-table-bg-color: transparent;
-    --px-table-border-color: transparent;
-    --px-table-shadow-color: transparent;
-    --px-table-header-highlight: none;
-    --px-table-header-shadow: none;
-    --px-table-cell-highlight: none;
-    --px-table-cell-shadow: none;
-}
-.px-table--warning {
-    --px-table-border-color: var(--px-color-warning);
-    --px-table-shadow-color: var(--px-color-warning-dark);
-    --px-table-header-bg-color: var(--px-color-warning-light-9);
-    --px-table-divider-color: var(--px-color-warning-light-5);
-    --px-table-header-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.4);
-    --px-table-header-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
-}
-.px-table--warning.is-outline {
-    --px-table-bg-color: transparent;
-    --px-table-border-color: var(--px-color-warning);
-    --px-table-header-highlight: none;
-    --px-table-header-shadow: none;
-    --px-table-cell-highlight: none;
-    --px-table-cell-shadow: none;
-}
-.px-table--warning.is-ghost {
-    --px-table-bg-color: transparent;
-    --px-table-border-color: transparent;
-    --px-table-shadow-color: transparent;
-    --px-table-header-highlight: none;
-    --px-table-header-shadow: none;
-    --px-table-cell-highlight: none;
-    --px-table-cell-shadow: none;
-}
-.px-table--danger {
-    --px-table-border-color: var(--px-color-danger);
-    --px-table-shadow-color: var(--px-color-danger-dark);
-    --px-table-header-bg-color: var(--px-color-danger-light-9);
-    --px-table-divider-color: var(--px-color-danger-light-5);
-    --px-table-header-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.4);
-    --px-table-header-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
-}
-.px-table--danger.is-outline {
-    --px-table-bg-color: transparent;
-    --px-table-border-color: var(--px-color-danger);
-    --px-table-header-highlight: none;
-    --px-table-header-shadow: none;
-    --px-table-cell-highlight: none;
-    --px-table-cell-shadow: none;
-}
-.px-table--danger.is-ghost {
-    --px-table-bg-color: transparent;
-    --px-table-border-color: transparent;
-    --px-table-shadow-color: transparent;
-    --px-table-header-highlight: none;
-    --px-table-header-shadow: none;
-    --px-table-cell-highlight: none;
-    --px-table-cell-shadow: none;
-}
-/* ─── Outline Variant — pixel-cornered wireframe, transparent fill ─── */
-.px-table.is-outline {
-  filter: none;
-}
-.px-table.is-outline::before {
-    background:
-      /* Top edge */
-      linear-gradient(var(--px-table-border-color), var(--px-table-border-color)) 0 0 / 100% 2px no-repeat,
-      /* Bottom edge */
-      linear-gradient(var(--px-table-border-color), var(--px-table-border-color)) 0 100% / 100% 2px no-repeat,
-      /* Left edge */
-      linear-gradient(var(--px-table-border-color), var(--px-table-border-color)) 0 0 / 2px 100% no-repeat,
-      /* Right edge */
-      linear-gradient(var(--px-table-border-color), var(--px-table-border-color)) 100% 0 / 2px 100% no-repeat;
-    /* clip-path inherited from base → pixel staircase corners preserved */
-}
-.px-table.is-outline::after {
-    background: transparent;
-    box-shadow: none;
-}
-/* ─── Shared Reduced Bevel for Outline ─── */
-.px-table.is-outline .px-table__inner th {
-    box-shadow:
-      var(--px-table-reduced-highlight),
-      var(--px-table-reduced-shadow);
-}
-.px-table.is-outline .px-table__inner tfoot th,
-  .px-table.is-outline .px-table__inner tfoot td {
-    box-shadow:
-      var(--px-table-reduced-footer-highlight),
-      var(--px-table-reduced-footer-shadow);
-}
-/* ─── Ghost Variant — no border, no shadow, content-only ─── */
-.px-table.is-ghost {
-  filter: none;
-}
-.px-table.is-ghost::before, .px-table.is-ghost::after { display: none;
-}
-/* ─── Hoverable — pixel-style diagonal lift/press on container ─── */
-.px-table.is-hoverable {
-  cursor: pointer;
-}
-.px-table.is-hoverable:hover {
-    transform: translate(-2px, -2px);
-    filter: drop-shadow(5px 5px 0px var(--px-table-shadow-color));
-}
-.px-table.is-hoverable:active {
-    transform: translate(1px, 1px);
-    filter: drop-shadow(1px 1px 0px var(--px-table-shadow-color));
-}
-/* ─── Dark Mode ─── */
-.px-dark .px-table,
-.dark .px-table {
-  /* Invert bevel: reduce highlight, increase shadow for dark backgrounds */
-  --px-table-header-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.10);
-  --px-table-header-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.25);
-  --px-table-footer-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.06);
-  --px-table-footer-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.18);
-  --px-table-cell-highlight: inset 1px 1px 0 0 rgba(255, 255, 255, 0.05);
-  --px-table-cell-shadow: inset -1px -1px 0 0 rgba(0, 0, 0, 0.10);
-
-  /* Light-on-dark textures */
-  --px-table-hover-overlay: rgba(255, 255, 255, 0.04);
-  --px-table-body-dot-color: rgba(255, 255, 255, 0.03);
-
-  /* Reduced bevel (outline) — adjusted for dark backgrounds */
-  --px-table-reduced-highlight: inset 1px 1px 0 0 rgba(255, 255, 255, 0.08);
-  --px-table-reduced-shadow: inset -1px -1px 0 0 rgba(0, 0, 0, 0.12);
-  --px-table-reduced-footer-highlight: inset 1px 1px 0 0 rgba(255, 255, 255, 0.05);
-  --px-table-reduced-footer-shadow: inset -1px -1px 0 0 rgba(0, 0, 0, 0.10);
-}
-/* Dark mode scrollbar */
-.px-dark .px-table .px-table__inner,
-.dark .px-table .px-table__inner {
-  scrollbar-color: var(--px-border-color-lighter) var(--px-fill-color-dark);
-}
-.px-dark .px-table .px-table__inner::-webkit-scrollbar-track, .dark .px-table .px-table__inner::-webkit-scrollbar-track {
-    background:
-      repeating-linear-gradient(
-        to right,
-        rgba(255, 255, 255, 0.03) 0,
-        rgba(255, 255, 255, 0.03) 2px,
-        transparent 2px,
-        transparent 4px
-      ),
-      var(--px-fill-color-dark);
-    box-shadow: inset 1px 1px 0 0 rgba(0, 0, 0, 0.15), inset -1px -1px 0 0 rgba(255, 255, 255, 0.05);
-}
-.px-dark .px-table .px-table__inner::-webkit-scrollbar-thumb, .dark .px-table .px-table__inner::-webkit-scrollbar-thumb {
-    background: var(--px-border-color-lighter);
-    box-shadow:
-      inset 1px 1px 0 0 rgba(255, 255, 255, 0.12),
-      inset -1px -1px 0 0 rgba(0, 0, 0, 0.25);
-}
-.px-dark .px-table .px-table__inner::-webkit-scrollbar-corner, .dark .px-table .px-table__inner::-webkit-scrollbar-corner {
-    background: var(--px-fill-color-dark);
-}
-/* Dark mode color type bevel overrides */
-.px-dark .px-table--primary,
-  .dark .px-table--primary {
-    --px-table-header-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.12);
-    --px-table-header-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.20);
-}
-.px-dark .px-table--success,
-  .dark .px-table--success {
-    --px-table-header-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.12);
-    --px-table-header-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.20);
-}
-.px-dark .px-table--info,
-  .dark .px-table--info {
-    --px-table-header-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.12);
-    --px-table-header-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.20);
-}
-.px-dark .px-table--warning,
-  .dark .px-table--warning {
-    --px-table-header-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.12);
-    --px-table-header-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.20);
-}
-.px-dark .px-table--danger,
-  .dark .px-table--danger {
-    --px-table-header-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.12);
-    --px-table-header-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.20);
-}
+.px-table{--px-table-padding-y:10px;--px-table-padding-x:14px;--px-table-border-color:var(--px-border-color);--px-table-bg-color:var(--px-bg-color-overlay);--px-table-header-bg-color:var(--px-bg-color);--px-table-row-hover-color:var(--px-fill-color-light);--px-table-zebra-color:var(--px-fill-color);--px-table-font-size:var(--px-font-size-base);--px-table-shadow-color:var(--px-shadow-color);--px-table-divider-color:var(--px-border-color-light);--px-table-header-highlight:inset 2px 2px 0 0 #ffffff59;--px-table-header-shadow:inset -2px -2px 0 0 #00000014;--px-table-footer-highlight:inset 2px 2px 0 0 #fff3;--px-table-footer-shadow:inset -2px -2px 0 0 #0000000d;--px-table-hover-overlay:#0000000a;--px-table-body-dot-color:#00000008;--px-table-cell-highlight:inset 1px 1px 0 0 #ffffff1f;--px-table-cell-shadow:inset -1px -1px 0 0 #00000008;--px-table-reduced-highlight:inset 1px 1px 0 0 #ffffff26;--px-table-reduced-shadow:inset -1px -1px 0 0 #0000000a;--px-table-reduced-footer-highlight:inset 1px 1px 0 0 #ffffff1a;--px-table-reduced-footer-shadow:inset -1px -1px 0 0 #00000008;width:100%;font-family:var(--px-font-family);font-size:var(--px-table-font-size);color:var(--px-text-color-primary);box-sizing:border-box;filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-table-shadow-color));background:0 0;border:none;flex-direction:column;transition:none;display:flex;position:relative;overflow:hidden}.px-table:before{content:"";background:var(--px-table-border-color);clip-path:polygon(0 4px,2px 4px,2px 2px,4px 2px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 2px) calc(100% - 4px),calc(100% - 2px) calc(100% - 2px),calc(100% - 4px) calc(100% - 2px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 4px),0 calc(100% - 4px));z-index:0;position:absolute;inset:0}.px-table:after{content:"";background:var(--px-table-bg-color);clip-path:polygon(0 4px,2px 4px,2px 2px,4px 2px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 2px) calc(100% - 4px),calc(100% - 2px) calc(100% - 2px),calc(100% - 4px) calc(100% - 2px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 4px),0 calc(100% - 4px));z-index:0;position:absolute;inset:2px}.px-table__inner{z-index:1;flex:auto;min-width:0;min-height:0;position:relative;overflow:auto}.px-table__inner table{table-layout:fixed;border-collapse:collapse;border-spacing:0;width:100%;margin:0;display:table;overflow-x:visible}.px-table__inner th,.px-table__inner td{padding:var(--px-table-padding-y) var(--px-table-padding-x);text-align:left;vertical-align:middle;border-bottom:none;position:relative}.px-table__inner th{color:var(--px-text-color-primary);background:repeating-linear-gradient(to right, var(--px-table-body-dot-color) 0, var(--px-table-body-dot-color) 2px, transparent 2px, transparent 4px), var(--px-table-header-bg-color);box-shadow:var(--px-table-header-highlight), var(--px-table-header-shadow);font-weight:600}.px-table__inner thead th:after{content:"";height:calc(var(--px-border-width) * 2);background-image:repeating-linear-gradient(to right, var(--px-table-border-color) 0px, var(--px-table-border-color) 6px, transparent 6px, transparent 12px);pointer-events:none;position:absolute;bottom:0;left:0;right:0}.px-table__inner tbody td{background-image:repeating-linear-gradient(to right, var(--px-table-body-dot-color) 0, var(--px-table-body-dot-color) 2px, transparent 2px, transparent 4px);box-shadow:var(--px-table-cell-highlight), var(--px-table-cell-shadow)}.px-table__inner tbody td:after{content:"";height:var(--px-border-width);background-image:repeating-linear-gradient(to right, var(--px-table-divider-color) 0px, var(--px-table-divider-color) 6px, transparent 6px, transparent 12px);pointer-events:none;position:absolute;bottom:0;left:0;right:0}.px-table__inner tbody tr:last-child td:after{display:none}.px-table__inner tfoot th,.px-table__inner tfoot td{background:repeating-linear-gradient(to right, var(--px-table-body-dot-color) 0, var(--px-table-body-dot-color) 2px, transparent 2px, transparent 4px), var(--px-table-header-bg-color);box-shadow:var(--px-table-footer-highlight), var(--px-table-footer-shadow);font-weight:600}.px-table__inner tfoot tr:first-child th:before,.px-table__inner tfoot tr:first-child td:before{content:"";height:calc(var(--px-border-width) * 2);background-image:repeating-linear-gradient(to right, var(--px-table-border-color) 0px, var(--px-table-border-color) 6px, transparent 6px, transparent 12px);pointer-events:none;position:absolute;top:0;left:0;right:0}.px-table__inner table caption{padding:var(--px-table-padding-y) var(--px-table-padding-x);text-align:center;caption-side:top;font-weight:600;position:relative}.px-table__inner table caption:after{content:"";height:calc(var(--px-border-width) * 2);background-image:repeating-linear-gradient(to right, var(--px-table-border-color) 0px, var(--px-table-border-color) 6px, transparent 6px, transparent 12px);pointer-events:none;position:absolute;bottom:0;left:0;right:0}.px-table__inner{scrollbar-width:thin;scrollbar-color:var(--px-table-border-color) var(--px-fill-color-lighter)}.px-table__inner::-webkit-scrollbar{width:8px;height:8px}.px-table__inner::-webkit-scrollbar-track{background:repeating-linear-gradient(to right, #00000008 0, #00000008 2px, transparent 2px, transparent 4px), var(--px-fill-color-lighter);box-shadow:inset 1px 1px #0000000f,inset -1px -1px #ffffff4d}.px-table__inner::-webkit-scrollbar-thumb{background:var(--px-table-border-color);box-shadow:inset 1px 1px #ffffff4d,inset -1px -1px #00000026}.px-table__inner::-webkit-scrollbar-corner{background:var(--px-fill-color-lighter)}.px-table--xs{--px-table-padding-y:4px;--px-table-padding-x:8px;--px-table-font-size:var(--px-font-size-extra-small)}.px-table--sm{--px-table-padding-y:6px;--px-table-padding-x:10px;--px-table-font-size:var(--px-font-size-small)}.px-table--md{--px-table-padding-y:10px;--px-table-padding-x:14px;--px-table-font-size:var(--px-font-size-base)}.px-table--lg{--px-table-padding-y:14px;--px-table-padding-x:18px;--px-table-font-size:var(--px-font-size-large)}.px-table--xl{--px-table-padding-y:18px;--px-table-padding-x:22px;--px-table-font-size:var(--px-font-size-extra-large)}.px-table.is-zebra tbody tr:nth-child(2n) td{background:linear-gradient(45deg, var(--px-table-hover-overlay) 25%, transparent 25%), linear-gradient(-45deg, var(--px-table-hover-overlay) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--px-table-hover-overlay) 75%), linear-gradient(-45deg, transparent 75%, var(--px-table-hover-overlay) 75%), var(--px-table-zebra-color);background-position:0 0,0 2px,2px -2px,-2px 0,0 0;background-size:4px 4px,4px 4px,4px 4px,4px 4px,auto}.px-table.is-hover tbody tr:hover td{background:repeating-linear-gradient(-45deg, transparent, transparent 4px, #ffffff2e 4px, #ffffff2e 8px), var(--px-table-row-hover-color)}.px-table.is-border th,.px-table.is-border td{background-image: repeating-linear-gradient(to right, var(--px-table-border-color) 0 6px, transparent 6px 12px),  repeating-linear-gradient(to bottom, var(--px-table-border-color) 0 6px, transparent 6px 12px);background-size:100% var(--px-border-width), var(--px-border-width) 100%;background-position:0 100%,100% 0;background-repeat:no-repeat;border:none}.px-table.is-border thead th{background: repeating-linear-gradient(to right, var(--px-table-border-color) 0 6px, transparent 6px 12px) 0 100% / 100% var(--px-border-width) no-repeat, repeating-linear-gradient(to bottom, var(--px-table-border-color) 0 6px, transparent 6px 12px) 100% 0 / var(--px-border-width) 100% no-repeat,  repeating-linear-gradient(to right, var(--px-table-body-dot-color) 0 2px, transparent 2px 4px),  var(--px-table-header-bg-color)}.px-table.is-border tfoot th,.px-table.is-border tfoot td{background:repeating-linear-gradient(to right, var(--px-table-border-color) 0 6px, transparent 6px 12px) 0 100% / 100% var(--px-border-width) no-repeat, repeating-linear-gradient(to bottom, var(--px-table-border-color) 0 6px, transparent 6px 12px) 100% 0 / var(--px-border-width) 100% no-repeat, repeating-linear-gradient(to right, var(--px-table-body-dot-color) 0 2px, transparent 2px 4px), var(--px-table-header-bg-color)}.px-table.is-border tbody td:after,.px-table.is-border thead th:after,.px-table.is-border tfoot tr:first-child th:before,.px-table.is-border tfoot tr:first-child td:before{display:none}.px-table.is-border.is-zebra tbody tr:nth-child(2n) td{background:repeating-linear-gradient(to right, var(--px-table-border-color) 0 6px, transparent 6px 12px) 0 100% / 100% var(--px-border-width) no-repeat, repeating-linear-gradient(to bottom, var(--px-table-border-color) 0 6px, transparent 6px 12px) 100% 0 / var(--px-border-width) 100% no-repeat, linear-gradient(45deg, var(--px-table-hover-overlay) 25%, transparent 25%) 0 0 / 4px 4px, linear-gradient(-45deg, var(--px-table-hover-overlay) 25%, transparent 25%) 0 2px / 4px 4px, linear-gradient(45deg, transparent 75%, var(--px-table-hover-overlay) 75%) 2px -2px / 4px 4px, linear-gradient(-45deg, transparent 75%, var(--px-table-hover-overlay) 75%) -2px 0 / 4px 4px, var(--px-table-zebra-color)}.px-table.is-border.is-hover tbody tr:hover td{background:repeating-linear-gradient(to right, var(--px-table-border-color) 0 6px, transparent 6px 12px) 0 100% / 100% var(--px-border-width) no-repeat, repeating-linear-gradient(to bottom, var(--px-table-border-color) 0 6px, transparent 6px 12px) 100% 0 / var(--px-border-width) 100% no-repeat, repeating-linear-gradient(-45deg, transparent, transparent 4px, #ffffff2e 4px, #ffffff2e 8px), var(--px-table-row-hover-color)}.px-table.is-pin-rows thead th{z-index:2;position:sticky;top:0}.px-table.is-pin-rows tfoot th,.px-table.is-pin-rows tfoot td{z-index:2;position:sticky;bottom:0}.px-table.is-pin-cols th:first-child,.px-table.is-pin-cols td:first-child{z-index:1;background:repeating-linear-gradient(to right, var(--px-table-body-dot-color) 0, var(--px-table-body-dot-color) 2px, transparent 2px, transparent 4px), var(--px-table-bg-color);position:sticky;left:0}.px-table.is-pin-cols thead th:first-child{background:repeating-linear-gradient(to right, var(--px-table-body-dot-color) 0, var(--px-table-body-dot-color) 2px, transparent 2px, transparent 4px), var(--px-table-header-bg-color)}.px-table.is-pin-rows.is-pin-cols thead th:first-child,.px-table.is-pin-rows.is-pin-cols tfoot th:first-child,.px-table.is-pin-rows.is-pin-cols tfoot td:first-child{z-index:3}.px-table.is-hide-header thead{display:none}.px-table--primary{--px-table-border-color:var(--px-color-primary);--px-table-shadow-color:var(--px-color-primary-dark);--px-table-header-bg-color:var(--px-color-primary-light-9);--px-table-divider-color:var(--px-color-primary-light-5);--px-table-header-highlight:inset 2px 2px 0 0 #fff6;--px-table-header-shadow:inset -2px -2px 0 0 #0000001a}.px-table--primary.is-outline{--px-table-bg-color:transparent;--px-table-border-color:var(--px-color-primary);--px-table-header-highlight:none;--px-table-header-shadow:none;--px-table-cell-highlight:none;--px-table-cell-shadow:none}.px-table--primary.is-ghost{--px-table-bg-color:transparent;--px-table-border-color:transparent;--px-table-shadow-color:transparent;--px-table-header-highlight:none;--px-table-header-shadow:none;--px-table-cell-highlight:none;--px-table-cell-shadow:none}.px-table--success{--px-table-border-color:var(--px-color-success);--px-table-shadow-color:var(--px-color-success-dark);--px-table-header-bg-color:var(--px-color-success-light-9);--px-table-divider-color:var(--px-color-success-light-5);--px-table-header-highlight:inset 2px 2px 0 0 #fff6;--px-table-header-shadow:inset -2px -2px 0 0 #0000001a}.px-table--success.is-outline{--px-table-bg-color:transparent;--px-table-border-color:var(--px-color-success);--px-table-header-highlight:none;--px-table-header-shadow:none;--px-table-cell-highlight:none;--px-table-cell-shadow:none}.px-table--success.is-ghost{--px-table-bg-color:transparent;--px-table-border-color:transparent;--px-table-shadow-color:transparent;--px-table-header-highlight:none;--px-table-header-shadow:none;--px-table-cell-highlight:none;--px-table-cell-shadow:none}.px-table--info{--px-table-border-color:var(--px-color-info);--px-table-shadow-color:var(--px-color-info-dark);--px-table-header-bg-color:var(--px-color-info-light-9);--px-table-divider-color:var(--px-color-info-light-5);--px-table-header-highlight:inset 2px 2px 0 0 #fff6;--px-table-header-shadow:inset -2px -2px 0 0 #0000001a}.px-table--info.is-outline{--px-table-bg-color:transparent;--px-table-border-color:var(--px-color-info);--px-table-header-highlight:none;--px-table-header-shadow:none;--px-table-cell-highlight:none;--px-table-cell-shadow:none}.px-table--info.is-ghost{--px-table-bg-color:transparent;--px-table-border-color:transparent;--px-table-shadow-color:transparent;--px-table-header-highlight:none;--px-table-header-shadow:none;--px-table-cell-highlight:none;--px-table-cell-shadow:none}.px-table--warning{--px-table-border-color:var(--px-color-warning);--px-table-shadow-color:var(--px-color-warning-dark);--px-table-header-bg-color:var(--px-color-warning-light-9);--px-table-divider-color:var(--px-color-warning-light-5);--px-table-header-highlight:inset 2px 2px 0 0 #fff6;--px-table-header-shadow:inset -2px -2px 0 0 #0000001a}.px-table--warning.is-outline{--px-table-bg-color:transparent;--px-table-border-color:var(--px-color-warning);--px-table-header-highlight:none;--px-table-header-shadow:none;--px-table-cell-highlight:none;--px-table-cell-shadow:none}.px-table--warning.is-ghost{--px-table-bg-color:transparent;--px-table-border-color:transparent;--px-table-shadow-color:transparent;--px-table-header-highlight:none;--px-table-header-shadow:none;--px-table-cell-highlight:none;--px-table-cell-shadow:none}.px-table--danger{--px-table-border-color:var(--px-color-danger);--px-table-shadow-color:var(--px-color-danger-dark);--px-table-header-bg-color:var(--px-color-danger-light-9);--px-table-divider-color:var(--px-color-danger-light-5);--px-table-header-highlight:inset 2px 2px 0 0 #fff6;--px-table-header-shadow:inset -2px -2px 0 0 #0000001a}.px-table--danger.is-outline{--px-table-bg-color:transparent;--px-table-border-color:var(--px-color-danger);--px-table-header-highlight:none;--px-table-header-shadow:none;--px-table-cell-highlight:none;--px-table-cell-shadow:none}.px-table--danger.is-ghost{--px-table-bg-color:transparent;--px-table-border-color:transparent;--px-table-shadow-color:transparent;--px-table-header-highlight:none;--px-table-header-shadow:none;--px-table-cell-highlight:none;--px-table-cell-shadow:none}.px-table.is-outline{filter:none}.px-table.is-outline:before{background: linear-gradient(var(--px-table-border-color), var(--px-table-border-color)) 0 0 / 100% 2px no-repeat,  linear-gradient(var(--px-table-border-color), var(--px-table-border-color)) 0 100% / 100% 2px no-repeat,  linear-gradient(var(--px-table-border-color), var(--px-table-border-color)) 0 0 / 2px 100% no-repeat,  linear-gradient(var(--px-table-border-color), var(--px-table-border-color)) 100% 0 / 2px 100% no-repeat}.px-table.is-outline:after{box-shadow:none;background:0 0}.px-table.is-outline .px-table__inner th{box-shadow:var(--px-table-reduced-highlight), var(--px-table-reduced-shadow)}.px-table.is-outline .px-table__inner tfoot th,.px-table.is-outline .px-table__inner tfoot td{box-shadow:var(--px-table-reduced-footer-highlight), var(--px-table-reduced-footer-shadow)}.px-table.is-ghost{filter:none}.px-table.is-ghost:before,.px-table.is-ghost:after{display:none}.px-table.is-hoverable{cursor:pointer}.px-table.is-hoverable:hover{filter:drop-shadow(5px 5px 0px var(--px-table-shadow-color));transform:translate(-2px,-2px)}.px-table.is-hoverable:active{filter:drop-shadow(1px 1px 0px var(--px-table-shadow-color));transform:translate(1px,1px)}.px-dark .px-table,.dark .px-table{--px-table-header-highlight:inset 2px 2px 0 0 #ffffff1a;--px-table-header-shadow:inset -2px -2px 0 0 #00000040;--px-table-footer-highlight:inset 2px 2px 0 0 #ffffff0f;--px-table-footer-shadow:inset -2px -2px 0 0 #0000002e;--px-table-cell-highlight:inset 1px 1px 0 0 #ffffff0d;--px-table-cell-shadow:inset -1px -1px 0 0 #0000001a;--px-table-hover-overlay:#ffffff0a;--px-table-body-dot-color:#ffffff08;--px-table-reduced-highlight:inset 1px 1px 0 0 #ffffff14;--px-table-reduced-shadow:inset -1px -1px 0 0 #0000001f;--px-table-reduced-footer-highlight:inset 1px 1px 0 0 #ffffff0d;--px-table-reduced-footer-shadow:inset -1px -1px 0 0 #0000001a}.px-dark .px-table .px-table__inner,.dark .px-table .px-table__inner{scrollbar-color:var(--px-border-color-lighter) var(--px-fill-color-dark)}.px-dark .px-table .px-table__inner::-webkit-scrollbar-track{background:repeating-linear-gradient(to right, #ffffff08 0, #ffffff08 2px, transparent 2px, transparent 4px), var(--px-fill-color-dark);box-shadow:inset 1px 1px #00000026,inset -1px -1px #ffffff0d}.dark .px-table .px-table__inner::-webkit-scrollbar-track{background:repeating-linear-gradient(to right, #ffffff08 0, #ffffff08 2px, transparent 2px, transparent 4px), var(--px-fill-color-dark);box-shadow:inset 1px 1px #00000026,inset -1px -1px #ffffff0d}.px-dark .px-table .px-table__inner::-webkit-scrollbar-thumb{background:var(--px-border-color-lighter);box-shadow:inset 1px 1px #ffffff1f,inset -1px -1px #00000040}.dark .px-table .px-table__inner::-webkit-scrollbar-thumb{background:var(--px-border-color-lighter);box-shadow:inset 1px 1px #ffffff1f,inset -1px -1px #00000040}.px-dark .px-table .px-table__inner::-webkit-scrollbar-corner{background:var(--px-fill-color-dark)}.dark .px-table .px-table__inner::-webkit-scrollbar-corner{background:var(--px-fill-color-dark)}.px-dark .px-table--primary,.dark .px-table--primary,.px-dark .px-table--success,.dark .px-table--success,.px-dark .px-table--info,.dark .px-table--info,.px-dark .px-table--warning,.dark .px-table--warning,.px-dark .px-table--danger,.dark .px-table--danger{--px-table-header-highlight:inset 2px 2px 0 0 #ffffff1f;--px-table-header-shadow:inset -2px -2px 0 0 #0003}