@mixin table-color($color, $text: $white) {
  // border: 1px solid rgba($color, 0.3);
  tbody {
    background-color: $white;
    border-bottom: 1px solid $color;

    tr {
      &:hover {
        background-color: rgba($color, 0.3);
      }
    }
  }
}

.table {
  img {
    object-fit: contain;
  }

  thead th {
    vertical-align: middle;
    word-break: inherit;
    padding: 1rem 0.4rem;
    line-height: 1.2;
    min-width: 2.5em;
    font-size: 0.9rem;
  }

  &.th-center {
    thead th {
      text-align: center;
    }
  }

  tbody {
    td,
    th {
      word-break: break-word;
      padding: 0.4rem;
      min-width: 2em;
      vertical-align: middle;
    }

    tr {
      transition: background-color $trans;

      &:hover {
        background-color: rgba($black, 0.1);
      }
    }
  }

  .clearfix {
    display: block;
    color: $gray-600;
  }

  .order-block {
    display: inline-flex;
    justify-content: center;
    width: 100%;

    > form:not(:last-child) {
      margin-right: 0.5em;
    }

    .btn {
      min-width: 2em;
    }
  }

  &.table-sm {
    tbody {
      td,
      th {
        padding: 0 0.4rem;
      }
    }
  }
}

.table.datatables,
.table.table-striped {
  tbody {
    border-bottom: 1px solid $gray;
  }

  thead th {
    line-height: 1.2;
  }
}

.lightcolumn {
  &.table {
    td.highlight {
      background-color: rgba($black, 0.08) !important;
    }

    @each $key, $value in $colors_palette {
      &.table-#{"" + $key} {
        td.highlight {
          background-color: rgba($value, 0.08) !important;
        }
      }
    }

    &.table-white, &.table-gray {
      td.highlight {
        background-color: rgba($black, 0.08) !important;
      }
    }
  }
}

.table {
  &.table-primary {
    @include table-color($primary);
  }

  &.table-secondary {
    @include table-color($secondary);
  }

  &.table-success {
    @include table-color($success);
  }

  &.table-danger {
    @include table-color($danger);
  }

  &.table-warning {
    @include table-color($warning);
  }

  &.table-info {
    @include table-color($info);
  }

  &.table-red {
    @include table-color($red);

    thead {
      background-color: $red;
    }
  }

  &.table-black {
    @include table-color($black);

    thead {
      background-color: $black;
      color: $white;
    }
  }

  &.table-light {
    @include table-color($gray-100);

    thead {
      background-color: $gray-200;
    }

    tbody {
      tr:hover {
        background-color: rgba($gray-600, 0.3);
      }
    }
  }

  &.table-gray {
    @include table-color($gray);

    thead {
      background-color: $gray;
    }
  }
}
