.bp-table,
.bp-table-chart table { /* Class for Google Charts' table */
  display: table;
  table-layout: fixed;
  border-spacing: 0;
  font-family: $bp-ff;
  color: $bp-table-color;
  background-color: $bp-table-bg-color;
  border: none;

  &--round {
    box-shadow: $bp-table-box-shadow;

    &.round-up {
      border-top-left-radius: $bp-table-border-radius;
      border-top-right-radius: $bp-table-border-radius;
      padding-top: 5px;
    }

    &.round-down {
      border-bottom-left-radius: $bp-table-border-radius;
      border-bottom-right-radius: $bp-table-border-radius;
      padding-bottom: 5px;
    }

    tr th, tr td {
      padding: 0.4*$m 0;
    }

    thead tr th {
      border-bottom: 0.2*$m solid $bp-color-wave;
      font-weight: 900;

      .arrows {
        display: inline-flex;
        flex-direction: column;
        height: 1.5*$m;
        justify-content: space-between;

        .arrow {
          height: 0.7*$m;
          border-radius: 2px;
          border-left: solid 0.3*$m transparent;
          border-right: solid 0.3*$m transparent;
          opacity: 0.4;

          &.arrow-up {
            border-bottom: solid 0.7*$m;
          }

          &.arrow-down {
            border-top: solid 0.7*$m;
          }

          &.sorted {
            opacity: 1;
          }
        }
      }
    }

    tbody tr.checked > * {
      background-color: $bp-color-wind;
    }

    .checkbox-container {
      width: 75px;
      min-width: 75px;
    }
  }

  cursor: default;

  .action-icon{
    //sum between left and right paddings and arrow icon size
    width: 27px;
  }

  thead {
    border-bottom: 0.2*$m solid $bp-table_head-border-color;

    tr {
      background-color: $bp-table_head-bg-color;
    }

    th {
      height: 6*$m;
      padding: $bp-table_th-padding;
      font-size: $bp-table_head-font-size;
      line-height: $bp-table_head-line-height;
      font-weight: $bp-table_head-font-weight;
      border: none;

      &:first-of-type {
        padding-left: $bp-table_edge-padding;
      }

      &:last-of-type {
        padding-right: $bp-table_edge-padding;
      }
    }
  }

  tbody {
    tr:nth-child(odd) {
      background-color: $bp-color-white;
    }

    tr:nth-child(even) {
      background-color: $bp-color-whisper;
    }

    .hasTableAction:hover{
      background-color: $bp-table_tr-hover;
    }

    .td-action-icon{
      padding: 0px 8px;
    
      img[icon-src="ArrowRight"] {
        vertical-align: middle;
        height: 11px;
      }
    } 
  
    td {
      height: 4.7*$m;
      padding: $bp-table_td-padding;
      font-size: $bp-table_body-font-size;
      line-height: $bp-table_body-line-height;
      font-weight: $bp-table_body-font-weight;
      border: none;
      
      &:first-of-type {
        padding-left: $bp-table_edge-padding;
      }

      &:not(.td-action-icon){
        &:last-of-type {
          padding-right: $bp-table_edge-padding;
        } 
      }         
    }
  }
}

.bp-table.bp-table--scroll-y,
.bp-table-chart.bp-table-chart--scroll-y table {
  display: flex;
  flex-direction: column;

  thead {
    flex: 0 0 auto;
    display: block;

    tr {
      width: calc(100% - 1.7*#{$m});
      margin-left: auto;
      margin-right: auto;
    }
  }

  tbody {
    flex: 1 1 auto;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    @include scrollbar($bp-color-time);

    tr {
      width: 100%;   
    }
  }

  thead tr,
  tbody tr {
    display: table;
    table-layout: fixed;
  }
}

.bp-table.bp-table-chart--sort, /* Class for sorting arrows of Google Charts' table */
.bp-table-chart.bp-table-chart--sort table {
  th {
    cursor: pointer;

    &:focus {
      outline: 0;
    }
  }
}

.bp-table-scroll-y-div {
  @include scrollbar($bp-color-wave);
  overflow-y: scroll;
  box-shadow: $bp-table-box-shadow;
  border-bottom-left-radius: $bp-table-border-radius;
  border-bottom-right-radius: $bp-table-border-radius;
}