.table-header {
  background: $bg-light;
  font-size: 12px;
  padding-top: 1.5px;
  line-height: 18px;
  width: calc(100% - 8px);
  margin: 0 auto;
  transition: opacity .3s linear;
  border: 1px solid $color-ddd;
  border-radius: 1.5px 1.5px 0 0;

  .clickable {
    &:active {
      opacity: .7;
    }
  }

  div {
    background: none;
    text-align: left;
    padding: 0 4px;
    border-left: 1px solid $color-ddd;

    &:first-child {
      border-left: 0;
    }
  }

  i {
    float: right;
    position: relative;

    &.fa-sort-up {
      top: 3px;
    }
    &.fa-sort-down {
      bottom: 2px;
    }
  }

}

.table-row {
  line-height: 22.5px;
  padding: 0 5px;

  b {
    font-weight: 500;
  }
  &:nth-child(odd) {
    background: $bg-table-row;
  }

  &:focus, &:active, &.active {

    &:not(.disabled) {
      * {
        color: white;
      }
    }

    background: $bg-table-row-highlight;
  }

  i {
    color: $color-muted;
  }

  &.disabled {
    background: none;
    cursor: not-allowed;

    * {
      cursor: not-allowed;
      color: $color-muted;
    }

    &:active, &:hover, &.active, &:focus {
      cursor: not-allowed;
      * {
        cursor: not-allowed;
        color: $color-muted;
      }
    }
  }
}

.table-body {
  //(table - header - table-infos) to calculate height
  height: calc(100vh - 155px - 105px);
  overflow-x: hidden;
  padding-bottom: 20px;
  background: white;
  border-radius: 0 0 2px 2px;
  width: calc(100% - 8px);
  margin: 0 auto;
  border: 1px solid $color-ccc;
  border-top: 0;
  margin-bottom: 5px;

  &.freezed {
    cursor: wait;
    * {
      cursor: wait;
      pointer-events: none;
    }
  }
}

.table-loader {
  padding-top: 41vh;
  position: relative;
  margin-top: -30vh;
  z-index: 9;
  background: white;
  text-align: center;
  .table-loader-content {
    font-size: 12px;
    margin-top: 3vh;
    img {
      width: 17px;
      margin-right: 1px;
    }
  }
}

.table-row-loading,
.table-row-loading.active,
.table-row-loading.active:active,
.table-row-loading.active:focus {
  background: $bg-table-row-loading;
  animation: loadingStripes  1.2s linear infinite;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .03) inset;
}

.table-infos {
    background: $bg-light;
    max-height: 140px;
    padding: 0 5px 5px 5px;
    overflow-y: auto;
    font-size: 12px;
    color: $color-777;
    border: 1px solid $color-ccc;
    border-radius: 2px;
    width: calc(100% - 8px);
    margin: 0 auto;

  .information {
    margin-top: 2px;
    -webkit-user-select: text;

    b {
      font-weight: 500;
      font-size: 11.5px;
      color: $color-222;
    }
    a {
      color: $color-primary;

      &:hover {
        color: $color-primary;
        background: $bg-muted-invisible;
      }
    }
  }
}
