.ds-data-table {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  display: grid;
  gap: var(--bh-space-xl-12);
  color: var(--bh-content-default);
  font-family: var(--bh-font-family);
  letter-spacing: 0;
}

.ds-data-table *,
.ds-data-table *::before,
.ds-data-table *::after {
  box-sizing: border-box;
}

.ds-data-table__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bh-space-3xl-16);
  flex-wrap: wrap;
}

.ds-data-table__heading {
  min-width: 0;
  flex: 1 1 var(--bh-space-19xl-384);
  display: grid;
  gap: var(--bh-space-xs-4);
}

.ds-data-table__heading h2,
.ds-data-table__heading p {
  margin: 0;
}

.ds-data-table__heading h2 {
  color: var(--bh-content-default);
  font-size: var(--bh-text-body-lg-semibold-font-size);
  font-weight: var(--bh-text-body-lg-semibold-font-weight);
  line-height: var(--bh-text-body-lg-semibold-line-height);
}

.ds-data-table__heading p {
  color: var(--bh-content-subtle);
  font-size: var(--bh-text-body-sm-regular-font-size);
  font-weight: var(--bh-text-body-sm-regular-font-weight);
  line-height: var(--bh-text-body-sm-regular-line-height);
}

.ds-data-table__actions,
.ds-data-table__state-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--bh-space-md-8);
  flex-wrap: wrap;
}

.ds-data-table__toolbar {
  min-width: 0;
  align-items: center;
}

.ds-data-table__toolbar [data-slot="toolbar-section"] {
  min-width: 0;
}

.ds-data-table__toolbar [data-slot="toolbar-search"] {
  flex: 1 1 var(--bh-space-19xl-384);
  min-width: var(--bh-space-16xl-256);
}

.ds-data-table__body {
  min-width: 0;
  display: grid;
}

.ds-data-table__state {
  min-height: var(--bh-space-12xl-128);
  display: grid;
  place-items: center;
  gap: var(--bh-space-xl-12);
  border: var(--bh-space-xxxs-1) solid var(--bh-border-subtle);
  border-top: 0;
  border-radius: 0 0 var(--bh-radius-lg-8) var(--bh-radius-lg-8);
  margin-top: calc(-1 * var(--bh-space-xxxs-1));
  background: var(--bh-bg-default);
  padding: var(--bh-space-6xl-32);
  text-align: center;
}

.ds-data-table__state-copy {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: var(--bh-space-xs-4);
  color: var(--bh-content-subtle);
}

.ds-data-table__state-copy strong {
  color: var(--bh-content-default);
  font-size: var(--bh-text-body-md-semibold-font-size);
  font-weight: var(--bh-text-body-md-semibold-font-weight);
  line-height: var(--bh-text-body-md-semibold-line-height);
}

.ds-data-table__state-copy p {
  max-width: var(--bh-space-19xl-384);
  margin: 0;
  color: var(--bh-content-subtle);
  font-size: var(--bh-text-body-sm-regular-font-size);
  line-height: var(--bh-text-body-sm-regular-line-height);
}

.ds-data-table__state--danger .ds-data-table__state-copy strong {
  color: var(--bh-content-danger-strong);
}

.ds-data-table__spinner {
  width: var(--bh-space-4xl-20);
  height: var(--bh-space-4xl-20);
}

.ds-data-table__footer {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bh-space-3xl-16);
  flex-wrap: wrap;
}

.ds-table-wrap {
  box-sizing: border-box;
  width: 100%;
  overflow: auto;
  border: var(--bh-space-xxxs-1) solid var(--bh-border-subtle);
  border-radius: var(--bh-radius-lg-8);
  background: var(--bh-bg-default);
  color: var(--bh-content-default);
  font-family: var(--bh-font-family);
  letter-spacing: 0;
}

.ds-table-wrap *,
.ds-table-wrap *::before,
.ds-table-wrap *::after {
  box-sizing: border-box;
}

.ds-table {
  width: 100%;
  min-width: var(--bh-table-min-width);
  border-collapse: collapse;
  table-layout: fixed;
}

.ds-table th {
  height: calc(var(--bh-space-7xl-40) + var(--bh-space-xs-4));
  background: var(--bh-bg-muted);
  color: var(--bh-content-subtle);
  font-size: var(--bh-text-body-xs-regular-font-size);
  font-weight: var(--bh-font-weight-semibold);
  line-height: var(--bh-text-body-sm-regular-line-height);
  text-align: start;
}

.ds-table td {
  height: var(--bh-space-8xl-48);
  border-top: var(--bh-space-xxxs-1) solid var(--bh-border-subtle);
  color: var(--bh-content-default);
  font-size: var(--bh-text-body-sm-regular-font-size);
  line-height: var(--bh-text-body-sm-regular-line-height);
}

.ds-table-wrap--lg .ds-table td {
  height: calc(var(--bh-space-8xl-48) + var(--bh-space-md-8));
}

.ds-table__cell {
  overflow: hidden;
  padding: 0 var(--bh-space-md-8);
  vertical-align: middle;
}

.ds-table__cell--fill {
  width: auto;
}

.ds-table__cell--selection,
.ds-table__cell--actions {
  text-align: center;
}

.ds-table__cell--center {
  text-align: center;
}

.ds-table__cell--end {
  text-align: end;
}

.ds-table__row:hover:not(.ds-table__row--disabled) {
  background: var(--bh-interactive-ghost-hover);
}

.ds-table__row--selected {
  background: var(--bh-bg-brand-soft);
}

.ds-table__row--disabled {
  color: var(--bh-content-muted);
  opacity: var(--bh-opacity-muted);
}

.ds-table__sort {
  width: 100%;
  min-height: var(--bh-space-6xl-32);
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--bh-space-xs-4);
  background: transparent;
  color: inherit;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.ds-table__sort svg {
  width: var(--bh-space-3xl-16);
  height: var(--bh-space-3xl-16);
  flex: 0 0 auto;
  color: var(--bh-content-muted);
}

.ds-table__sort--asc,
.ds-table__sort--desc {
  color: var(--bh-content-default);
}

.ds-table__sort--asc svg,
.ds-table__sort--desc svg {
  color: var(--bh-content-brand-default);
}

.ds-table__sort--static {
  cursor: default;
}

.ds-table__sort--static svg {
  color: var(--bh-content-muted);
}

.ds-table-checkbox {
  position: relative;
  width: calc(var(--bh-space-3xl-16) + var(--bh-space-xxs-2));
  height: calc(var(--bh-space-3xl-16) + var(--bh-space-xxs-2));
  display: inline-grid;
  place-items: center;
  color: var(--bh-content-on-brand);
}

.ds-table-checkbox input {
  position: absolute;
  inset: 0;
  width: calc(var(--bh-space-3xl-16) + var(--bh-space-xxs-2));
  height: calc(var(--bh-space-3xl-16) + var(--bh-space-xxs-2));
  margin: 0;
  opacity: var(--bh-opacity-0);
  cursor: pointer;
}

.ds-table-checkbox span {
  width: calc(var(--bh-space-3xl-16) + var(--bh-space-xxs-2));
  height: calc(var(--bh-space-3xl-16) + var(--bh-space-xxs-2));
  border: var(--bh-space-xxxs-1) solid var(--bh-border-default);
  border-radius: var(--bh-radius-sm-4);
  display: grid;
  place-items: center;
  background: var(--bh-bg-default);
}

.ds-table-checkbox svg {
  width: var(--bh-space-2xl-14);
  height: var(--bh-space-2xl-14);
  opacity: var(--bh-opacity-0);
}

.ds-table-checkbox input:checked + span,
.ds-table-checkbox input:indeterminate + span {
  border-color: var(--bh-border-brand-strong);
  background: var(--bh-bg-brand-default);
}

.ds-table-checkbox input:checked + span svg,
.ds-table-checkbox input:indeterminate + span svg {
  opacity: var(--bh-opacity-100);
}

.ds-table-checkbox input:focus-visible + span {
  outline: var(--bh-space-xxs-2) solid var(--bh-border-focus);
  outline-offset: var(--bh-space-xxs-2);
}

.ds-table-item-text,
.ds-table-avatar-text,
.ds-table-icon-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-table-item-text--subtle {
  color: var(--bh-content-subtle);
}

.ds-table-item-text--medium {
  font-weight: var(--bh-font-weight-semibold);
}

.ds-table-avatar-text,
.ds-table-icon-label {
  display: inline-flex;
  align-items: center;
  gap: var(--bh-space-md-8);
}

.ds-table-avatar-text > span:last-child {
  min-width: 0;
  display: grid;
  gap: var(--bh-space-xxxs-1);
}

.ds-table-avatar-text strong {
  overflow: hidden;
  font-size: var(--bh-text-body-sm-regular-font-size);
  font-weight: var(--bh-font-weight-semibold);
  line-height: var(--bh-text-body-sm-regular-line-height);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-table-avatar-text em {
  overflow: hidden;
  color: var(--bh-content-muted);
  font-size: var(--bh-text-body-2xs-regular-font-size);
  font-style: normal;
  line-height: var(--bh-text-body-2xs-regular-line-height);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-table-avatar {
  width: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
  height: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border-radius: var(--bh-radius-full);
  background: var(--bh-bg-brand-soft);
  color: var(--bh-content-brand-default);
  font-size: var(--bh-text-body-3xs-regular-font-size);
  font-weight: var(--bh-font-weight-bold);
}

img.ds-table-avatar {
  object-fit: cover;
}

.ds-table-badges,
.ds-table-tags,
.ds-table-action-group,
.ds-table-avatar-stack {
  display: inline-flex;
  align-items: center;
  gap: var(--bh-space-xs-4);
  max-width: 100%;
}

.ds-table-badge,
.ds-table-tags span {
  min-height: var(--bh-space-5xl-24);
  display: inline-flex;
  align-items: center;
  gap: calc(var(--bh-space-xs-4) + var(--bh-space-xxxs-1));
  border: var(--bh-space-xxxs-1) solid var(--bh-border-subtle);
  border-radius: var(--bh-radius-full);
  background: var(--bh-bg-default);
  color: var(--bh-content-subtle);
  padding: 0 var(--bh-space-md-8);
  font-size: var(--bh-text-body-3xs-regular-font-size);
  font-weight: var(--bh-font-weight-semibold);
  line-height: var(--bh-text-body-3xs-regular-line-height);
}

.ds-table-badge i {
  width: var(--bh-space-sm-6);
  height: var(--bh-space-sm-6);
  border-radius: var(--bh-radius-full);
  background: currentColor;
}

.ds-table-badge--blue {
  background: var(--bh-bg-brand-soft);
  color: var(--bh-content-brand-default);
}

.ds-table-badge--success {
  background: var(--bh-bg-success-subtle);
  color: var(--bh-content-success-default);
}

.ds-table-badge--amber {
  background: var(--bh-bg-warning-subtle);
  color: var(--bh-content-warning-strong);
}

.ds-table-badge--warning {
  background: var(--bh-bg-accent-amber-subtle);
  color: var(--bh-content-accent-amber-strong);
}

.ds-table-badge--danger {
  background: var(--bh-bg-danger-subtle);
  color: var(--bh-content-danger-strong);
}

.ds-table-badge--fuchsia {
  background: var(--bh-bg-accent-fuchsia-subtle);
  color: var(--bh-content-accent-fuchsia-strong);
}

.ds-table-badge--neutral {
  background: var(--bh-bg-neutral-subtle);
  color: var(--bh-content-subtle);
}

.ds-table-progress {
  min-width: var(--bh-table-selection-column-min-width);
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--bh-space-md-8);
}

.ds-table-progress > span {
  height: var(--bh-space-md-8);
  overflow: hidden;
  border-radius: var(--bh-radius-full);
  background: var(--bh-bg-muted);
}

.ds-table-progress i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--bh-content-success-default);
}

.ds-table-progress--brand i {
  background: var(--bh-bg-brand-default);
}

.ds-table-progress em {
  color: var(--bh-content-subtle);
  font-size: var(--bh-text-body-2xs-regular-font-size);
  font-style: normal;
  font-weight: var(--bh-font-weight-semibold);
}

.ds-table-toggle {
  width: calc(var(--bh-space-6xl-32) + var(--bh-space-xxs-2));
  height: var(--bh-space-4xl-20);
  border: 0;
  border-radius: var(--bh-radius-full);
  display: inline-flex;
  align-items: center;
  background: var(--bh-bg-neutral-soft);
  padding: var(--bh-space-xxs-2);
  cursor: pointer;
}

.ds-table-toggle span {
  width: var(--bh-space-3xl-16);
  height: var(--bh-space-3xl-16);
  display: block;
  border-radius: var(--bh-radius-full);
  background: var(--bh-bg-raised);
  transform: translateX(0);
  transition: transform var(--bh-duration-fast) var(--bh-easing-standard);
}

.ds-table-toggle[aria-pressed="true"] {
  background: var(--bh-bg-brand-default);
}

.ds-table-toggle[aria-pressed="true"] span {
  transform: translateX(var(--bh-space-2xl-14));
}

.ds-table-toggle:disabled {
  cursor: not-allowed;
  opacity: var(--bh-opacity-muted);
}

.ds-table-icon-button {
  width: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
  height: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
  border: 0;
  border-radius: var(--bh-control-default);
  display: inline-grid;
  place-items: center;
  background: transparent;
  color: var(--bh-content-subtle);
  padding: 0;
  cursor: pointer;
}

.ds-table-icon-button:hover {
  background: var(--bh-interactive-ghost-hover);
}

.ds-table-icon-button svg,
.ds-table-icon-label svg {
  width: var(--bh-space-4xl-20);
  height: var(--bh-space-4xl-20);
}

.ds-table-icon-label > span:first-child {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
}

.ds-table-icon-label > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-table-icon-label img {
  width: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
  height: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
  border-radius: var(--bh-radius-md-6);
  object-fit: cover;
}

.ds-table-brand-icon,
.ds-table-payment-icon {
  width: calc(var(--bh-space-4xl-20) + var(--bh-space-xxs-2));
  height: calc(var(--bh-space-4xl-20) + var(--bh-space-xxs-2));
  display: inline-block;
  border-radius: var(--bh-radius-md-6);
}

.ds-table-brand-icon {
  background: linear-gradient(135deg, var(--bh-bg-brand-default), var(--bh-bg-success-default));
}

.ds-table-payment-icon {
  background:
    radial-gradient(circle at 35% 50%, var(--bh-bg-warning-default) 0 37%, transparent 38%),
    radial-gradient(circle at 65% 50%, var(--bh-bg-accent-golden-default) 0 37%, transparent 38%);
}

.ds-table-rating {
  color: var(--bh-bg-neutral-medium);
  letter-spacing: var(--bh-space-xxxs-1);
}

.ds-table-rating .is-filled {
  color: var(--bh-bg-accent-golden-default);
}

.ds-table-avatar-stack .ds-table-avatar {
  margin-inline-end: calc(-1 * var(--bh-space-md-8));
  border: var(--bh-space-xxs-2) solid var(--bh-bg-raised);
}

.ds-table-avatar--count,
.ds-table-avatar-stack button {
  width: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
  height: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
  border: var(--bh-space-xxs-2) solid var(--bh-bg-raised);
  border-radius: var(--bh-radius-full);
  background: var(--bh-bg-muted);
  color: var(--bh-content-subtle);
  font-size: var(--bh-text-body-3xs-regular-font-size);
  font-weight: var(--bh-font-weight-bold);
}

.ds-table-wrap[dir="rtl"] {
  font-family: var(--bh-font-family);
}

.ds-table-wrap[dir="rtl"] .ds-table-progress i {
  margin-inline-start: auto;
}

.ds-table-wrap[dir="rtl"] .ds-table-toggle[aria-pressed="true"] span {
  transform: translateX(calc(-1 * var(--bh-space-2xl-14)));
}
