.d-table-container {
  overflow-x: auto;
}

.d-table {
  width: 100%;
  border-spacing: 0;
  border-collapse: separate;
  font-family: var(--d-font-stacks);

  thead {
    th {
      text-align: left;
      padding: 16px;
      background-color: var(--d-color-neutral-05);
      align-items: center;
      color: var(--d-color-neutral-100);
      border-bottom: 2px solid var(--d-color-neutral-20);
      font-size: 16px;
      font-weight: 500;
      line-height: 24px;
      position: relative;
      width: 1%;
      white-space: nowrap;

      &.d-table-th-with-sorter {
        cursor: pointer;
        user-select: none;
      }
    }
  }

  tbody {
    td {
      text-align: left;
      background-color: var(--d-color-neutral-00);
      padding: 8px 16px;
      height: 56px;
      color: var(--d-color-neutral-80);
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      width: 1%;
      white-space: nowrap;
      border-bottom: 1px solid var(--d-color-neutral-20);
      // Backward compatibility for DOKU Currency
      border-top: 0;
    }

    tr:hover {
      td {
        background-color: var(--d-color-neutral-05);
      }
    }
  }
}

.d-table-sorter-icon {
  color: var(--d-color-neutral-50);
}

.d-table-body-custom-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60px 16px;
  position: sticky;
  left: 0;
}

tbody.d-table-body-no-data,
tbody.d-table-body-loading,
tbody.d-table-body-error {
  td {
    padding: 0;
  }
}

tbody.d-table-body-loading {
  .d-table-body-loading-wrapper {
    display: flex;
    align-items: center;
  }
}

// Sticky Column

.d-table thead th,
.d-table tbody td {
  $sticky-column-border: 2px solid var(--d-color-neutral-20);

  &.d-table-sticky-column-left {
    position: sticky;
    z-index: 1;
    left: 0;

    &.d-table-sticky-column-shadow::after {
      box-shadow: inset 10px 0 8px -8px var(--d-color-neutral-20);
      position: absolute;
      top: 0;
      right: 0;
      bottom: -1px;
      width: 30px;
      transform: translateX(100%);
      content: "";
      pointer-events: none;
    }
  }

  &.d-table-sticky-column-right {
    position: sticky;
    z-index: 1;
    right: 0;

    &.d-table-sticky-column-shadow::before {
      box-shadow: inset -10px 0 8px -8px var(--d-color-neutral-20);
      position: absolute;
      top: 0;
      left: 0;
      bottom: -1px;
      width: 30px;
      transform: translateX(-100%);
      content: "";
      pointer-events: none;
    }
  }
}

.d-table thead th {
  &.d-table-sticky-column-left::after {
    bottom: -2px;
  }
  &.d-table-sticky-column-right::before {
    bottom: -2px;
  }
}