@use "../variables";
@mixin tablecolor($color-bg) {
  background-color: variables.$white;
  color: variables.$white;
  border-color: var(--bs-table-border-color);
  --bs-table-bg: rgba(#{$color-bg}, 0.1);
  --bs-table-border-color: rgba(#{$color-bg}, 0.1);
  --bs-table-striped-bg: rgba(#{$color-bg}, 0.2);
  --bs-table-active-bg: rgba(#{$color-bg}, 0.2);
  --bs-table-hover-bg: rgba(#{$color-bg}, 0.2);

  & > :not(caption) > * > * {
    --bs-table-bg: rgba(#{$color-bg}, 0.1);
    color: variables.$black;
  }
  &.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--bs-table-accent-bg);
    --bs-table-accent-bg: rgba(#{$color-bg}, 0.2);
    color:  variables.$default-text-color;
  }
  &.table.table-hover > tbody > tr:hover > * {
    background-color: var(--bs-table-accent-bg);
    --bs-table-accent-bg: rgba(#{$color-bg}, 0.4);
    color: variables.$white;
  }
  .table-active {
    background-color: var(--bs-table-accent-bg);
    --bs-table-accent-bg: rgb(#{$color-bg});
    color: variables.$white;
  }
}
caption {
  color: variables.$text-muted;
  font-weight: 700;
}
@mixin tablehead($color-bg) {
  background-color: variables.$white;
  color: var(--bs-table-color);
  --bs-table-color: #{variables.$black} !important;
  --bs-table-bg: rgba(#{$color-bg}, 0.1) !important;
  --bs-table-border-color: rgba(#{$color-bg}, 0.1);
  --bs-table-striped-bg: rgba(#{$color-bg}, 0.5);
  --bs-table-striped-color: #{variables.$black};
  --bs-table-active-bg: rgba(#{$color-bg}, 0.5);
  --bs-table-hover-bg: rgba(#{$color-bg}, 0.5);
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
@mixin table-color($color-bg) {
  --bs-table-color: #{variables.$black};
  --bs-table-bg: rgba(#{$color-bg}, 0.1);
  --bs-table-border-color: rgba(#{$color-bg}, 0.1);
  --bs-table-striped-bg: rgba(#{$color-bg}, 0.3);
  --bs-table-striped-color: #{variables.$black};
  --bs-table-active-bg: rgba(#{$color-bg}, 0.3);
  --bs-table-active-color: #{variables.$black};
  --bs-table-hover-bg: rgba(#{$color-bg}, 0.3);
  --bs-table-hover-color: #{variables.$black};
  color: #{variables.$black};
  border-color: rgba(#{$color-bg}, 0.1);
  background-color: #{variables.$white};
}
.table {
  --bs-table-bg: var(--custom-white);
  color: variables.$default-text-color;
  border-color: variables.$default-border;
  margin-block-end: 0;
  tbody {
    tr {
      th {
        font-weight: 500;
      }
    }
  }
  th,
  td {
    padding: 1rem 1.25rem;
    vertical-align: middle;
    line-height: 1.462;
    font-size: 0.875rem;
    font-weight: 400;
  }
  thead tr th {
    font-weight: 500;
    font-size: 0.85rem;
  }
  &.table-sm > :not(caption) > * > * {
    padding: 0.3rem;
  }
  &.table-dark {
    color: variables.$white-7;
    border-color: rgba(variables.$white, 0.1);
  }
  &.table-primary {
    @include tablecolor(var(--primary-rgb));
  }
  &.table-secondary {
    @include tablecolor(var(--secondary-rgb));
  }
  &.table-warning {
    @include tablecolor(var(--warning-rgb));
  }
  &.table-success {
    @include tablecolor(var(--success-rgb));
  }
  &.table-danger {
    @include tablecolor(var(--danger-rgb));
  }
  &.table-info {
    @include tablecolor(var(--info-rgb));
  }
  &.table-light {
    @include tablecolor(var(--light-rgb));
  }
  &.table-dark {
    @include tablecolor(var(--dark-rgb));
  }
  &.table-bordered {
    &.border-primary {
      tbody,
      td,
      tfoot,
      th,
      thead,
      tr {
        border-color: rgba(var(--primary-rgb), 0.1);
      }
    }
    &.border-info {
      tbody,
      td,
      tfoot,
      th,
      thead,
      tr {
        border-color: rgba(var(--info-rgb), 0.1);
      }
    }
    &.border-secondary {
      tbody,
      td,
      tfoot,
      th,
      thead,
      tr {
        border-color: rgba(var(--secondary-rgb), 0.1);
      }
    }
    &.border-warning {
      tbody,
      td,
      tfoot,
      th,
      thead,
      tr {
        border-color: rgba(var(--warning-rgb), 0.1);
      }
    }
    &.border-success {
      tbody,
      td,
      tfoot,
      th,
      thead,
      tr {
        border-color: rgba(var(--success-rgb), 0.1);
      }
    }
    &.border-danger {
      tbody,
      td,
      tfoot,
      th,
      thead,
      tr {
        border-color: rgba(var(--danger-rgb), 0.1);
      }
    }
  }
  &.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(var(--light-rgb), 0.5);
    color: variables.$default-text-color;
    --bs-table-bg-type: rgba(var(--light-rgb), 0.5);
  }
  &.table-striped-columns > :not(caption) > tr > :nth-child(2n) {
    --bs-table-accent-bg: rgba(var(--dark-rgb), 0.025);
    color: variables.$default-text-color;
  }
  tbody.table-group-divider {
    border-top: 1px solid variables.$default-border;
  }
  &.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: #{variables.$default-background};
    --bs-table-bg-state: #{variables.$default-background};
    color: variables.$default-text-color;
  }
  .table-active {
    --bs-table-accent-bg: #{variables.$light};
    color: variables.$default-text-color;
    --bs-table-bg-state: #{variables.$light};
  }
  thead {
    &.table-primary {
      @include tablehead(var(--primary-rgb));
    }
    &.table-secondary {
      @include tablehead(var(--secondary-rgb));
    }
    &.table-warning {
      @include tablehead(var(--warning-rgb));
    }
    &.table-success {
      @include tablehead(var(--success-rgb));
    }
    &.table-danger {
      @include tablehead(var(--danger-rgb));
    }
    &.table-info {
      @include tablehead(var(--info-rgb));
    }
    &.table-light {
      background-color: variables.$white;
      color: var(--bs-table-color);
      --bs-table-color: #{variables.$black} !important;
      --bs-table-bg: rgba(var(--light-rgb), 1) !important;
      --bs-table-border-color: rgba(var(--light-rgb), 0.1);
      --bs-table-striped-bg: rgba(var(--light-rgb), 0.5);
      --bs-table-striped-color: #{variables.$black};
      --bs-table-active-bg: rgba(var(--light-rgb), 0.5);
      --bs-table-hover-bg: rgba(var(--light-rgb), 0.5);
      color: var(--bs-table-color);
      border-color: var(--bs-table-border-color);
    }
    &.table-dark {
      @include tablehead(var(--dark-rgb));
    }
  }
}
.table-primary {
  @include table-color(var(--primary-rgb));
}
.table-secondary {
  @include table-color(var(--secondary-rgb));
}
.table-warning {
  @include table-color(var(--warning-rgb));
}
.table-success {
  @include table-color(var(--success-rgb));
}
.table-info {
  @include table-color(var(--info-rgb));
}
.table-danger {
  @include table-color(var(--danger-rgb));
}
.table-dark {
  @include table-color(var(--dark-rgb));
}
.table-light {
  @include table-color(var(--light-rgb));
}
[data-theme-mode="dark"] {
  .table-dark {
    border-color: rgba(0, 0, 0, 0.025);
  }
  div.dtr-modal div.dtr-modal-display {
    background-color: variables.$custom-white;
  }
}

.table > :not(caption) > * > * {
  --bs-body-bg: var(--custom-white);
  // color: variables.$default-text-color;
  color: inherit;
}
.table-striped-columns>:not(caption)>tr>:nth-child(2n) {
  --bs-table-bg-type: rgba(var(--light-rgb), 0.5);
}

.table-light{
  tr{
    th{
      color:variables.$default-text-color !important;
    }
  }
}