site/src/styles/ak-table.css
/**
 * Copyright 2025-present Ariakit FZ-LLC. All Rights Reserved.
 *
 * This software is proprietary. See the license.md file in the root of this
 * package for licensing terms.
 *
 * SPDX-License-Identifier: UNLICENSED
 */

@utility ak-table-sticky-top {
  @apply z-3 sticky top-0;
}

@utility ak-table-sticky-bottom {
  @apply z-3 sticky bottom-0;
}

/* ak-table */
@utility ak-table-container {
  @apply ak-frame-card/0 ak-layer-current;
  @apply overflow-clip;
  border-inline-start-width: var(--ak-table-border-s, 0px);
  border-inline-end-width: var(--ak-table-border-e, 0px);
  border-block-start-width: var(--ak-table-border-t, 0px);
  border-block-end-width: var(--ak-table-border-b, 0px);
}

@utility ak-table-scroller {
  @apply ak-dark:scheme-dark ak-light:scheme-light max-h-[inherit] overflow-auto;
}

@utility ak-table-px-* {
  --ak-table-px: --spacing(--value(number));
  --ak-table-px: --value(--spacing, [*]);
}

@utility ak-table-py-* {
  --ak-table-py: --spacing(--value(number));
  --ak-table-py: --value(--spacing, [*]);
}

@utility ak-table-p-* {
  --ak-table-padding: --spacing(--value(number));
  --ak-table-padding: --value(--spacing, [*]);
  --ak-table-px: var(--ak-table-padding);
  --ak-table-py: var(--ak-table-padding);
}

@utility ak-table {
  @apply ak-frame-field;
  @apply p-0! relative w-full border-separate border-spacing-0 overflow-x-hidden;

  :where(tbody) {
    @apply ak-table-rowgroup;
  }

  :where(thead) {
    @apply ak-table-head;
  }

  :where(tfoot) {
    @apply ak-table-foot;
  }

  :where(tr:not(:where(thead, tfoot) > *)) {
    @apply ak-table-row;
  }

  :where(tr:where(thead > *)) {
    @apply ak-table-head-row;
  }

  :where(tr:where(tfoot > *)) {
    @apply ak-table-foot-row;
  }

  :where(td, th) {
    @apply ak-table-cell;
  }

  :where(> th, tbody th, tfoot th) {
    @apply ak-table-row-header;
  }

  :where(thead th) {
    @apply ak-table-column-header;
  }
}

@utility ak-table-rowgroup {
  @apply ak-layer-current;
  @apply relative;

  &:is(thead):first-of-type,
  :not(:has(thead)) > &:first-child {
    --ak-table-rowgroup-first: 1;
  }

  &:is(tfoot):last-of-type,
  :not(:has(tfoot)) > &:last-child {
    --ak-table-rowgroup-last: 1;
  }
}

@utility ak-table-head {
  @apply ak-table-rowgroup ak-layer-pop-0.5;
  @apply whitespace-nowrap text-sm;
}

@utility ak-table-head-row {
  @apply ak-table-row_idle;
}

@utility ak-table-foot {
  @apply ak-table-rowgroup;
}

@utility ak-table-foot-row {
  @apply ak-table-row_idle;
}

@utility ak-table-row_idle {
  @apply ak-layer-current;

  &:first-of-type {
    --ak-table-row-first: var(--ak-table-rowgroup-first, 0);
  }

  &:last-of-type {
    --ak-table-row-last: var(--ak-table-rowgroup-last, 0);
  }
}

@utility ak-table-row_hover {
  @apply ak-layer-hover-0.5 z-2 *:z-2;
}

@utility ak-table-row {
  @apply ak-table-row_idle;
  @apply hover:ak-table-row_hover;
}

@utility ak-table-row-header {
  @apply ak-table-cell text-start font-semibold;
}

@utility ak-table-column-header {
  @apply ak-text/70 text-start font-semibold;
}

@utility ak-table-cell {
  @apply ak-layer-current z-1 relative;
  padding-inline: var(--ak-table-px, var(--ak-frame-padding, 0));
  padding-block: var(--ak-table-py, var(--ak-frame-padding, 0));

  &::after {
    @apply ak-layer-current -z-1 pointer-events-none absolute inset-0;
    content: "";
    border-block-start-width: calc(
      var(--ak-table-border-t, 0px) * (1 - var(--ak-table-row-first, 0))
    );
    border-block-end-width: calc(
      var(--ak-table-border-b, 0px) * (1 - var(--ak-table-row-last, 0))
    );
    inset-block-end: calc(
      var(--ak-table-border-b, 0px) * (1 - var(--ak-table-row-last, 0)) * -1
    );
  }

  &::before {
    @apply ak-layer-current -z-1 pointer-events-none absolute inset-0;
    content: "";
    inset-block: var(--ak-table-border-gap, 0);
  }

  &:not(:first-child)::before {
    border-inline-start-width: var(--ak-table-border-s, 0px);
    inset-inline-start: calc(var(--ak-table-border-s, 0px) * -1);
  }

  &:not(:last-child)::before {
    border-inline-end-width: var(--ak-table-border-e, 0px);
    inset-inline-end: calc(var(--ak-table-border-e, 0px) * -1);
  }
}

@utility ak-table-numeric {
  @apply text-end tabular-nums;
}

/* ak-table-border */
@utility ak-table-border {
  --ak-table-border-s: 1px;
  --ak-table-border-e: 1px;
  --ak-table-border-t: 1px;
  --ak-table-border-b: 1px;
}

@utility ak-table-border-s {
  --ak-table-border-s: 1px;
}

@utility ak-table-border-e {
  --ak-table-border-e: 1px;
}

@utility ak-table-border-t {
  --ak-table-border-t: 1px;
}

@utility ak-table-border-b {
  --ak-table-border-b: 1px;
}

@utility ak-table-border-* {
  --ak-table-border: calc(--value(number) * 1px);
  --ak-table-border: --value([*]);
  --ak-table-border-s: var(--ak-table-border);
  --ak-table-border-e: var(--ak-table-border);
  --ak-table-border-t: var(--ak-table-border);
  --ak-table-border-b: var(--ak-table-border);
}

@utility ak-table-border-s-* {
  --ak-table-border-s: calc(--value(number) * 1px);
  --ak-table-border-s: --value([*]);
}

@utility ak-table-border-e-* {
  --ak-table-border-e: calc(--value(number) * 1px);
  --ak-table-border-e: --value([*]);
}

@utility ak-table-border-t-* {
  --ak-table-border-t: calc(--value(number) * 1px);
  --ak-table-border-t: --value([*]);
}

@utility ak-table-border-b-* {
  --ak-table-border-b: calc(--value(number) * 1px);
  --ak-table-border-b: --value([*]);
}

@utility ak-table-border-x {
  --ak-table-border-s: 1px;
  --ak-table-border-e: 1px;
}

@utility ak-table-border-y {
  --ak-table-border-t: 1px;
  --ak-table-border-b: 1px;
}

@utility ak-table-border-x-* {
  --ak-table-border: calc(--value(number) * 1px);
  --ak-table-border: --value([*]);
  --ak-table-border-s: var(--ak-table-border);
  --ak-table-border-e: var(--ak-table-border);
}

@utility ak-table-border-y-* {
  --ak-table-border: calc(--value(number) * 1px);
  --ak-table-border: --value([*]);
  --ak-table-border-t: var(--ak-table-border);
  --ak-table-border-b: var(--ak-table-border);
}

@utility ak-table-border-gap-* {
  --ak-table-border-gap: --spacing(--value(number));
  --ak-table-border-gap: --value(--spacing, [*]);
}
