$border-color-light: var(--theme-gray-lighter);
$border-color-dark: var(--theme-gray-lighter);

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-right: 1px solid $border-color-dark;
  border-bottom: 1px solid $border-color-dark;

  > * > tr,
  > tr {
    > * {
      padding: var(--gap-xs) var(--gap-sm);
      border-left: 1px solid $border-color-light;
      border-top: 1px solid $border-color-light;

      &:first-child {
        border-left: 1px solid $border-color-dark;
      }
    }

    &:first-child > * {
      border-top: 1px solid $border-color-dark;
    }
  }

  > tbody > tr,
  > tr {
    &:first-child {
      border-top: 1px solid $border-color-dark;
    }

    > th {
      background: var(--theme-gray-lightest);
    }

    > td {
      vertical-align: top;
    }
  }

  > thead > tr > th {
    background: var(--theme-gray-lightest);
  }

  &.table-inset {
    border-right: none;
    border-bottom: none;

    > * > tr,
    > tr {
      > *:first-child {
        border-left: none;
      }
    }

    > *:first-child > tr:first-child,
    > tr:first-child {
      > * {
        border-top: none;
      }
    }
  }

  &.table-inline {
    width: auto;
  }

  &.table-bd-v {
    border-bottom: none;

    > * > tr,
    > tr {
      > * {
        border-top: none;
      }
    }
  }

  &.table-bd-h {
    border-right: none;

    > tbody > tr,
    > tr {
      > td:first-child {
        border-left: none;
      }
    }

    > * > tr,
    > tr {
      > * {
        border-left: none;
      }
    }
  }
}