:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }.nano-data-table {
  /**
   * @prop --table-padding. The padding of the table cells. Defaults to `var(--table-compact-padding)`
   * @prop --table-border-color. The border color of the table cells. Defaults to `var(--nano-color-neutral-200)`
   * @prop --table-border-color-header. The border color of the table header and footer cells. Defaults to `var(--nano-color-primary-1000)`
   * @prop --table-background. The background color of the table cells. Defaults to `var(--nano-color-base-0)`
   * @prop --table-max-col-width. The maximum width of the table columns. Defaults to `clamp(200px, 500px, 50vw)`
   * @prop --table-ordered-bg. The background color of the ordered table rows. Defaults to `var(--nano-color-neutral-100)`
   * @prop --table-wrapper-max-height: maximum height of the table when table is scrollable. Defaults to 80vh;
   * @prop --table-wrapper-max-width: maximum width of the table when table is scrollable. Defaults to 100%;
   */
  --table-padding: var(--nano-spacing-sm) calc(var(--nano-spacing-md) - (var(--nano-spacing-md) / 3));
  --table-border-color: var(--nano-color-neutral-200);
  --table-border-color-header: var(--nano-color-primary-1000);
  --table-background: var(--nano-color-base-0);
  --table-max-col-width: clamp(200px, 500px, 50vw);
  --table-ordered-bg: var(--nano-color-neutral-100);
  --table-wrapper-max-height: 80vh;
  --table-wrapper-max-width: 100%;
  display: block;
  inline-size: 100%;
  color: var(--nano-color-neutral-1400);
  container-type: inline-size;
  --isLtR: 1;
}
.nano-data-table:dir(rtl) {
  --isLtR: -1;
}
.nano-data-table .nano-sortable__dragged {
  background: var(--nano-color-base-0);
  opacity: 0.9;
  box-shadow: var(--nano-shadow-l0);
  z-index: 10 !important;
}

.nano-tbl__wrap {
  display: table;
  min-inline-size: 100%;
}
.nano-data-table:not([scrollable=false]) .nano-tbl__wrap {
  max-inline-size: var(--table-wrapper-max-width);
  max-block-size: var(--table-wrapper-max-height);
  position: relative;
  display: block;
}
.nano-data-table:not([scrollable=false]) .nano-tbl__wrap table {
  margin-block-end: var(--nano-spacing-l);
}

.nano-data-table:not([scrollable=false]) .nano-masked-overflow {
  --fade-size: 30px;
}
.nano-data-table:not([scrollable=false]):has(.nano-tbl__pin--start, .nano-tbl__pin--end) .nano-masked-overflow {
  --fade-size: 0;
}

.nano-tbl {
  text-align: start;
  inline-size: 100%;
  border-spacing: 0 0;
  border-collapse: separate;
  border-inline-end: 1px solid transparent;
  border-block-start: 1px solid transparent;
  position: relative;
  z-index: 1;
}
.nano-tbl__top-anchor {
  clip-path: inset(50%);
  block-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  inline-size: 1px;
  position: relative;
}
.nano-tbl__ordered {
  background-color: var(--table-ordered-bg);
  --table-border-color: var(--nano-color-neutral-300);
}
.nano-tbl__order-btn {
  padding: 0;
  border: none;
  outline: none;
  font: inherit;
  background: none;
  appearance: none;
  color: inherit;
  display: flex;
  gap: var(--nano-spacing-sm);
  align-items: center;
  inline-size: 100%;
}
.nano-tbl__order-btn:focus-visible {
  outline: var(--nano-focus-ring);
  outline-offset: var(--nano-focus-ring-offset);
}
.nano-tbl__status-icons {
  margin-inline: auto 10px;
  display: flex;
  gap: 10px;
}
.nano-tbl__progress-bar {
  --height: 0.2125rem;
  position: sticky;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 10;
  transition: transform 0.25s;
  transform: scale(0);
  inline-size: 100%;
}
.nano-tbl__progress-bar--show {
  transform: scale(1);
}
.nano-tbl__caption--hide {
  clip-path: inset(50%);
  block-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  inline-size: 1px;
}
.nano-tbl__td, .nano-tbl__th {
  max-inline-size: var(--table-max-col-width);
}
thead .nano-tbl__td .nano-sortable__keyboard-handle, thead .nano-tbl__th .nano-sortable__keyboard-handle {
  position: absolute;
  inset-inline-end: 5px;
  inset-block-start: 50%;
  transform: translateY(-50%);
  background: white;
  z-index: 10;
}
.nano-tbl__td.nano-tbl__ordered, .nano-tbl__th.nano-tbl__ordered {
  background-color: var(--table-ordered-bg) !important;
  --table-border-color: var(--nano-color-neutral-300);
}
.nano-tbl__cell-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nano-tbl__cell-content--no-result {
  padding-block: var(--nano-spacing-md);
}
.nano-tbl__cell-content--wrap {
  white-space: normal;
  overflow: visible;
}
.nano-tbl tbody {
  opacity: 1;
  transition: 0.1s ease opacity;
}
.nano-tbl tbody.nano-tbl__loading {
  z-index: -1;
  position: relative;
}
.nano-tbl tbody.nano-tbl__inactive {
  opacity: 0;
}
.nano-tbl tbody .nano-tbl__tr:has(~ .nano-tbl__tr--placeholder) {
  display: none;
}
.nano-tbl tbody .nano-tbl__tr--placeholder ~ .nano-tbl__tr {
  display: none;
}
.nano-tbl th[scope=row] {
  margin: 0;
}
.nano-tbl__tr {
  --base-z: 0;
}
.nano-tbl__pin {
  z-index: var(--z, var(--base-z, 0));
}
.nano-tbl__pin .nano-tbl__th, .nano-tbl__pin .nano-tbl__td {
  z-index: var(--z, var(--base-z, 0));
}
.nano-tbl__pin--start {
  position: sticky;
  inset-inline-start: var(--pin-start, -1px);
}
.nano-tbl__pin--start::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: calc(4px * var(--isLtR)) 0 4px -3px rgb(var(--nano-color-base-rgb-1000)/25%);
  opacity: var(--pin-start-active, 0);
  z-index: -1;
}
.nano-tbl__pinned--start .nano-tbl__pin--start {
  --z: calc(var(--base-z) + 3) !important;
}
.nano-tbl__pin--end {
  position: sticky;
  inset-inline-end: var(--pin-end, -1px);
  max-inline-size: min(50vw, 200px);
}
@container (width <= 500px) {
  .nano-tbl__pin--start ~ .nano-tbl__pin--end {
    --z: 0 !important;
    inset-inline-end: auto !important;
  }
  .nano-tbl__pin--start ~ .nano-tbl__pin--end::after {
    display: none !important;
  }
}
@media (width <= 500px) {
  .nano-tbl__pin--start ~ .nano-tbl__pin--end {
    --z: 0 !important;
    inset-inline-end: auto !important;
  }
  .nano-tbl__pin--start ~ .nano-tbl__pin--end::after {
    display: none !important;
  }
}
.nano-tbl__pin--end::after {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: calc(-4px * var(--isLtR)) 0 4px -3px rgb(var(--nano-color-base-rgb-1000)/25%);
  opacity: var(--pin-end-active, 0);
  z-index: -1;
}
.nano-tbl__pinned--end .nano-tbl__pin--end {
  --z: calc(var(--base-z) + 2);
}
.nano-tbl__pin--top .nano-tbl__th, .nano-tbl__pin--top .nano-tbl__td {
  position: sticky;
  inset-block-start: var(--pin-top, -1px);
}
.nano-tbl__pin--top .nano-tbl__pin--end, .nano-tbl__pin--top .nano-tbl__pin--start {
  --z: calc(var(--base-z) + 1);
}
.nano-tbl__pin--top.nano-tbl__pinned--top {
  --base-z: 4;
}
tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__th, tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__td {
  border-block-end: 1px solid var(--table-border-color-header);
}
.nano-tbl__pin--bottom .nano-tbl__th, .nano-tbl__pin--bottom .nano-tbl__td {
  position: sticky;
  inset-block-end: var(--pin-bottom, -1px);
}
.nano-tbl__pin--bottom .nano-tbl__pin--end, .nano-tbl__pin--bottom .nano-tbl__pin--start {
  --z: calc(var(--base-z) + 1);
}
.nano-tbl__pin--bottom.nano-tbl__pinned--bottom {
  --base-z: 5;
}
.nano-tbl__pin--bottom.nano-tbl__pinned--bottom:has(.nano-tbl__pin--bottom.nano-tbl__pinned--bottom) .nano-tbl__pin {
  --base-z: 6;
}
tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__th, tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__td {
  border-block-start: 1px solid var(--table-border-color-header);
}
.nano-tbl thead tr:last-of-type td,
.nano-tbl thead tr:last-of-type th {
  border-block-end: 2px solid var(--table-border-color-header);
}
.nano-tbl tfoot tr:first-of-type td,
.nano-tbl tfoot tr:first-of-type th {
  border-block-start: none;
}
.nano-tbl tfoot tr:last-of-type td,
.nano-tbl tfoot tr:last-of-type th {
  border-block-end: 2px solid var(--table-border-color-header);
  border-block-start: 2px solid var(--table-border-color-header);
}
.nano-tbl .unlimited-width {
  max-inline-size: none;
}
.nano-tbl__spinner {
  font-size: 1.5rem;
  transition: scale 0.25s;
  scale: 0;
  padding: 0.5rem;
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: calc(50% - 0.75rem);
  z-index: 0;
}
.nano-tbl__spinner--show {
  scale: 1;
  position: sticky;
}