.sx-col.sx-busy #sx-rows, .sx-col.sx-busy .sx-rh, .sx-col.sx-skel-on .sx-rh { opacity: .5; pointer-events: none; transition: opacity 100ms var(--sx-ease); }
.sx-col.sx-skel-on #sx-rows { pointer-events: none; }

.sx-col::before { content: ""; display: block; position: sticky; top: 0; z-index: 6; height: 2px; margin-bottom: -2px; background: var(--brand); transform-origin: 0 50%; transform: scaleX(0); opacity: 0; pointer-events: none; }
.sx-col.sx-loading::before { animation: sx-prog 8s cubic-bezier(.08,.6,.2,1) 80ms both; }
.sx-col.sx-loaded::before { animation: sx-prog-done 260ms var(--sx-ease) both; }
@keyframes sx-prog { 0% { opacity: 0; transform: scaleX(0); } 1% { opacity: 1; } 12% { transform: scaleX(.35); } 100% { opacity: 1; transform: scaleX(.92); } }
@keyframes sx-prog-done { 0% { opacity: 1; transform: scaleX(.7); } 55% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }

.sx-skrow .sx-row { cursor: default; }
.sx-skrow .sx-th { box-shadow: none; }
.sx-skrow .sx-tx { display: grid; gap: 9px; align-content: center; }
.sx-skrow .sx-th, .sx-skrow .sx-tx i { display: block; border-radius: 6px; background: linear-gradient(90deg, #f0f2f4 0, #f7f8fa 40%, #f0f2f4 80%); background-size: 300% 100%; animation: sx-shimmer 1.4s linear infinite; }
.sx-skrow .sx-th { border-radius: 10px; }

.sx-col.sx-entering #sx-rows > .sx-ri { animation: sx-row-in 140ms var(--sx-ease) both; }
.sx-col.sx-entering #sx-rows > .sx-ri:nth-child(2) { animation-delay: 12ms; }
.sx-col.sx-entering #sx-rows > .sx-ri:nth-child(3) { animation-delay: 24ms; }
.sx-col.sx-entering #sx-rows > .sx-ri:nth-child(4) { animation-delay: 36ms; }
.sx-col.sx-entering #sx-rows > .sx-ri:nth-child(5) { animation-delay: 48ms; }
.sx-col.sx-entering #sx-rows > .sx-ri:nth-child(n+6) { animation-delay: 60ms; }
@keyframes sx-row-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.sx-rh-n { font-variant-numeric: tabular-nums; }

.sx-pending { position: relative; cursor: progress; }
.sx-pending .sx-spun { opacity: 0; }
.sx-spin { display: inline-block; flex: none; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; opacity: .8; animation: sx-spin 600ms linear infinite; }
.sx-spin-at { position: absolute; left: auto; right: 12px; top: calc(50% - 6px); }
.sx-mbtn.sx-pending { gap: 8px; cursor: progress; }
.sx-mbtn .sx-spin { width: 13px; height: 13px; border-width: 1.75px; border-color: rgba(255,255,255,.9); border-right-color: transparent; }
.sx .sx-mbtn.sx-leaving { opacity: 0; transform: translateY(-4px); transition: opacity 140ms var(--sx-ease), transform 140ms var(--sx-ease); }
@keyframes sx-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .sx-col::before, .sx-col.sx-loading::before, .sx-col.sx-loaded::before { animation: none !important; opacity: 0 !important; }
  .sx-col.sx-entering #sx-rows > .sx-ri { animation: none !important; }
  .sx-skrow .sx-th, .sx-skrow .sx-tx i { animation: none !important; }
  .sx-col.sx-busy #sx-rows, .sx-col.sx-busy .sx-rh { transition: none !important; }
  .sx .sx-spin, .sx-spin { animation: sx-spin 1.2s linear infinite !important; }
}