table.search > tbody > tr.table-active {
  #actions {
    display: none;
  }
}

table.table-invoice > tbody > tr > td {
  overflow-wrap: anywhere;
}

.table.table-striped .d-md-table-row {
  &:not(.header):nth-of-type(2n+1) {
    --bs-table-accent-bg: var(--bs-table-striped-bg);
    color: var(--bs-table-striped-color);
  }
}

.table > [class^="d-"][class*="-table"] {
  [class^="d-"][class*="-table-row"]:first-child > div{
    border-bottom: 2px solid currentColor;
  }
}

[class^="d-"][class*="-table-row"] {
  &.header {
    font-weight: bolder;
  }
}

.z-table {
  width: 100%;
  margin-bottom: 1rem;
  vertical-align: top;
  border-color: var(--color-border) !important;
}

dialog .z-table {
  max-height: 80vh;
  -ms-overflow-style: none;
  overflow-y: auto;
}

dialog .z-table::-webkit-scrollbar {
  display: none;
}

@media (max-width: 767px) {
  .z-md-table {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacer) * 2);

    > :nth-child(even) {
      background-color: var(--color-bg) !important;
    }
  }
  .z-md-table-row {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacer) * 2);
    padding: var(--size-3);
    border-radius: var(--rounded-xs);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);

    &.header {
      display: none;
    }
  }
  .z-md-table-cell {
    display: flex;
    flex-direction: column;

    .header {
      font-weight: bolder;
    }

    * {
      text-align: revert !important;
    }
  }
}

@media (min-width: 768px) {
  .z-table {
    &.--card {
      border-radius: var(--rounded-xs);
      border-width: var(--border);
      border: var(--border) solid var(--color-border);
      padding: var(--size-3);
    }
  }

  .z-md-table {
    display: table;

    > .z-md-table-row {
      display: table-row;
    }

    > .z-md-table-row:nth-child(n + 3) .z-md-table-cell {
      border-top: 1px solid var(--color-border);
    }
  }

  .z-md-table-cell {
    display: table-cell;
    padding: 0.25rem 0.5rem;

    .header {
      display: none;
    }
  }
}

[class^="z-"][class*="-table-row"] {
  &.header {
    font-weight: bolder;
    background-color: var(--color-bg);
  }
}