@layer components {

  [data-slot="table"] {
    font-size: var(--table-font-size);
    line-height: var(--table-line-height);
  }

  .ui-table-row {
    border-block-end-width: var(--table-row-border-width);
  }

  [data-slot="table-body"] .ui-table-row:last-child {
    border-block-end-width: 0;
  }

  .ui-table-row[data-tone="primary"] {
    --table-row-tone-color: var(
      --mark-primary,
      var(--text-primary, from hsl(var(--primary)) var(--text-primary-channels))
    );
  }

  .ui-table-row[data-tone="success"] {
    --table-row-tone-color: var(--mark-success, var(--text-success));
  }

  .ui-table-row[data-tone="warning"] {
    --table-row-tone-color: var(--mark-warning, var(--text-warning));
  }

  .ui-table-row[data-tone="info"] {
    --table-row-tone-color: var(--mark-info, var(--text-info));
  }

  .ui-table-row[data-tone="attention"] {
    --table-row-tone-color: var(--mark-attention, var(--attention));
  }

  .ui-table-row[data-tone="destructive"] {
    --table-row-tone-color: var(--mark-destructive, var(--text-error));
  }

  .ui-table-row[data-tone] {
    background-image: linear-gradient(
      hsl(var(--table-row-tone-color) / var(--table-row-tone-wash-alpha)),
      hsl(var(--table-row-tone-color) / var(--table-row-tone-wash-alpha))
    );
  }

  :where([data-slot="table"] > tbody > tr:nth-child(even of :not([data-expanded-row]))) {
    background-color: color-mix(
      in srgb,
      var(--table-row-striped-background, hsl(var(--muted) / 0.8)) var(--table-row-striped-alpha),
      transparent
    );
  }

  :where(
    [data-slot="table"]
      > tbody
      > tr:nth-child(even of :not([data-expanded-row]))
      + tr[data-expanded-row]
      > td
  ) {
    background-image: linear-gradient(
      color-mix(
        in srgb,
        var(--table-row-striped-background, hsl(var(--muted) / 0.8)) var(--table-row-striped-alpha),
        transparent
      ),
      color-mix(
        in srgb,
        var(--table-row-striped-background, hsl(var(--muted) / 0.8)) var(--table-row-striped-alpha),
        transparent
      )
    );
  }

  [data-slot="table"][data-striped=""] {
    --table-row-striped-alpha: 100%;
  }

  [data-slot="table"][data-striped="false"] {
    --table-row-striped-alpha: 0%;
  }

  .ui-table-row[data-tone] > [data-slot="table-cell"]:first-child {
    border-inline-start: var(--table-row-tone-rail-width) solid hsl(var(--table-row-tone-color));
    padding-inline-start: calc(var(--table-cell-space-x) - var(--table-row-tone-rail-width));
  }

  [data-slot="table-head"] {
    height: var(--table-row-height);
    padding: var(--table-cell-padding-y) var(--table-cell-space-x);
    text-align: start;
    vertical-align: middle;
    background: var(--table-header-background, hsl(var(--muted)));
    font-size: var(--table-head-font-size);

    font-weight: var(--table-head-font-weight);
    color: var(--table-header-foreground, hsl(var(--muted-foreground)));
    white-space: nowrap;
  }

  [data-slot="table-head"]:has([role="checkbox"]) {
    padding-inline-end: 0;
  }

  [data-slot="table-head"][data-empty] {
    background: transparent;
  }

  [data-slot="table-cell"] {
    padding: var(--table-cell-padding-y) var(--table-cell-space-x);
    vertical-align: middle;

    white-space: nowrap;
  }

  [data-slot="table-cell"]:has([role="checkbox"]) {
    padding-inline-end: 0;
  }

  :is([data-slot="table-head"], [data-slot="table-cell"])[data-numeric] {
    font-variant-numeric: tabular-nums;
    text-align: end;
  }

  :is([data-slot="table-head"], [data-slot="table-cell"])[data-align="start"] {
    text-align: start;
  }

  :is([data-slot="table-head"], [data-slot="table-cell"])[data-align="center"] {
    text-align: center;
  }

  :is([data-slot="table-head"], [data-slot="table-cell"])[data-align="end"] {
    text-align: end;
  }

  :is([data-slot="table-head"], [data-slot="table-cell"])[data-wrap] {
    white-space: normal;
  }

  [data-slot="table-cell"][data-indent] {
    padding-inline-start: calc(
      var(--table-cell-space-x) + var(--table-cell-indent-level, 0) *
        var(--table-cell-indent-space-step)
    );
  }

  [data-slot="table-cell"][data-flush] {
    padding: 0;
  }

  .ui-data-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-inline-md);
  }

  .ui-data-table-sort-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-inline-xs);
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    outline: none;
  }

  .ui-data-table-sort-button::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    translate: -50% -50%;
    min-inline-size: var(--touch-target-min);
    min-block-size: var(--touch-target-min);
    inline-size: 100%;
    block-size: 100%;
  }

  .ui-data-table-bulk {
    display: flex;
    align-items: center;
    gap: var(--space-inline-sm);
    font-size: var(--font-size-base);
  }

  .ui-data-table-bulk-actions {
    display: flex;
    align-items: center;
    gap: var(--space-inline-sm);
  }

  .ui-data-table-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-inline-sm);
    padding-block: var(--table-pagination-padding-y, var(--space-stack-sm));
    padding-inline: var(--table-pagination-padding-x, var(--table-cell-space-x));
  }

  .ui-data-table-pagination--numbered {
    flex-wrap: wrap;
    min-width: 0;
  }

  .ui-data-table-pagination--footer > .ui-pagination {
    flex: 1 1 auto;
  }

  .ui-data-table-pagination--footer:empty {
    display: none;
  }

  .ui-data-table-page-size {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    max-width: 100%;
    min-width: 0;
  }

  .ui-data-table-page-size-label {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .ui-data-table-page-size-trigger,
  .ui-data-table-page-nav {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .ui-data-table-root {
    display: flex;
    flex-direction: column;
    gap: var(--space-stack-sm);
  }

  .ui-data-table-surface {

    overflow: clip;

    min-inline-size: min-content;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-md);
  }

  .ui-data-table-surface[data-preset="action-collection"] {
    min-inline-size: 0;
  }

  .ui-data-table-surface:not([data-preset]) > * > [data-slot="table"] {
    min-inline-size: var(--table-surface-min-inline-size);
  }

  .ui-data-table-empty {
    padding: var(--empty-state-space-y) var(--empty-state-space-x);
  }

  .ui-data-table-empty .ui-empty-state {
    padding: 0;
  }

  [data-slot="card-content"][data-flush] .ui-data-table-root {
    gap: 0;
  }

  [data-slot="card-content"][data-flush] .ui-data-table-toolbar {
    border-bottom: 1px solid hsl(var(--card-border, var(--border)));
    padding: var(--card-space-header-y) var(--card-space-inset);
  }

  .ui-data-table-sort-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-inline-xs);
  }

  :is(th, td).text-center > .ui-data-table-sort-button > .ui-data-table-sort-label {
    position: relative;

    padding-inline: calc(0.75rem + var(--space-inline-xs));
  }

  :is(th, td).text-center > .ui-data-table-sort-button > .ui-data-table-sort-label > :last-child {
    position: absolute;
    inset-inline-end: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .ui-data-table-scroll {
    position: relative;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--space-page-active-x));
    padding-inline: var(--space-page-active-x);
  }

  .ui-data-table-scroll::after {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-end: var(--space-page-active-x);
    bottom: 0;
    z-index: 20;
    width: 1.75rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms ease;
    background: linear-gradient(to left, hsl(var(--background) / 0.88), transparent);
  }

  .ui-data-table-has-overflow-end::after {
    opacity: 1;
  }

  [data-slot="card-content"][data-flush] .ui-data-table-scroll {
    margin-inline: 0;
    padding-inline: 0;
  }

  .ui-page-container--flush > .ui-page-body > .ui-data-table-root > .ui-data-table-scroll {
    margin-inline: 0;
    padding-inline: 0;
  }

  .ui-page-container--flush > .ui-page-body > .ui-data-table-root > .ui-data-table-scroll::after {
    inset-inline-end: 0;
  }

  [data-slot="card-content"][data-flush] .ui-data-table-scroll::after {
    inset-inline-end: 0;
  }

  @media (min-width: 640px) {
    .ui-data-table-scroll {
      margin-inline: 0;
      padding-inline: 0;
    }

    .ui-data-table-scroll::after {
      inset-inline-end: 0;
    }

    .ui-data-table-surface:not([data-preset]) > * > [data-slot="table"] {
      min-inline-size: 0;
    }
  }

  .ui-data-table-has-pin-end::after {
    display: none;
  }

  .ui-data-table-pin-end {
    position: sticky;

    inset-inline-end: calc(var(--table-fixed-offset, 0) * 1px);
    z-index: 2;
    background-color: hsl(var(--background));
    box-shadow: var(--table-pin-shadow);
  }

  .ui-data-table-pin-start {
    position: sticky;
    inset-inline-start: calc(var(--table-fixed-offset, 0) * 1px);
    z-index: 2;
    background-color: hsl(var(--background));
    box-shadow: var(--table-fixed-shadow-start);
  }

  [data-slot="card"]
    .ui-data-table-surface
    tbody
    :is(.ui-data-table-pin-end, .ui-data-table-pin-start) {
    background-color: hsl(var(--card-background, var(--card)));
  }

  th.ui-data-table-pin-end,
  th.ui-data-table-pin-start {
    background-color: hsl(var(--secondary));
  }

  [dir="rtl"] .ui-data-table-pin-start {
    box-shadow: var(--table-fixed-shadow-start-rtl);
  }

  [dir="rtl"] .ui-data-table-pin-end {
    box-shadow: 6px 0 6px -5px hsl(var(--foreground) / 0.12);
  }

  :where([data-slot="table"] > tbody > tr:nth-child(even of :not([data-expanded-row])))
    > :is(.ui-data-table-pin-end, .ui-data-table-pin-start) {
    background-image: linear-gradient(
      color-mix(
        in srgb,
        var(--table-row-striped-background, hsl(var(--muted) / 0.8)) var(--table-row-striped-alpha),
        transparent
      ),
      color-mix(
        in srgb,
        var(--table-row-striped-background, hsl(var(--muted) / 0.8)) var(--table-row-striped-alpha),
        transparent
      )
    );
  }

  .ui-data-table-surface tbody tr:hover > .ui-data-table-pin-end,
  .ui-data-table-surface tbody tr:hover > .ui-data-table-pin-start {
    background-image: linear-gradient(
      var(--table-row-hover-background, hsl(var(--accent) / 0.7)),
      var(--table-row-hover-background, hsl(var(--accent) / 0.7))
    );
  }

  .ui-data-table-surface tbody tr[data-state="selected"] > .ui-data-table-pin-end,
  .ui-data-table-surface tbody tr[data-state="selected"] > .ui-data-table-pin-start {
    background-image: linear-gradient(
      var(--table-row-selected-background, hsl(var(--muted) / 0.3)),
      var(--table-row-selected-background, hsl(var(--muted) / 0.3))
    );
  }

  .ui-data-table-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ui-data-table-surface[data-table-layout="fixed"] [data-slot="table"] {
    table-layout: fixed;
  }

  .ui-data-table-scroll[data-scroll-y] {
    overflow-y: auto;
    max-block-size: var(--table-scroll-block-size, none);
  }

  .ui-data-table-scroll[data-scroll-x] [data-slot="table"] {
    min-inline-size: var(--table-scroll-inline-size, auto);
  }

  .ui-data-table-expand-column {
    inline-size: var(--table-expand-column-width);
  }

  .ui-data-table-expanded-row > [data-slot="table-cell"] {
    background-color: color-mix(
      in srgb,
      var(--table-row-expanded-background, hsl(var(--muted) / 0.3))
        calc(100% - var(--table-row-striped-alpha)),
      transparent
    );
  }

  .ui-data-table-summary {
    background-color: var(--table-summary-background, hsl(var(--muted)));
    font-weight: var(--font-weight-medium);
  }

  .ui-data-table-summary > tr > [data-slot="table-cell"] {
    border-block-start: var(--table-summary-border-width) solid hsl(var(--border));
  }

  .ui-data-table-filter-trigger[data-filtered] {
    color: hsl(var(--primary));
  }

  .ui-data-table-selection-menu {
    display: inline-flex;
    align-items: center;
    gap: var(--table-selection-menu-gap);
  }

  .ui-data-table-surface .ui-table-bordered {
    border-width: 0;
  }

  .ui-table-bordered {
    border: 1px solid var(--table-border-color, hsl(var(--border)));
  }

  .ui-table-bordered :is([data-slot="table-head"], [data-slot="table-cell"]):not(:last-child) {
    border-inline-end: 1px solid var(--table-border-color, hsl(var(--border)));
  }

  [data-slot="card-content"][data-flush]
    :is(.ui-data-table-surface, .ui-table-bordered, .ui-skeleton-table) {
    border-width: 0;
    border-radius: 0;
  }

  [data-slot="card-header"]:not([data-banded])
    + [data-slot="card-content"][data-flush]
    :is(.ui-data-table-surface, .ui-table-bordered, .ui-skeleton-table) {
    border-block-start-width: var(--table-flush-divider-width);
  }

  [data-slot="card-content"][data-flush] .ui-data-table-root:has(.ui-data-table-toolbar) {
    --table-flush-divider-width: 0px;
  }
}

@layer components {

  .ui-table-collection {
    container: ui-table-collection / inline-size;
  }

  .ui-table-collection [data-slot="table"] {
    table-layout: fixed;
    inline-size: 100%;
  }

  .ui-table-collection :is([data-slot="table-head"], [data-slot="table-cell"]) {

    inline-size: var(
      --table-action-collection-column-width,
      var(--table-action-collection-flex-width, auto)
    );

    overflow-wrap: anywhere;
    white-space: normal;
    vertical-align: top;
  }

  .ui-table-collection [data-priority="primary"] {
    --table-action-collection-column-width: var(--table-action-collection-primary-width);
  }

  .ui-table-collection [data-priority="secondary"] {
    --table-action-collection-column-width: var(--table-action-collection-secondary-width);
  }

  .ui-table-collection [data-priority="meta"] {
    --table-action-collection-column-width: var(--table-action-collection-meta-width);
  }

  .ui-table-collection [data-priority="actions"] {
    --table-action-collection-column-width: var(--table-action-collection-actions-width);
    text-align: end;
  }
}

@layer components {

  .ui-table-stacked-collection {
    container: ui-table-stacked-collection / inline-size;
  }

  .ui-table-stacked-collection-label {
    display: none;
  }
}

@layer components {

  .ui-data-table-select-column {
    inline-size: var(--table-select-column-width);
  }

  .ui-data-table-sticky-header {
    position: sticky;

    inset-block-start: var(--table-sticky-offset, 0);
    z-index: 10;
  }

  .ui-data-table-sort-icon {
    inline-size: var(--table-sort-icon-size);
    block-size: var(--table-sort-icon-size);
  }

  .ui-data-table-root .ui-data-table-toolbar-icon {
    inline-size: var(--table-toolbar-icon-size);
    block-size: var(--table-toolbar-icon-size);
    flex-shrink: 0;
  }

  .ui-data-table-root .ui-data-table-pagination-icon {
    inline-size: var(--table-pagination-icon-size);
    block-size: var(--table-pagination-icon-size);
  }

  .ui-data-table-pagination-text {
    font-size: var(--table-pagination-font-size);
    color: hsl(var(--muted-foreground));
  }

  .ui-data-table-root .ui-data-table-skeleton-check {
    inline-size: var(--table-skeleton-check-size);
    block-size: var(--table-skeleton-check-size);
    border-radius: var(--table-skeleton-radius);
  }

  .ui-data-table-root .ui-data-table-skeleton-line {
    block-size: var(--table-skeleton-line-height);
  }

  .ui-data-table-sort-button {
    border-radius: var(--table-skeleton-radius);
  }
}

@layer godxjp-ui-responsive {

  @container ui-table-collection (width < 40rem) {
    [data-collapse-below="sm"] [data-slot="table"] {
      --table-action-collection-primary-width: var(--table-action-collection-primary-width-compact);
      --table-action-collection-secondary-width: var(
        --table-action-collection-secondary-width-compact
      );
      --table-action-collection-meta-width: var(--table-action-collection-meta-width-compact);
      --table-action-collection-actions-width: var(--table-action-collection-actions-width-compact);
      --table-row-height: var(--table-action-collection-row-height-compact);
      --table-cell-space-x: var(--table-action-collection-cell-space-x-compact);
      --table-cell-padding-y: var(--table-action-collection-cell-padding-y-compact);
      font-size: var(--table-action-collection-font-size-compact);

      min-inline-size: var(--table-action-collection-min-inline-size-compact);
    }

    [data-collapse-below="sm"] [data-slot="table-cell"] * {
      white-space: normal;
    }

    [data-collapse-below="sm"] [data-slot="table"]:has([data-slot="table-head"]:nth-child(7)) {
      --table-action-collection-primary-width: var(--table-action-collection-primary-width-floor);
      --table-action-collection-secondary-width: var(
        --table-action-collection-secondary-width-floor
      );
      --table-action-collection-meta-width: var(--table-action-collection-meta-width-floor);
      --table-action-collection-flex-width: var(--table-action-collection-flex-width-floor);
    }
  }

  @container ui-table-collection (width < 48rem) {
    [data-collapse-below="md"] [data-slot="table"] {
      --table-action-collection-primary-width: var(--table-action-collection-primary-width-compact);
      --table-action-collection-secondary-width: var(
        --table-action-collection-secondary-width-compact
      );
      --table-action-collection-meta-width: var(--table-action-collection-meta-width-compact);
      --table-action-collection-actions-width: var(--table-action-collection-actions-width-compact);
      --table-row-height: var(--table-action-collection-row-height-compact);
      --table-cell-space-x: var(--table-action-collection-cell-space-x-compact);
      --table-cell-padding-y: var(--table-action-collection-cell-padding-y-compact);
      font-size: var(--table-action-collection-font-size-compact);

      min-inline-size: var(--table-action-collection-min-inline-size-compact);
    }

    [data-collapse-below="md"] [data-slot="table-cell"] * {
      white-space: normal;
    }

    [data-collapse-below="md"] [data-slot="table"]:has([data-slot="table-head"]:nth-child(7)) {
      --table-action-collection-primary-width: var(--table-action-collection-primary-width-floor);
      --table-action-collection-secondary-width: var(
        --table-action-collection-secondary-width-floor
      );
      --table-action-collection-meta-width: var(--table-action-collection-meta-width-floor);
      --table-action-collection-flex-width: var(--table-action-collection-flex-width-floor);
    }
  }

  @container ui-table-collection (width < 64rem) {
    [data-collapse-below="lg"] [data-slot="table"] {
      --table-action-collection-primary-width: var(--table-action-collection-primary-width-compact);
      --table-action-collection-secondary-width: var(
        --table-action-collection-secondary-width-compact
      );
      --table-action-collection-meta-width: var(--table-action-collection-meta-width-compact);
      --table-action-collection-actions-width: var(--table-action-collection-actions-width-compact);
      --table-row-height: var(--table-action-collection-row-height-compact);
      --table-cell-space-x: var(--table-action-collection-cell-space-x-compact);
      --table-cell-padding-y: var(--table-action-collection-cell-padding-y-compact);
      font-size: var(--table-action-collection-font-size-compact);

      min-inline-size: var(--table-action-collection-min-inline-size-compact);
    }

    [data-collapse-below="lg"] [data-slot="table-cell"] * {
      white-space: normal;
    }

    [data-collapse-below="lg"] [data-slot="table"]:has([data-slot="table-head"]:nth-child(7)) {
      --table-action-collection-primary-width: var(--table-action-collection-primary-width-floor);
      --table-action-collection-secondary-width: var(
        --table-action-collection-secondary-width-floor
      );
      --table-action-collection-meta-width: var(--table-action-collection-meta-width-floor);
      --table-action-collection-flex-width: var(--table-action-collection-flex-width-floor);
    }
  }

  @container ui-table-collection (width < 80rem) {
    [data-collapse-below="xl"] [data-slot="table"] {
      --table-action-collection-primary-width: var(--table-action-collection-primary-width-compact);
      --table-action-collection-secondary-width: var(
        --table-action-collection-secondary-width-compact
      );
      --table-action-collection-meta-width: var(--table-action-collection-meta-width-compact);
      --table-action-collection-actions-width: var(--table-action-collection-actions-width-compact);
      --table-row-height: var(--table-action-collection-row-height-compact);
      --table-cell-space-x: var(--table-action-collection-cell-space-x-compact);
      --table-cell-padding-y: var(--table-action-collection-cell-padding-y-compact);
      font-size: var(--table-action-collection-font-size-compact);

      min-inline-size: var(--table-action-collection-min-inline-size-compact);
    }

    [data-collapse-below="xl"] [data-slot="table-cell"] * {
      white-space: normal;
    }

    [data-collapse-below="xl"] [data-slot="table"]:has([data-slot="table-head"]:nth-child(7)) {
      --table-action-collection-primary-width: var(--table-action-collection-primary-width-floor);
      --table-action-collection-secondary-width: var(
        --table-action-collection-secondary-width-floor
      );
      --table-action-collection-meta-width: var(--table-action-collection-meta-width-floor);
      --table-action-collection-flex-width: var(--table-action-collection-flex-width-floor);
    }
  }

  @container ui-table-stacked-collection (width < 40rem) {
    [data-collapse-below="sm"] [data-slot="table"] {
      display: block;
    }

    [data-collapse-below="sm"] [data-slot="table"] > thead {
      display: none;
    }

    [data-collapse-below="sm"] [data-slot="table"] > tbody {
      display: block;
    }

    [data-collapse-below="sm"] .ui-table-row {
      display: block;

      height: auto;
      border: var(--stroke-hairline) solid hsl(var(--border));
      border-radius: var(--radius-md);
      padding: var(--table-stacked-collection-card-padding-y)
        var(--table-stacked-collection-card-padding-x);
      margin-block-end: var(--table-stacked-collection-card-gap);
    }

    [data-collapse-below="sm"] .ui-table-row:last-child {
      margin-block-end: 0;
    }

    [data-collapse-below="sm"] [data-slot="table-cell"] {
      display: block;
      padding-block: var(--table-stacked-collection-cell-padding-y);
      white-space: normal;
      overflow-wrap: anywhere;
    }

    [data-collapse-below="sm"] .ui-table-stacked-collection-label {
      display: block;
      font-size: var(--table-stacked-collection-label-font-size);
      font-weight: var(--font-weight-medium);
      color: hsl(var(--muted-foreground));
      margin-block-end: var(--space-stack-xs);
    }
  }

  @container ui-table-stacked-collection (width < 48rem) {
    [data-collapse-below="md"] [data-slot="table"] {
      display: block;
    }

    [data-collapse-below="md"] [data-slot="table"] > thead {
      display: none;
    }

    [data-collapse-below="md"] [data-slot="table"] > tbody {
      display: block;
    }

    [data-collapse-below="md"] .ui-table-row {
      display: block;

      height: auto;
      border: var(--stroke-hairline) solid hsl(var(--border));
      border-radius: var(--radius-md);
      padding: var(--table-stacked-collection-card-padding-y)
        var(--table-stacked-collection-card-padding-x);
      margin-block-end: var(--table-stacked-collection-card-gap);
    }

    [data-collapse-below="md"] .ui-table-row:last-child {
      margin-block-end: 0;
    }

    [data-collapse-below="md"] [data-slot="table-cell"] {
      display: block;
      padding-block: var(--table-stacked-collection-cell-padding-y);
      white-space: normal;
      overflow-wrap: anywhere;
    }

    [data-collapse-below="md"] .ui-table-stacked-collection-label {
      display: block;
      font-size: var(--table-stacked-collection-label-font-size);
      font-weight: var(--font-weight-medium);
      color: hsl(var(--muted-foreground));
      margin-block-end: var(--space-stack-xs);
    }
  }

  @container ui-table-stacked-collection (width < 64rem) {
    [data-collapse-below="lg"] [data-slot="table"] {
      display: block;
    }

    [data-collapse-below="lg"] [data-slot="table"] > thead {
      display: none;
    }

    [data-collapse-below="lg"] [data-slot="table"] > tbody {
      display: block;
    }

    [data-collapse-below="lg"] .ui-table-row {
      display: block;

      height: auto;
      border: var(--stroke-hairline) solid hsl(var(--border));
      border-radius: var(--radius-md);
      padding: var(--table-stacked-collection-card-padding-y)
        var(--table-stacked-collection-card-padding-x);
      margin-block-end: var(--table-stacked-collection-card-gap);
    }

    [data-collapse-below="lg"] .ui-table-row:last-child {
      margin-block-end: 0;
    }

    [data-collapse-below="lg"] [data-slot="table-cell"] {
      display: block;
      padding-block: var(--table-stacked-collection-cell-padding-y);
      white-space: normal;
      overflow-wrap: anywhere;
    }

    [data-collapse-below="lg"] .ui-table-stacked-collection-label {
      display: block;
      font-size: var(--table-stacked-collection-label-font-size);
      font-weight: var(--font-weight-medium);
      color: hsl(var(--muted-foreground));
      margin-block-end: var(--space-stack-xs);
    }
  }

  @container ui-table-stacked-collection (width < 80rem) {
    [data-collapse-below="xl"] [data-slot="table"] {
      display: block;
    }

    [data-collapse-below="xl"] [data-slot="table"] > thead {
      display: none;
    }

    [data-collapse-below="xl"] [data-slot="table"] > tbody {
      display: block;
    }

    [data-collapse-below="xl"] .ui-table-row {
      display: block;

      height: auto;
      border: var(--stroke-hairline) solid hsl(var(--border));
      border-radius: var(--radius-md);
      padding: var(--table-stacked-collection-card-padding-y)
        var(--table-stacked-collection-card-padding-x);
      margin-block-end: var(--table-stacked-collection-card-gap);
    }

    [data-collapse-below="xl"] .ui-table-row:last-child {
      margin-block-end: 0;
    }

    [data-collapse-below="xl"] [data-slot="table-cell"] {
      display: block;
      padding-block: var(--table-stacked-collection-cell-padding-y);
      white-space: normal;
      overflow-wrap: anywhere;
    }

    [data-collapse-below="xl"] .ui-table-stacked-collection-label {
      display: block;
      font-size: var(--table-stacked-collection-label-font-size);
      font-weight: var(--font-weight-medium);
      color: hsl(var(--muted-foreground));
      margin-block-end: var(--space-stack-xs);
    }
  }
}