/*
 * Renderer-neutral table recipe.
 *
 * Import `@ds-mo/ui/table.css` when product-owned native table markup needs
 * the same visual primitives as `<ds-table>`. Selectors intentionally use
 * zero specificity so applications can restyle any layer without fighting
 * the recipe. The component consumes this exact source internally.
 */

:where(.ds-table) {
  --_table-cell-track-min-block-size: var(--dimension-size-300);
  --_table-cell-track-padding-inline: calc(
    var(--dimension-space-075) - var(--dimension-space-025)
  );
  --_table-cell-track-label-inset: var(--dimension-space-025);
  --_table-caption-bar-block-size: var(--dimension-size-600);
  --_table-image-block-size: var(--_table-cell-track-min-block-size);
  --_table-image-block-size-multi: calc(
    var(--_table-cell-track-min-block-size)
    + var(--dimension-space-025)
    + var(--dimension-size-250)
  );
  --_table-image-block-size-triple: calc(
    var(--_table-image-block-size-multi)
    + var(--dimension-space-025)
    + var(--dimension-size-250)
  );
  --_table-image-column-inline-size: calc(
    ((var(--_table-image-block-size) * 16) / 9)
    + (var(--_table-cell-padding-inline) * 2)
  );
  --_table-image-column-inline-size-multi: calc(
    ((var(--_table-image-block-size-multi) * 16) / 9)
    + (var(--_table-cell-padding-inline) * 2)
  );
  --_table-image-column-inline-size-triple: calc(
    ((var(--_table-image-block-size-triple) * 16) / 9)
    + (var(--_table-cell-padding-inline) * 2)
  );
  /*
   * Wrapping primary on a 1-track cell occupies later tracks instead of a
   * private leading scale. Keep body-medium size; add the 2px stack gap to
   * line-height and leave the leftover first-track inset as padding-block
   * so 1 / 2 / 3 wrapped lines measure 40 / 62 / 84 like named tracks.
   */
  --_table-wrap-primary-line-height: calc(
    var(--typography-lineheight-md) + var(--dimension-space-025)
  );
  --_table-wrap-primary-padding-block: calc(
    (
      var(--_table-cell-track-min-block-size)
      - var(--typography-lineheight-md)
      - var(--dimension-space-025)
    ) / 2
  );
  /*
   * Wrapping secondary on a 2-track cell occupies later tracks. Zero the copy
   * gap and use later-track + gap as line-height so 1 / 2 / 3 secondary lines
   * land on 62 / 84 / 106 with primary remaining the first 24px track.
   */
  --_table-wrap-secondary-line-height: calc(
    var(--dimension-size-250) + var(--dimension-space-025)
  );
  --_table-wrap-secondary-padding-block: 0;
  --_table-surface: var(--ds-table-surface, var(--color-background-primary));
  --_table-header-surface: var(--ds-table-header-surface, var(--color-background-primary));
  --_table-group-surface: var(--ds-table-group-surface, var(--color-background-faint-neutral));
  --_table-row-hover: var(--ds-table-row-hover, var(--color-interaction-hover));
  --_table-row-pressed: var(--ds-table-row-pressed, var(--color-interaction-pressed));
  --_table-row-selected: var(--ds-table-row-selected, var(--color-interaction-active-brand));
  --_table-border: var(--ds-table-border, var(--color-border-secondary));
  --_table-column-border: var(--ds-table-column-border, var(--color-border-tertiary));
  --_table-sticky-border: var(--ds-table-sticky-border, var(--color-border-tertiary));
  --_table-border-strong: var(--ds-table-border-strong, var(--color-border-secondary));
  --_table-radius: var(--ds-table-radius, var(--dimension-radius-000));
  --_table-header-min-block-size: var(
    --ds-table-header-min-block-size,
    var(--dimension-size-400)
  );
  --_table-row-min-block-size: var(
    --ds-table-row-min-block-size,
    var(--dimension-size-500)
  );
  --_table-cell-padding-block: var(
    --ds-table-cell-padding-block,
    var(--dimension-space-100)
  );
  --_table-cell-padding-inline: var(
    --ds-table-cell-padding-inline,
    var(--dimension-space-100)
  );
  --_table-selection-column-inline-size: var(
    --ds-table-selection-column-inline-size,
    var(--dimension-size-500)
  );
  --_table-selection-column-contribution: 0px;
  --_table-sticky-start-shadow: var(
    --ds-table-sticky-start-shadow,
    inset var(--dimension-space-100) 0 var(--dimension-space-100)
      calc(-1 * var(--dimension-space-100)) var(--color-elevation-shadow)
  );
  --_table-sticky-end-shadow: var(
    --ds-table-sticky-end-shadow,
    inset calc(-1 * var(--dimension-space-100)) 0 var(--dimension-space-100)
      calc(-1 * var(--dimension-space-100)) var(--color-elevation-shadow)
  );
  display: block;
  box-sizing: border-box;
  min-inline-size: 0;
  max-inline-size: 100%;
  color: var(--color-foreground-primary);
  -webkit-user-select: none;
  user-select: none;
}

:where(.ds-table--bounded) {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-block-size: 0;
  block-size: 100%;
}

:where(.ds-table--viewport-fit) {
  block-size: var(--_table-viewport-fit-current-block-size, 100%);
  min-block-size: var(--_table-viewport-fit-current-block-size, 100%);
}

:where(.ds-table--bounded .ds-table__frame),
:where(.ds-table--bounded .ds-table__viewport) {
  min-block-size: 0;
  block-size: 100%;
  max-block-size: none;
}

:where(.ds-table__frame) {
  position: relative;
  timeline-scope: --ds-table-inline-scroll;
  box-sizing: border-box;
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow: visible;
  border: 0;
  border-radius: var(--_table-radius);
  background: var(--_table-surface);
}

/*
 * Contained tables own a hard visual viewport. Clip table-owned overlays and
 * elastic-scroll paint to that frame without introducing another scrollport;
 * the nested viewport remains the only element that scrolls.
 */
:where(.ds-table--contained-scroll .ds-table__frame) {
  overflow: clip;
}

:where(.ds-table__viewport) {
  box-sizing: border-box;
  max-block-size: var(--ds-table-max-block-size, none);
  max-inline-size: 100%;
  min-inline-size: 0;
  overflow: auto;
  scroll-timeline: --ds-table-inline-scroll inline;
  overscroll-behavior-x: none;
  overscroll-behavior-y: auto;
  scrollbar-gutter: stable;
  border-radius: var(--_table-radius);
  outline: none;
}

:where(.ds-table--document-sticky-header .ds-table__viewport) {
  scrollbar-gutter: auto;
}

:where(.ds-table__viewport:focus-visible) {
  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);
  outline-offset: calc(-1 * var(--dimension-stroke-width-025));
}

:where(.ds-table--viewport-fit-pending .ds-table__viewport) {
  overflow-y: hidden;
}

:where(.ds-table--viewport-fit-settled .ds-table__viewport) {
  overscroll-behavior-y: none;
}

:where(.ds-table__table) {
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: max(
    100%,
    calc(
      var(--ds-table-explicit-min-inline-size, 0px) +
        var(--_table-selection-column-contribution)
    )
  );
  border: 0;
  border-spacing: 0;
  border-collapse: separate;
  table-layout: fixed;
  background: var(--_table-surface);
  color: inherit;
}

:where(.ds-table__table--selectable) {
  --_table-selection-column-contribution: var(--_table-selection-column-inline-size);
}

/*
 * A contained grouped table uses native sticky positioning without a scroll
 * listener or duplicated section lane. Turning its table formatting boxes into
 * explicit blocks makes every real tbody a section boundary; shared grid tracks
 * retain exact header/body alignment while the browser performs push-off in the
 * same layout pass as scrolling and container resize.
 */
:where(.ds-table__table--native-group-sticky) {
  display: block;
}

:where(.ds-table__table--native-group-sticky > colgroup) {
  display: none;
}

:where(.ds-table__table--native-group-sticky > .ds-table__head),
:where(.ds-table__table--native-group-sticky > .ds-table__body) {
  display: block;
  inline-size: 100%;
}

:where(.ds-table__table--native-group-sticky > .ds-table__group) {
  position: relative;
  contain: layout style;
}

/* Bound style and layout invalidation to recycled row shells during window updates. */
:where(.ds-table__table--virtual .ds-table__row) {
  contain: layout style;
}

:where(.ds-table__table--native-group-sticky .ds-table__header-row),
:where(.ds-table__table--native-group-sticky .ds-table__row),
:where(.ds-table__table--native-group-sticky .ds-table__skeleton-row) {
  display: grid;
  grid-template-columns: var(--_table-grid-template-columns);
  inline-size: 100%;
}

:where(.ds-table__table--native-group-sticky .ds-table__group-row),
:where(.ds-table__table--native-group-sticky .ds-table__state-row),
:where(.ds-table__table--native-group-sticky .ds-table__load-row),
:where(.ds-table__table--native-group-sticky .ds-table__virtual-spacer-row) {
  display: block;
  inline-size: 100%;
}

:where(.ds-table__table--native-group-sticky .ds-table__header-cell),
:where(.ds-table__table--native-group-sticky .ds-table__cell),
:where(.ds-table__table--native-group-sticky .ds-table__group-cell),
:where(.ds-table__table--native-group-sticky .ds-table__state-cell),
:where(.ds-table__table--native-group-sticky .ds-table__load-cell),
:where(.ds-table__table--native-group-sticky .ds-table__virtual-spacer-cell) {
  display: block;
  inline-size: auto;
  width: auto;
  max-inline-size: none;
  max-width: none;
}

:where(.ds-table__table--native-group-sticky .ds-table__group-cell),
:where(.ds-table__table--native-group-sticky .ds-table__state-cell),
:where(.ds-table__table--native-group-sticky .ds-table__load-cell),
:where(.ds-table__table--native-group-sticky .ds-table__virtual-spacer-cell) {
  inline-size: 100%;
  width: 100%;
}

:where(.ds-table__virtual-spacer-row) {
  border: 0;
}

:where(.ds-table__virtual-spacer-cell) {
  box-sizing: border-box;
  padding: 0;
  border: 0;
  overflow: hidden;
  line-height: 0;
  font-size: 0;
  background: transparent;
  block-size: var(--_table-virtual-spacer-block-size, 0);
  min-block-size: var(--_table-virtual-spacer-block-size, 0);
}

:where(.ds-table__caption-bar),
:where(.ds-table__footer) {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  inline-size: 100%;
  min-block-size: var(--_table-caption-bar-block-size);
  block-size: var(--_table-caption-bar-block-size);
  padding: var(--dimension-space-100);
  gap: var(--dimension-space-100);
  background: var(--_table-surface);
  text-align: start;
}

:where(.ds-table__caption-bar) {
  border-start-start-radius: var(--_table-radius);
  border-start-end-radius: var(--_table-radius);
  border-block-end: var(--dimension-stroke-width-012) solid var(--_table-column-border);
  color: var(--color-foreground-primary);
}

:where(.ds-table__caption-content) {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  box-sizing: border-box;
  min-inline-size: 0;
  max-inline-size: 100%;
}

:where(.ds-table__caption-content--trailing) {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--dimension-space-100);
}

:where(.ds-table__caption-trailing) {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-inline-size: 0;
  gap: var(--dimension-space-100);
}

:where(.ds-table__caption-leading) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-inline-size: 0;
  max-inline-size: 100%;
}

:where(.ds-table__caption-leading > slot) {
  display: contents;
}

:where(.ds-table--caption-visible .ds-table__frame),
:where(.ds-table--caption-visible .ds-table__viewport) {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}

:where(.ds-table__bar-leading),
:where(.ds-table__bar-trailing) {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-inline-size: 0;
  gap: var(--dimension-space-100);
}

:where(.ds-table__bar-trailing) {
  margin-inline-start: auto;
}

:where(.ds-table__bar-leading[hidden], .ds-table__bar-trailing[hidden]) {
  display: none;
}

:where(.ds-table__bar-copy) {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  box-sizing: border-box;
  min-inline-size: 0;
  max-inline-size: 100%;
  padding: var(--ds-control-padding-inline, var(--dimension-space-075));
}

:where(.ds-table__bar-status) {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  min-inline-size: 0;
  padding-inline: var(--ds-control-label-inset, var(--dimension-space-025));
}

:where(.ds-table__bar-copy > slot) {
  display: contents;
}

:where(.ds-table__bar-copy > slot[name='footer'])::slotted(*) {
  flex: 1 1 auto;
  min-inline-size: 0;
  max-inline-size: 100%;
}

:where(.ds-table__footer-summary) {
  margin-inline-start: auto;
}

:where(.ds-table__bar-text) {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-inline-size: 0;
  block-size: var(--ds-control-height, var(--dimension-size-400));
  padding-inline: var(--ds-control-label-inset, var(--dimension-space-025));
}

/* Optional controlled result summary. */
:where(.ds-table__footer) {
  border-end-start-radius: var(--_table-radius);
  border-end-end-radius: var(--_table-radius);
  border-block-start: var(--dimension-stroke-width-012) solid var(--_table-border);
  color: var(--color-foreground-secondary);
}

:where(.ds-table--footer-visible .ds-table__frame),
:where(.ds-table--footer-visible .ds-table__viewport) {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

:where(.ds-table__selection-column) {
  inline-size: var(--_table-selection-column-inline-size);
  width: var(--_table-selection-column-inline-size);
  max-inline-size: var(--_table-selection-column-inline-size);
  max-width: var(--_table-selection-column-inline-size);
}

:where(.ds-table__action-column) {
  inline-size: var(--dimension-size-500);
  width: var(--dimension-size-500);
}

:where(.ds-table__head) {
  position: relative;
  z-index: 1;
}

:where(.ds-table--contained-sticky-header .ds-table__head) {
  position: sticky;
  inset-block-start: 0;
  z-index: 6;
}

:where(.ds-table__document-sticky-header) {
  position: sticky;
  inset-block-start: var(--ds-table-sticky-header-offset, 0);
  z-index: 6;
  block-size: var(--_table-header-min-block-size);
  margin-block-end: calc(-1 * var(--_table-header-min-block-size));
  max-inline-size: 100%;
  overflow: hidden;
  border-radius: var(--_table-radius) var(--_table-radius) 0 0;
  background: var(--_table-header-surface);
}

:where(.ds-table--document-sticky-header.ds-table--caption-visible > .ds-table__caption-bar) {
  position: sticky;
  inset-block-start: var(--ds-table-sticky-header-offset, 0);
  z-index: 3;
}

:where(.ds-table--document-sticky-header.ds-table--caption-visible .ds-table__document-sticky-header) {
  inset-block-start: calc(
    var(--ds-table-sticky-header-offset, 0px) + var(--_table-caption-bar-block-size)
  );
}

:where(.ds-table__sticky-group) {
  position: absolute;
  inset-block-start: var(--_table-sticky-group-top, 0);
  inset-inline-start: 0;
  z-index: 5;
  box-sizing: border-box;
  inline-size: 100%;
  block-size: var(--_table-row-min-block-size);
  overflow: hidden;
}

:where(.ds-table--document-sticky-header .ds-table__sticky-group) {
  will-change: inset-block-start;
}

:where(.ds-table--contained-sticky-header .ds-table__sticky-group) {
  inset-block-start: var(--_table-header-min-block-size);
  transform: translateY(var(--_table-sticky-group-push, 0));
  will-change: transform;
}

:where(.ds-table__sticky-group .ds-table__group-content) {
  position: relative;
}

:where(.ds-table__group-cell--sticky-source-hidden) {
  visibility: hidden;
}

:where(.ds-table__sticky-header-table) {
  block-size: var(--_table-header-min-block-size);
  transform: translate3d(calc(-1 * var(--ds-table-inline-scroll-offset, 0px)), 0, 0);
  will-change: transform;
}

/*
 * The document-flow header is visually duplicated so it can stick to the page
 * while the semantic table remains inside the horizontal scrollport. Keep the
 * duplicate out of a second scroll container: its columns follow the body's
 * scroll timeline and its pinned lanes counter that exact movement.
 */
:where(.ds-table__sticky-header-table .ds-table__cell--sticky-start) {
  transform: translate3d(var(--ds-table-inline-scroll-offset, 0), 0, 0);
}

:where(.ds-table__sticky-header-table .ds-table__cell--sticky-end) {
  transform: translate3d(
    calc(
      var(--ds-table-inline-scroll-offset, 0) -
      var(--ds-table-inline-scroll-max-offset, 0)
    ),
    0,
    0
  );
}

@supports (animation-timeline: --ds-table-inline-scroll) {
  :where(.ds-table__sticky-header-table) {
    animation: ds-table-follow-inline-scroll var(--effect-motion-short-2) both;
    animation-timeline: --ds-table-inline-scroll;
    animation-range: 0% 100%;
    animation-timing-function: linear;
  }

  :where(.ds-table__sticky-header-table .ds-table__cell--sticky-start) {
    animation: ds-table-counter-inline-scroll-start var(--effect-motion-short-2) both;
    animation-timeline: --ds-table-inline-scroll;
    animation-range: 0% 100%;
    animation-timing-function: linear;
  }

  :where(.ds-table__sticky-header-table .ds-table__cell--sticky-end) {
    animation: ds-table-counter-inline-scroll-end var(--effect-motion-short-2) both;
    animation-timeline: --ds-table-inline-scroll;
    animation-range: 0% 100%;
    animation-timing-function: linear;
  }
}

@keyframes ds-table-follow-inline-scroll {
  from { transform: translate3d(0, 0, 0); }
  to {
    transform: translate3d(
      calc(-1 * var(--ds-table-inline-scroll-max-offset, 0)),
      0,
      0
    );
  }
}

@keyframes ds-table-counter-inline-scroll-start {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(var(--ds-table-inline-scroll-max-offset, 0), 0, 0); }
}

@keyframes ds-table-counter-inline-scroll-end {
  from {
    transform: translate3d(
      calc(-1 * var(--ds-table-inline-scroll-max-offset, 0)),
      0,
      0
    );
  }
  to { transform: translate3d(0, 0, 0); }
}

:where(.ds-table__head--semantic-copy) {
  opacity: 0;
  pointer-events: none;
}

:where(.ds-table__header-row) {
  min-block-size: var(--_table-header-min-block-size);
  background: var(--_table-header-surface);
}

:where(.ds-table__header-cell),
:where(.ds-table__cell),
:where(.ds-table__group-cell),
:where(.ds-table__load-cell),
:where(.ds-table__state-cell) {
  box-sizing: border-box;
  border: 0;
  border-block-end: var(--dimension-stroke-width-012) solid var(--_table-border);
  text-align: start;
  vertical-align: middle;
}

:where(.ds-table__header-cell) {
  position: relative;
  min-block-size: calc(
    var(--_table-header-min-block-size) - var(--dimension-space-100) - var(--dimension-space-100)
  );
  block-size: calc(
    var(--_table-header-min-block-size) - var(--dimension-space-100) - var(--dimension-space-100)
  );
  padding: var(--dimension-space-100);
  border-block-end: 0;
  background: var(--_table-header-surface);
  color: var(--color-foreground-secondary);
}

:where(.ds-table__header-cell)::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 1;
  block-size: var(--dimension-stroke-width-012);
  background: var(--_table-border-strong);
  pointer-events: none;
}

:where(.ds-table__cell) {
  min-block-size: var(--_table-row-min-block-size);
  block-size: var(--_table-row-min-block-size);
  padding: var(--_table-cell-padding-block) var(--_table-cell-padding-inline);
  --ds-interaction-group-divider-width: var(--dimension-stroke-width-012);
  --ds-interaction-group-divider-color: var(--_table-column-border);
  border-block-end: 0;
  background-color: inherit;
  vertical-align: top;
}

/*
 * Native table cells add their block padding outside the declared content
 * height and grow together with their row. Grid items use border-box sizing,
 * so restore intrinsic sizing and grid-track stretch for the grouped-sticky
 * renderer instead of turning the native recipe's base sizes into hard caps.
 */
:where(.ds-table__table--native-group-sticky .ds-table__header-cell) {
  min-block-size: var(--_table-header-min-block-size);
  block-size: auto;
}

:where(.ds-table__table--native-group-sticky .ds-table__cell) {
  block-size: auto;
}

:where(.ds-table__header-cell + .ds-table__header-cell) {
  border-inline-start: 0;
}

:where(.ds-table__header-cell + .ds-table__header-cell)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  box-shadow: inset var(--dimension-stroke-width-012) 0 0 var(--_table-column-border);
  pointer-events: none;
}

:where(.ds-table__cell + .ds-table__cell) {
  --ds-interaction-group-divider-inline-start-width: var(--dimension-stroke-width-012);
  --ds-interaction-group-divider-inline-start-color: var(--_table-column-border);
}

:where(.ds-table__header-labels),
:where(.ds-table__header-static),
:where(.ds-table__header-label) {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-inline-size: 0;
  block-size: var(--dimension-size-200);
  padding: 0;
  color: inherit;
  text-align: inherit;
}

:where(.ds-table__header-labels) {
  flex: 0 1 auto;
}

:where(.ds-table__header-label) {
  flex: 0 1 auto;
  inline-size: fit-content;
  padding-inline: var(--dimension-space-025);
  color: var(--color-foreground-secondary);
}

:where(.ds-table__header-label[data-sort-active='true']) {
  color: var(--color-foreground-primary);
}

:where(.ds-table__header-label-box) {
  min-inline-size: 0;
  padding-inline: var(--dimension-space-025);
}

:where(.ds-table__header-label--interactive) {
  appearance: none;
  border: 0;
  border-radius: var(--dimension-radius-025);
  background: transparent;
  cursor: default;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  :where(.ds-table__header-label--interactive:hover) {
    color: var(--color-foreground-primary);
  }

}

:where(.ds-table__header-label--interactive:active) {
  color: var(--color-foreground-primary);
}

:where(.ds-table__header-label--interactive:focus-visible),
:where(.ds-table__header-labels[data-header-help]:focus-visible),
:where(.ds-table__selection-control:focus-visible) {
  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);
  outline-offset: calc(-1 * var(--dimension-stroke-width-025));
}

:where(.ds-table__header-content),
:where(.ds-table__header-labels),
:where(.ds-table__header-segment),
:where(.ds-table__sort-slot),
:where(.ds-table__collapse-slot),
:where(.ds-table__load-content) {
  display: inline-flex;
  align-items: center;
  min-inline-size: 0;
}

:where(.ds-table__header-content) {
  display: flex;
  inline-size: 100%;
  gap: var(--dimension-space-050);
}

:where(.ds-table__header-content--collapse-all) {
  justify-content: flex-end;
}

:where(.ds-table__header-labels) {
  max-inline-size: 100%;
  gap: var(--dimension-space-025);
}

:where(.ds-table__header-labels[data-header-help]) {
  border-radius: var(--dimension-radius-025);
  cursor: default;
  outline: none;
}

:where(.ds-table__header-segment) {
  flex: 0 1 auto;
  gap: var(--dimension-space-025);
}

:where(.ds-table__header-separator) {
  flex: 0 0 auto;
}

:where(.ds-table__sort-slot) {
  justify-content: center;
  flex: 0 0 auto;
  inline-size: var(--dimension-size-200);
  block-size: var(--dimension-size-200);
}

:where(.ds-table__collapse-slot) {
  justify-content: center;
  flex: 0 0 auto;
  inline-size: var(--dimension-size-300);
  block-size: var(--dimension-size-200);
  margin-inline-start: auto;
}

:where(.ds-table__collapse-all-overlay) {
  position: absolute;
  inset-block-start: calc(
    var(--ds-table-collapse-all-block-offset, 0px) + var(--dimension-space-100)
  );
  inset-inline-end: var(--dimension-space-100);
  z-index: var(--dimension-z-index-floating);
  box-sizing: border-box;
  display: flex;
  inline-size: var(--dimension-size-300);
  block-size: var(--dimension-size-200);
  pointer-events: none;
}

:where(.ds-table__collapse-all-surface) {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  block-size: 100%;
  padding: 0;
  border-radius: var(--dimension-radius-025);
  background: var(--_table-header-surface);
  pointer-events: auto;
}

:where(.ds-table__sort-slot) {
  margin-inline-start: auto;
}

:where(.ds-table__cell--align-center .ds-table__header-content) {
  justify-content: center;
}

:where(.ds-table__cell--align-center .ds-table__sort-slot),
:where(.ds-table__cell--align-end .ds-table__sort-slot) {
  margin-inline-start: 0;
}

:where(.ds-table__cell--align-end .ds-table__header-labels) {
  margin-inline-start: auto;
}

:where(.ds-table__cell-content),
:where(.ds-table__cell-copy) {
  display: flex;
  min-inline-size: 0;
  max-inline-size: 100%;
}

:where(.ds-table__cell-content) {
  align-items: flex-start;
  min-block-size: var(--_table-cell-track-min-block-size);
}

:where(.ds-table__cell-copy) {
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
}

:where(.ds-table__cell-track) {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-inline-size: 0;
  min-block-size: var(--_table-cell-track-min-block-size);
}

:where(.ds-table__cell-track--text) {
  inline-size: 100%;
  padding-inline: var(--_table-cell-track-padding-inline);
}

:where(.ds-table__cell--text-single .ds-table__cell-content),
:where(.ds-table__cell--text-multi .ds-table__cell-content),
:where(.ds-table__cell--text-triple .ds-table__cell-content),
:where(.ds-table__cell--primary-text .ds-table__cell-content),
:where(.ds-table__cell--empty .ds-table__cell-content),
:where(.ds-table__cell--blank .ds-table__cell-content),
:where(.ds-table__cell--text-single .ds-table__cell-track),
:where(.ds-table__cell--text-multi .ds-table__cell-track),
:where(.ds-table__cell--text-triple .ds-table__cell-track),
:where(.ds-table__cell--primary-text .ds-table__cell-track),
:where(.ds-table__cell--empty .ds-table__cell-track) {
  min-block-size: 0;
}

:where(.ds-table__cell--text-multi .ds-table__cell-copy),
:where(.ds-table__cell--text-triple .ds-table__cell-copy) {
  gap: var(--dimension-space-025);
}

/*
 * Body cells share 8px chrome. 20px content (body-medium text, md icon,
 * checkbox) sits in a 24px track (2px block inset). Text tracks keep that
 * 2px plus the 2px label inset, so padding-inline is 4px and copy lines up
 * with column-header labels. Later body-small tracks stay 20px, stacked with
 * a 2px gap. Wrapping 1-track primary folds that gap into line-height so
 * extra lines land on the same 62px and 84px rows as 2- and 3-track cells.
 * Wrapping secondary keeps primary on track 1 and consumes later tracks the
 * same way, including a 106px fourth track when secondary wraps to three lines.
 * Header and group rows keep their own recipes.
 */
:where(.ds-table__cell-primary),
:where(.ds-table__cell--empty .ds-table__cell-track) {
  padding-block: var(--dimension-space-025);
}

:where(.ds-table__cell--text-multi .ds-table__cell-secondary),
:where(.ds-table__cell--text-triple .ds-table__cell-secondary),
:where(.ds-table__cell--text-triple .ds-table__cell-tertiary) {
  padding-block: var(--dimension-space-025);
}

:where(.ds-table__cell--primary-text .ds-table__cell-secondary) {
  padding-block: 0;
}

:where(.ds-table__cell--tag-tag-only .ds-table__cell-content) {
  min-block-size: 0;
}

:where(.ds-table__cell-tag-stack) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  min-inline-size: 0;
  max-inline-size: 100%;
}

:where(.ds-table__cell-tag-text) {
  inline-size: 100%;
}

:where(.ds-table__cell-tag-stack--tag-with-text .ds-table__cell-tag-text) {
  padding-inline: var(--_table-cell-track-padding-inline);
  padding-block: var(--dimension-space-025);
  min-block-size: 0;
}

:where(.ds-table__cell-tag-stack--tag-with-text) {
  gap: var(--dimension-space-025);
}

:where(.ds-table__cell-tag-stack--text-with-tag .ds-table__cell-tag-text) {
  padding-inline: var(--_table-cell-track-padding-inline);
  padding-block: var(--dimension-space-025);
  min-block-size: 0;
}

:where(.ds-table__cell-tag-stack--text-with-tag) {
  gap: var(--dimension-space-025);
}

:where(.ds-table__cell-tag-control-track) {
  display: flex;
  align-items: center;
  min-block-size: var(--_table-cell-track-min-block-size);
}

:where(.ds-table__cell-tag-stack--text-with-tag .ds-table__cell-tag-control-track) {
  min-block-size: var(--dimension-size-250);
}

:where(.ds-table__cell--icon .ds-table__cell-content) {
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-block-size: var(--dimension-size-300);
}

/*
 * Icon-and-text: md prefix in a 24px slot (2px padding on every side), then a
 * 2px flex gap. Text tracks keep their own 4px inline and 2px block padding.
 */
:where(.ds-table__cell-icon-text) {
  display: flex;
  align-items: flex-start;
  gap: var(--dimension-space-025);
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
}

:where(.ds-table__cell-icon-text-icon) {
  box-sizing: border-box;
  display: flex;
  flex: none;
  align-items: flex-start;
  min-block-size: var(--_table-cell-track-min-block-size);
  padding: var(--dimension-space-025);
}

:where(.ds-table__cell--icon-text .ds-table__cell-content),
:where(.ds-table__cell--icon-text .ds-table__cell-track) {
  min-block-size: 0;
}

:where(.ds-table__cell--icon-text-multi .ds-table__cell-copy),
:where(.ds-table__cell--icon-text-triple .ds-table__cell-copy) {
  gap: var(--dimension-space-025);
}

:where(.ds-table__cell--icon-text-multi .ds-table__cell-secondary),
:where(.ds-table__cell--icon-text-triple .ds-table__cell-secondary),
:where(.ds-table__cell--icon-text-triple .ds-table__cell-tertiary) {
  padding-block: var(--dimension-space-025);
}

/*
 * Image previews fill the matching body-row content box (cell height minus
 * 8px padding) at 16:9. Track 1 is the 24px first-track stack; tracks 2 and
 * 3 add the same 20px later-track and 2px gap as text.
 */
:where(.ds-table__cell-image) {
  display: block;
  box-sizing: border-box;
  flex: none;
  block-size: var(--_table-image-block-size);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);
  border-radius: var(--dimension-radius-025);
}

:where(.ds-table__cell--image-multi .ds-table__cell-image) {
  block-size: var(--_table-image-block-size-multi);
}

:where(.ds-table__cell--image-triple .ds-table__cell-image) {
  block-size: var(--_table-image-block-size-triple);
}

:where(.ds-table__cell-image-content),
:where(.ds-table__cell-image-placeholder) {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

:where(.ds-table__cell-image-content) {
  object-fit: cover;
}

:where(.ds-table__cell--action .ds-table__cell-content) {
  min-block-size: var(--dimension-size-300);
}

:where(.ds-table__cell-primary),
:where(.ds-table__cell-secondary),
:where(.ds-table__cell-tertiary),
:where(.ds-table__cell-run),
:where(.ds-table__cell-link) {
  min-inline-size: 0;
}

:where(.ds-table__cell-track--runs) {
  overflow: hidden;
  gap: var(--dimension-space-050);
}

:where(.ds-table__cell-run-separator) {
  flex: none;
}

:where(.ds-table__cell-link) {
  display: flex;
  max-inline-size: 100%;
  inline-size: 100%;
}

:where(.ds-table__cell-copy--wrap) {
  overflow-wrap: anywhere;
}

/*
 * Wrapping tracks must be block boxes so ds-text line-clamp (a -webkit-box
 * inner) can grow onto later tracks. Flex + line-clamp otherwise collapses
 * to the 40px single-track row.
 */
:where(.ds-table__cell--text-wrap .ds-table__cell-track--text),
:where(.ds-table__cell--icon-text-wrap .ds-table__cell-track--text) {
  display: block;
}

:where(.ds-table__cell--text-wrap.ds-table__cell--text-single .ds-table__cell-primary),
:where(.ds-table__cell--text-wrap.ds-table__cell--text-multi .ds-table__cell-primary),
:where(.ds-table__cell--icon-text-wrap.ds-table__cell--icon-text-single .ds-table__cell-primary),
:where(.ds-table__cell--icon-text-wrap.ds-table__cell--icon-text-multi .ds-table__cell-primary) {
  line-height: var(--_table-wrap-primary-line-height);
  padding-block: var(--_table-wrap-primary-padding-block);
}

:where(.ds-table__cell--text-wrap.ds-table__cell--text-multi .ds-table__cell-copy),
:where(.ds-table__cell--icon-text-wrap.ds-table__cell--icon-text-multi .ds-table__cell-copy) {
  gap: 0;
}

:where(.ds-table__cell--text-wrap.ds-table__cell--text-multi .ds-table__cell-secondary),
:where(.ds-table__cell--icon-text-wrap.ds-table__cell--icon-text-multi .ds-table__cell-secondary) {
  line-height: var(--_table-wrap-secondary-line-height);
  padding-block: var(--_table-wrap-secondary-padding-block);
}

:where(.ds-table__cell--align-center),
:where(.ds-table__cell--align-center .ds-table__cell-content),
:where(.ds-table__cell--align-center .ds-table__cell-track),
:where(.ds-table__cell--align-center .ds-table__cell-link),
:where(.ds-table__cell--align-center .ds-table__header-static),
:where(.ds-table__cell--align-center .ds-table__header-labels),
:where(.ds-table__cell--align-center .ds-table__header-label) {
  text-align: center;
  justify-content: center;
}

:where(.ds-table__cell--align-end),
:where(.ds-table__cell--align-end .ds-table__cell-content),
:where(.ds-table__cell--align-end .ds-table__cell-track),
:where(.ds-table__cell--align-end .ds-table__cell-link),
:where(.ds-table__cell--align-end .ds-table__header-static),
:where(.ds-table__cell--align-end .ds-table__header-labels),
:where(.ds-table__cell--align-end .ds-table__header-label) {
  text-align: end;
  justify-content: flex-end;
}

:where(.ds-table__body) {
  background: var(--_table-surface);
}

:where(.ds-table__row) {
  min-block-size: var(--_table-row-min-block-size);
  background: var(--_table-surface);
}

:where(.ds-table__row > .ds-table__cell.ds-interaction-fill) {
  --ds-interaction-active: var(--_table-row-selected);
  --ds-interaction-group-fill: transparent;
}

@media (hover: hover) and (pointer: fine) {
  :where(.ds-table__row--interactive:hover > .ds-table__cell.ds-interaction-fill) {
    --ds-interaction-group-fill: var(--_table-row-hover);
  }
}

:where(.ds-table__row--interactive:active > .ds-table__cell.ds-interaction-fill) {
  --ds-interaction-group-fill: var(--_table-row-pressed);
}

:where(.ds-table__row--interactive:focus-visible) {
  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);
  outline-offset: calc(-1 * var(--dimension-stroke-width-025));
}

:where(.ds-table__row--disabled) {
  color: var(--color-foreground-tertiary);
  opacity: var(--effect-opacity-medium);
}

:where(.ds-table__selection-cell) {
  inline-size: var(--_table-selection-column-inline-size);
  width: var(--_table-selection-column-inline-size);
  max-inline-size: var(--_table-selection-column-inline-size);
  max-width: var(--_table-selection-column-inline-size);
  padding: 0;
  text-align: center;
}

:where(.ds-table__cell--sticky-start),
:where(.ds-table__cell--sticky-end) {
  --ds-interaction-position: sticky;
  --ds-interaction-z-index: 2;
  position: sticky;
  z-index: 2;
  background-color: var(--_table-surface);
}

:where(.ds-table__cell--sticky-start) {
  inset-inline-start: 0;
}

:where(.ds-table__cell--sticky-end) {
  inset-inline-end: 0;
}

:where(.ds-table__header-cell.ds-table__cell--sticky-start),
:where(.ds-table__header-cell.ds-table__cell--sticky-end) {
  z-index: 3;
  background-color: var(--_table-header-surface);
}

:where(.ds-table__sticky-header-table .ds-table__cell--sticky-start),
:where(.ds-table__sticky-header-table .ds-table__cell--sticky-end) {
  position: relative;
  inset-inline: auto;
  will-change: transform;
}

:where(.ds-table__selection-cell.ds-table__cell--sticky-start) {
  --ds-interaction-group-divider-inline-end-width: 0px;
}

:where(.ds-table__cell--sticky-start + .ds-table__cell) {
  --ds-interaction-group-divider-inline-start-width: 0px;
}

:where(.ds-table__cell--sticky-end) {
  --ds-interaction-group-divider-inline-start-width: 0px;
}

:where(.ds-table__header-cell.ds-table__cell--sticky-start + .ds-table__header-cell)::before,
:where(.ds-table__header-cell.ds-table__cell--sticky-end)::before {
  box-shadow: none;
}

:where(.ds-table__sticky-edge) {
  position: absolute;
  inset-block: 0 var(--dimension-stroke-width-012);
  z-index: 4;
  inline-size: var(--dimension-stroke-width-012);
  background: var(--_table-sticky-border);
  pointer-events: none;
}

:where(.ds-table__sticky-edge)::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inline-size: var(--dimension-space-100);
  pointer-events: none;
}

:where(.ds-table__sticky-edge--start) {
  inset-inline-end: 0;
}

:where(.ds-table__sticky-edge--start)::after {
  inset-inline-start: 100%;
}

:where(.ds-table__sticky-edge--end) {
  inset-inline-start: 0;
}

:where(.ds-table__sticky-edge--end)::after {
  inset-inline-end: 100%;
}

:where(.ds-table__frame--overflow-start .ds-table__sticky-edge--start)::after {
  box-shadow: var(--_table-sticky-start-shadow);
}

:where(.ds-table__frame--overflow-end .ds-table__sticky-edge--end)::after {
  box-shadow: var(--_table-sticky-end-shadow);
}

:where(.ds-table__cell.ds-table__selection-cell) {
  padding: var(--_table-cell-padding-block) var(--_table-cell-padding-inline);
}

:where(.ds-table__selection-control) {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: calc(
    var(--_table-header-min-block-size) - var(--dimension-stroke-width-012)
  );
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: default;
  outline: none;
}

:where(.ds-table__cell.ds-table__selection-cell .ds-table__selection-control) {
  inline-size: var(--dimension-size-300);
  min-block-size: var(--dimension-size-300);
  block-size: var(--dimension-size-300);
}

:where(.ds-table__selection-control:disabled) {
  cursor: default;
}

:where(.ds-table__selection-control:disabled ds-checkbox) {
  opacity: var(--effect-opacity-medium);
}

:where(.ds-table__group-cell) {
  /* Surface + chrome live on `.ds-table__group-content` (viewport-width). The
   * th only spans the table for row structure so body columns can scroll. */
  min-block-size: var(--_table-row-min-block-size);
  padding: 0;
  border-block-end: 0;
  background: transparent;
}

/* Each real section owns one sticky row and its own push-off boundary. */
:where(.ds-table--contained-sticky-header .ds-table__group-row--native-sticky) {
  position: sticky;
  inset-block-start: var(--_table-header-min-block-size);
  z-index: 5;
}

/* Intentful groups resolve from their faint signal into neutral at the trailing edge. */
:where(.ds-table__group-cell--intent-brand),
:where(.ds-table__group-cell--intent-negative),
:where(.ds-table__group-cell--intent-warning),
:where(.ds-table__group-cell--intent-caution),
:where(.ds-table__group-cell--intent-positive) {
  --_table-group-surface: linear-gradient(
    to right,
    var(--_table-group-intent-surface),
    var(--color-background-faint-neutral)
  );
}

:where(.ds-table__group-cell--intent-brand) {
  --_table-group-intent-surface: var(--color-background-faint-brand);
}

:where(.ds-table__group-cell--intent-neutral) {
  --_table-group-surface: var(--color-background-faint-neutral);
}

:where(.ds-table__group-cell--intent-negative) {
  --_table-group-intent-surface: var(--color-background-faint-negative);
}

:where(.ds-table__group-cell--intent-warning) {
  --_table-group-intent-surface: var(--color-background-faint-warning);
}

:where(.ds-table__group-cell--intent-caution) {
  --_table-group-intent-surface: var(--color-background-faint-caution);
}

:where(.ds-table__group-cell--intent-positive) {
  --_table-group-intent-surface: var(--color-background-faint-positive);
}

:where(.ds-table__group-content) {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--dimension-space-100);
  /* Use a measured length because WebKit expands min()/percentage widths to
   * the spanning table cell instead of honoring the visible scrollport. */
  inline-size: var(--ds-table-visible-inline-size, 100%);
  max-inline-size: var(--ds-table-visible-inline-size, 100%);
  min-block-size: var(--_table-row-min-block-size);
  padding: var(--dimension-space-100);
  border-block-end: 0;
  background: var(--_table-group-surface);
  background-clip: border-box;
}

:where(.ds-table__group-content)::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: var(--dimension-stroke-width-012);
  background: var(--_table-border);
  pointer-events: none;
}

/* A section header yields its divider only when no member or load row follows
 * it and the section itself is the table's final body. */
:where(.ds-table__group:last-child > .ds-table__group-row:last-child .ds-table__group-content)::after {
  display: none;
}

:where(.ds-table__table--selectable .ds-table__group-content),
:where(.ds-table__sticky-group--selectable .ds-table__group-content) {
  /* Selection lane is the real 40px column — don't add start pad or flex gap. */
  gap: 0;
  padding-inline-start: 0;
}

:where(.ds-table__group-selection) {
  /* 40px column (same as body), with a 24px-tall checkbox lane. */
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 var(--_table-selection-column-inline-size);
  align-items: center;
  justify-content: center;
  padding-block: var(--dimension-space-025);
  padding-inline: var(--dimension-space-050);
}

:where(.ds-table__group-selection .ds-table__selection-control) {
  inline-size: var(--dimension-iconography-md);
  min-block-size: var(--dimension-iconography-md);
  block-size: var(--dimension-iconography-md);
}

:where(.ds-table__group-copy) {
  /* The full-size sm count tag owns the 24px content height; inline padding
   * preserves the shared text track without making the 40px section row grow. */
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  min-inline-size: 0;
  flex: 1 1 auto;
  gap: var(--dimension-space-050);
  padding-block: 0;
  padding-inline: var(--dimension-space-050);
}

:where(.ds-table__table--selectable .ds-table__group-copy),
:where(.ds-table__sticky-group--selectable .ds-table__group-copy) {
  padding-inline-start: calc(
    var(--dimension-space-100) + var(--_table-cell-track-label-inset)
  );
}

:where(.ds-table__group-separator),
:where(.ds-table__group-count) {
  flex: 0 0 auto;
}

:where(.ds-table__group-toggle) {
  align-self: center;
  flex: 0 0 auto;
  margin-inline-start: auto;
}

:where(.ds-table__load-cell),
:where(.ds-table__state-cell) {
  padding: 0;
  background: var(--_table-surface);
  text-align: center;
}

:where(.ds-table__viewport-band) {
  position: sticky;
  inset-inline-start: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--ds-table-visible-inline-size, 100%);
  max-inline-size: var(--ds-table-visible-inline-size, 100%);
  padding: var(--dimension-space-200) var(--_table-cell-padding-inline);
  background: var(--_table-surface);
}

:where(.ds-table__load-content) {
  /* Match md ButtonUnfilled height so text-only / loading / button states share one box. */
  box-sizing: border-box;
  justify-content: center;
  gap: var(--dimension-space-100);
  min-block-size: var(--dimension-size-400);
}

:where(.ds-table__load-content--error) {
  flex-wrap: wrap;
  /* 16px between the icon/text cluster and the retry button. */
  gap: var(--dimension-space-200);
}

:where(.ds-table__load-copy) {
  display: inline-flex;
  align-items: center;
  gap: var(--dimension-space-100);
}

:where(.ds-table__auto-sentinel) {
  display: block;
  min-block-size: var(--dimension-space-025);
}

:where(.ds-table--state-fill .ds-table__table) {
  block-size: 100%;
}

:where(.ds-table--state-fill .ds-table__viewport) {
  min-block-size: var(--ds-table-max-block-size);
}

:where(.ds-table--state-fill .ds-table__state-body),
:where(.ds-table--state-fill .ds-table__state-row),
:where(.ds-table--state-fill .ds-table__state-cell) {
  block-size: 100%;
}

:where(.ds-table__state-cell) {
  min-block-size: calc(var(--dimension-size-800) * 2);
}

:where(.ds-table__state-band) {
  align-self: stretch;
  flex: 1 1 auto;
  min-block-size: calc(var(--dimension-size-800) * 2);
}

:where(.ds-table--state-fill .ds-table__state-band) {
  block-size: 100%;
  min-block-size: 100%;
}

:where(.ds-table__state-band) > ds-empty-state {
  flex: 1 1 auto;
  min-block-size: 0;
  inline-size: 100%;
  block-size: 100%;
}

:where(.ds-table__skeleton-row) {
  pointer-events: none;
}

:where(.ds-table__skeleton-image) {
  border: 0;
}

:where(.ds-table__skeleton-image-shape) {
  display: flex;
  inline-size: 100%;
  block-size: 100%;
  --ds-control-height: 100%;
}

:where(.ds-table__skeleton-row:last-child .ds-table__cell),
:where(.ds-table__load-body .ds-table__load-row:last-child .ds-table__load-cell),
:where(.ds-table__group:last-child > .ds-table__group-load-row:last-child .ds-table__load-cell),
:where(.ds-table__state-row:last-child .ds-table__state-cell),
:where(.ds-table__body:last-child .ds-table__row:last-child .ds-table__cell) {
  border-block-end: 0;
  --ds-interaction-group-divider-width: 0px;
}

:where(.ds-visually-hidden) {
  position: absolute;
  inline-size: var(--dimension-stroke-width-012);
  block-size: var(--dimension-stroke-width-012);
  padding: 0;
  margin: calc(-1 * var(--dimension-stroke-width-012));
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  :where(.ds-table__cell--sticky-start),
  :where(.ds-table__cell--sticky-end) {
    transition: none;
  }
}

@media (forced-colors: active) {
  :where(.ds-table) {
    --_table-surface: var(--ds-forced-color-surface);
    --_table-header-surface: var(--ds-forced-color-surface);
    --_table-group-surface: var(--ds-forced-color-surface);
    --_table-border: var(--ds-forced-color-control-boundary);
    --_table-column-border: var(--ds-forced-color-control-boundary);
    --_table-border-strong: var(--ds-forced-color-control-boundary);
    color: var(--ds-forced-color-content);
  }

  :where(.ds-table__frame--overflow-start .ds-table__sticky-edge--start)::after,
  :where(.ds-table__frame--overflow-end .ds-table__sticky-edge--end)::after {
    box-shadow: none;
  }

  :where(.ds-table__collapse-all-surface) {
    --ds-control-elevation-shadow: none;
    --ds-control-elevation-highlight: none;
    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-control-boundary);
    outline-offset: calc(-1 * var(--dimension-stroke-width-012));
    background: var(--ds-forced-color-surface);
  }

  :where(.ds-table__row--disabled) {
    color: var(--ds-forced-color-disabled);
    opacity: 1;
  }

  :where(.ds-table__selection-control:disabled ds-checkbox) {
    --ds-forced-color-content: var(--ds-forced-color-disabled);
    opacity: 1;
  }

  :where(.ds-table__header-label--interactive:focus-visible),
  :where(.ds-table__header-labels[data-header-help]:focus-visible),
  :where(.ds-table__selection-control:focus-visible),
  :where(.ds-table__viewport:focus-visible) {
    outline-color: var(--ds-forced-color-selected);
  }
}