@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
/* Compound-family aggregation: DataTable renders the whole Table family, so
 * `cinder/data-table/styles` must pull in the Table CSS (which itself imports
 * table-body / table-cell / table-header / table-header-cell / table-row and
 * defines `.cinder-table-scroll`). Without this, the data-table subpath ships
 * an unstyled table and the scroll override below has no base behaviour to
 * extend. Sibling-leaf paths resolve identically in `src/` and `dist/`. */
@import '/assets/b156259ecf951ea64c145aa0f54c7115e89156d2e5434dff5584e0328b19afe7/components/table/table.css';
@import '/assets/b156259ecf951ea64c145aa0f54c7115e89156d2e5434dff5584e0328b19afe7/components/checkbox/checkbox.css';

@layer cinder.components {
  /* ========================================
 * DATA TABLE
 * Thin wrapper div that scopes the data-driven DataTable component.
 * Visual treatment for the table itself lives in table.css.
 * ======================================== */

  /* The non-scrollable wrapper is a pure structural pass-through: `display:
   * contents` lets the inner <table> participate directly in the parent layout
   * with no extra box. */
  .cinder-data-table {
    display: contents;
  }

  /* When scrollable, the wrapper MUST generate a box so its `overflow-x: auto`
   * (from .cinder-table-scroll) has something to scroll — `display: contents`
   * would erase the box and silently disable horizontal scrolling. */
  .cinder-data-table.cinder-table-scroll {
    display: block;
  }

  .cinder-data-table[data-cinder-virtualized] {
    block-size: var(--cinder-data-table-height, 24rem);
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    contain: layout paint;
  }

  .cinder-data-table[data-cinder-selectable] .cinder-table__cell--selection,
  .cinder-data-table[data-cinder-selectable] .cinder-table__header-cell--selection {
    width: 1px;
    padding-inline: var(--cinder-space-3);
    padding-block: var(--cinder-space-2);
    text-align: center;
    vertical-align: middle;
  }

  .cinder-data-table .cinder-table__cell--selection .cinder-checkbox-field,
  .cinder-data-table .cinder-table__header-cell--selection .cinder-checkbox-field {
    display: inline-block;
  }

  .cinder-data-table .cinder-table__cell--selection .cinder-checkbox-row,
  .cinder-data-table .cinder-table__header-cell--selection .cinder-checkbox-row {
    display: inline-flex;
  }

  .cinder-data-table[data-cinder-virtualized] .cinder-table__row[data-cinder-virtual-row] {
    block-size: var(--_cinder-data-table-row-height, 44px);
  }

  .cinder-data-table tbody .cinder-table__row:focus-within {
    background: var(--cinder-surface-hover);
  }

  .cinder-data-table[data-cinder-virtualized]
    .cinder-table__row[data-cinder-virtual-row]:focus-visible {
    outline: var(--cinder-ring-width) solid transparent;
    box-shadow: var(--_cinder-focus-ring-shadow);
  }

  .cinder-data-table[data-cinder-resizable] .cinder-table {
    table-layout: fixed;
    inline-size: var(--_cinder-data-table-width);
    min-inline-size: var(--_cinder-data-table-width);
  }

  @media (forced-colors: active) {
    .cinder-data-table[data-cinder-virtualized]
      .cinder-table__row[data-cinder-virtual-row]:focus-visible {
      outline: var(--cinder-ring-width) solid ButtonText;
      outline-offset: calc(-1 * var(--cinder-ring-width));
      box-shadow: none;
    }
  }

  .cinder-data-table__virtual-spacer-cell {
    padding: 0;
    border: 0;
  }
  .cinder-data-table__column-resizer {
    display: inline-block;
    inline-size: 0.75rem;
    block-size: 1.5rem;
    cursor: col-resize;
    touch-action: none;
    vertical-align: middle;
  }
  .cinder-data-table__column-resizer:focus-visible {
    outline: var(--cinder-ring-width) solid transparent;
    box-shadow: var(--_cinder-focus-ring-shadow);
  }
  @media (forced-colors: active) {
    .cinder-data-table__column-resizer:focus-visible {
      outline: var(--cinder-ring-width) solid ButtonText;
      outline-offset: 1px;
      box-shadow: none;
    }
  }
}