/* Tables - Bootstrap Compatible */

.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: var(--gutter-y);
  background-color: transparent;
  border-spacing: 0;
  border-collapse: collapse;

  td, th {
    padding: .5em ~"calc(var(--gutter-x) / 2)";
    line-height: var(--default-line-height);
    &:first-child {
      padding-inline-start: var(--gutter-x);
    }
    &:last-child {
      padding-inline-end: var(--gutter-x);
    }
  }

  > * > tr > td,
  > * > tr > th {
    padding: 6px 12px;
    line-height: var(--default-line-height);
    vertical-align: top;

    &.border-top {
      border-top: 1px solid var(--default-border-color);
    }
    &.border-left {
      border-left: 1px solid var(--default-border-color);
    }
    &.border-right {
      border-right: 1px solid var(--default-border-color);
    }
    &.border-bottom {
      border-bottom: 1px solid var(--default-border-color);
    }

    @media print {
      &.border-top, &.border-left, &.border-right, &.border-bottom {
        border-color: #000 !important;
      }
    }
  }

  > thead > tr > th {
    padding: 12px;
    text-align: start;
    vertical-align: bottom;
    border-bottom: 2px solid var(--default-border-color);
    @media print {
      border-color: #000 !important;
    }
    &.main {
      width: 100%;
    }
  }

  > tfoot {
    padding: 6px 12px;
    text-align: start;
    border-top: 1px solid var(--default-border-color);
    @media print {
      border-color: #000 !important;
    }
  }

  &.table-bordered {
    border: 1px solid var(--default-border-color);
    > * > tr > td {
      border-top: 1px solid var(--default-border-color);
      @media print {
        border-color: #000 !important;
      }
    }
  }

  &.table-striped {
    > tbody > tr:nth-of-type(odd) {
      background: var(--table-striped-row-background-odd);
    }
    > tbody > tr:nth-of-type(even) {
      background: var(--table-striped-row-background-even);
    }
    @media print {
      > tbody > tr {
        border-bottom: 1px solid #000;
      }
    }
  }

  &.table-hover {
    > tbody > tr {
      transition: background 125ms linear;
      &:hover {
        background: var(--table-row-hover-background);
      }
    }
  }

  &.data-table {
    white-space: nowrap;
  }
}

.table-responsive {
  overflow-x: auto;
  > .table {
    margin-bottom: 0;
  }
}

.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
  border-top: 0;
}
