.dtable {
  @apply -relative -bg-canvas;
}
.dtable.no-animation * {
  @apply !-transition-none;
}
.dtable-block {
  @apply -absolute -w-full -overflow-hidden;
}
.dtable-header {
  @apply -rounded-t-[inherit] -bg-[--dtable-header-bg];
}
.dtable-body {
  @apply -overflow-hidden;
}
.dtable-cells {
  @apply -z-0 -absolute -h-full -bg-[--dtable-bg];
}
.dtable-cells-container {
  @apply -absolute -w-full -h-full;
}
.dtable-header .dtable-cells {
  @apply -bg-[--dtable-header-bg];
}
.dtable-cells.dtable-fixed-left,
.dtable-cells.dtable-fixed-right {
  @apply -z-10;
}
.dtable-cell {
  @apply -absolute -transition;
  transition-property: color, background-color, border-color, transform;
}
.dtable-cell::before,
.dtable-cell::after {
  content: '';
  @apply -absolute -z-[2] -opacity-0 -pointer-events-none -left-0 --top-px -right-0 -bottom-0;
}
.dtable-cell::before {
  @apply -border-b -opacity-100 -border-[--dtable-border-color];
}

.dtable-header-cell {
  @apply -font-bold -flex -items-center;
}
.dtable-header-cell::before,
.dtable-header-cell::after {
  @apply -top-0;
}

.dtable-cell-content {
  @apply -relative -z-[5] -h-full -w-full -px-3 -whitespace-nowrap -flex -items-center -gap-1 -overflow-hidden;
}

.dtable-body .dtable-cell.is-last-row::before {
  @apply -border-b-0;
}

.dtable-footer {
  @apply -absolute -z-10 -w-full -flex -items-center -rounded-b-[inherit] -px-3 -border-t -border-[--dtable-border-color] -bg-[--dtable-footer-bg];
}

.dtable-empty-tip {
  @apply -flex -items-center -justify-center -h-full;
}
