.table {
  &__row {
    display: table;
    width: 100%;
  }
  &__head {
    background-color: map-get($colored-table, 'header-bg');
    color: map-get($colored-table, 'header-color');
    font-weight: 700;
    i { margin-left: 5px; }
  }
  &__col {
    padding: 10px 4px 10px 5px;
    vertical-align: middle;
    word-wrap: break-word;
    word-break: break-word;
    line-height: 20px;
    display: table-cell;
    @include respond-from(sm) {
      padding: 10px 4px 10px 10px;
    }
  }
  &__head &__col.selected {
    background-color: map-get($colored-table, 'header-highlighted-bg');
    color: map-get($colored-table, 'header-highlighted-color');
  }
  &__body &__col.selected {
    background-color: map-get($colored-table, 'row-highlighted-bg');
    color: map-get($colored-table, 'row-highlighted-color');
  }
  &.clickable &__row { cursor: pointer; }
}

.table-striped {
  background-color: map-get($colored-table, 'row-bg');
  color: map-get($colored-table, 'row-color');
  .table__body {
    .table__row:nth-of-type(odd) {
      background-color: map-get($colored-table, 'row-odd-bg');
      color: map-get($colored-table, 'row-odd-color');
    }
    .table__row-holder:nth-of-type(even) .table__row {
      background-color: map-get($colored-table, 'row-bg');
      color: map-get($colored-table, 'row-color');
    }
  }
}
.table-striped.table-hover {
  background: map-get($colored-table, 'row-bg');
  color: map-get($colored-table, 'row-color');
  &.table__body {
    .table__row {
      &:hover .table__col[data-table-hover] {
        background: map-get($colored-table, 'row-hover-bg');
        color: map-get($colored-table, 'row-hover-color');
      }
      &.hovered .table__col[data-table-hover] {
        background: map-get($colored-table, 'row-hover-bg');
        color: map-get($colored-table, 'row-hover-color');
      }
    }
  }
}
.table__col[ng-click] { cursor: pointer; }

.is-not-touch-device .table-hover > .table__body .table__row:hover > .table__col,
.is-not-touch-device .table-hover > .table__body .table__row.hovered {
  background: map-get($colored-table, 'row-hover-bg');
  color: map-get($colored-table, 'row-hover-color');
  cursor: pointer;
}

.table-bordered {
  border-collapse: separate;
  border: 1px solid #B4B5B4;
  .table__col,
  .table__col {
    border: none;
    @include respond-from(xs) {
      border-left: 1px solid #B4B5B4;
      &:first-child { border: none; }
    }
  }
}
.table-schedule {
  .table__col,
  .table__col {
    border-left: 1px solid #B4B5B4;
    &:first-child { border: none; }
  }
}
@include respond-to(xs) {
  .table-bordered {
    border-left: 0;
    border-right: 0;
  }
}

@include respond-to(xs) {
  .rwd-table {
    display: block;
    min-width: 300px;
    .table__head { display: none; }
    & > .table__body { display: block; }
    & > .table__body .table__row {
      display: block;
      padding: 6px 0;
      position: relative;
      & > .table__col {
        display: block;
        line-height: 20px;
        overflow: hidden;
        padding: 0 10px;
        position: static;
        &.cell-truncate {
          @include text-truncate;
        }
        & > span {
          display: block;
          overflow: hidden;
        }
        &[data-th]:before {
          content: attr(data-th)": ";
          display: block;
          float: left;
          font-weight: bold;
          padding-right: 10px;
          width: 100px;
          @include respond-from(xs) {
            display: none;
          }
        }
      }
    }

    .table__col {
      text-align: left;
      @include respond-from(xs) {
        display: table-cell;
        padding: .25em .5em;
      }
    }
  }
  .rwd-table .table__col.hidden-xs-cell,
  .hidden-xs-cell { display: none; }
}

.sort-asc:after {
  content: '\25BC';
  padding-left: 5px;
}

.sort-desc:after {
  content: '\25B2';
  padding-left: 5px;
}
@include respond-from(xs) {
  .table-sorted {
    .table__head .table__col {
      cursor: pointer;
      &.sorted {
        background-color: map-get($colored-table, 'header-highlighted-bg');
        color: map-get($colored-table, 'header-highlighted-color');
        position: relative;
        &.asc,
        &.desc { padding-right: 22px; }
        &.asc:after,
        &.desc:after {
          border-style: solid;
          content: '';
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-50%);
        }
        &.asc:after {
          border-color: #303030 transparent transparent;
          border-width: 5px 5px 0;
        }
        &.desc:after {
          border-color: transparent transparent #303030;
          border-width: 0 5px 5px;
        }
      }
    }
    .table__body .table__col.sorted {
      background: map-get($colored-table, 'row-sorted-bg');
      color: map-get($colored-table, 'row-sorted-color');
    }
    &.table-striped {
      .table__body {
        .table__row:nth-of-type(odd) .table__col.sorted {
          background: map-get($colored-table, 'row-sorted-odd-bg');
          color: map-get($colored-table, 'row-sorted-odd-color');
        }
        .table__row-holder:nth-of-type(even) .table__row .table__col.sorted {
          background: map-get($colored-table, 'bg');
          color: map-get($colored-table, 'color');
        }
      }
    }
    &.table-striped.table-hover {
      .table__body {
        .table__row.hovered .table__col.sorted,
        .table__row:hover .table__col.sorted {
          background: map-get($colored-table, 'row-hover-bg');
          color: map-get($colored-table, 'row-hover-color');
        }
      }
    }
  }
}

.table-icon { color: #9493a1; }


.table-transferOfCare,
.table-records-editable {
  border-left: 0px !important;
  border-right: 0px !important;
  @include respond-from(xs) {
    border-top: 0px !important;
  }
  @include respond-to(xs) {
    .table__row { position: relative; }
    .table__body .table__col {
      padding-right: 48px !important;
    }
  }
  @include respond-from(xs) {
    .table__col.table__col-type {width: 21%;}
    .table__col.table__col-date {width: 21%;}
    .table__col.table__col-source {width: 18%;}
    .table__col.table__col-control {width: 54px;}
  }
}