/*Vocus table styles*/
/* 
@styleguide
@title Tables

<table class="table table-vocus">
  <thead>
    <tr>
      <th>Quote status</th>
      <th>Quote name / Date created</th>
      <th>Client</th>
      <th>Client / Reference no.</th>
      <th>Setup fee / Monthly fee</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <th scope="row"><i class="icon-tick"></i></th>
      <td><span class="table-info-bold">Tim's quote</span><br>Mar 9, 2015 | 2:25pm</td>
      <td>A1 Communications lorem ipsum lorem...</td>
      <td>VOC-QU12345678</td>
      <td>$9,999,999.00<br>$9,999,999.00</td>

      <td class="table-btn">
        <button type="button" class="btn btn-default btn-sm btn-icon">
          <i class="icon-download"></i>
        </button>

        <div class="dropdown dropdown-single">
          <button class="btn btn-sm dropdown-toggle blue" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          </button>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>
      </td>
    </tr>

    <tr>
      <th scope="row"><i class="icon-tick"></i></th>
      <td><span class="table-info-bold">Tim's quote</span><br>Mar 9, 2015 | 2:25pm</td>
      <td>A1 Communications lorem ipsum lorem...</td>
      <td>VOC-QU12345678</td>
      <td>$9,999,999.00<br>$9,999,999.00</td>

      <td class="table-btn">
        <button type="button" class="btn btn-default btn-sm btn-icon">
          <i class="icon-download"></i>
        </button>

        <div class="dropdown dropdown-single">
          <button class="btn btn-sm dropdown-toggle blue" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>
      </td>
    </tr>

  </tbody>
</table>
*/



/*Basic Bootstrap table*/


.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: $spacer;

  th,
  td {
    padding: $table-cell-padding;
    line-height: $line-height;
    vertical-align: top;
    border-top: $table-border-width solid $table-border-color;
  }

  thead th {
    vertical-align: bottom;
    border-bottom: (2 * $table-border-width) solid $table-border-color;
  }

  tbody + tbody {
    border-top: (2 * $table-border-width) solid $table-border-color;
  }

  .table {
    background-color: $body-bg;
  }
}





/*Vocus style*/

.table.table-vocus {
  width: 100%;
  max-width: 100%;
  margin-bottom: $spacer;
  font-family: $primaryfont;
  font-size: 0.875rem; 

  th,
  td {
    border: none;
  }

  thead th {
    border: none;

  }

  tbody + tbody {
    border: none;
  }

  thead{
    th{
      font-size: 0.6875rem;
      padding: calc($controlmargin / 4) $controlmargin;
      font-weight: normal;
    }
  }

  tbody{
    tr{
      background: $lightgrey;
      margin-bottom: calc($controlmargin / 2);
      border-bottom: calc($controlmargin / 2) solid $white;
      border-radius: $borderradius;

      th,
      td{
        padding: calc($controlmargin / 2) $controlmargin;
        vertical-align: middle;

        i{
          &.icon-tick{
            color: $blue;
          }

          &.icon-x{
            color: $red;
          }
        }
        
        .table-info-bold{
          font-family: $primaryfontbold;
          color: $primarycolour;
          font-size: 1rem;
        }


      }
    }
  }

  .table-btn{
    text-align: right;
  }

}






/*Condensed table w/ half padding*/


.table-sm {
  th,
  td {
    padding: $table-sm-cell-padding;
  }
}

/*Firefox and fieldsets
Firefox has some awkward fieldset styling involving width that interferes with the responsive table. This cannot be overridden without a Firefox-specific hack that we don’t provide in Bootstrap:*/
/*https://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685*/
@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}


/*Bordered version

Add borders all around the table and between all the columns.*/

.table-bordered {
  border: $table-border-width solid $table-border-color;

  th,
  td {
    border: $table-border-width solid $table-border-color;
  }

  thead {
    th,
    td {
      border-bottom-width: (2 * $table-border-width);
    }
  }
}


/*Zebra-striping

Default zebra-stripe styles (alternating gray and transparent backgrounds)*/

.table-striped {
  tbody tr:nth-of-type(odd) {
    background-color: $table-bg-accent;
  }
}


/*Hover effect

Placed here since it has to come after the potential zebra striping*/

.table-hover {
  tbody tr {
    @include hover {
      background-color: $table-bg-hover;
    }
  }
}


/*Table backgrounds

Exact selectors below required to override `.table-striped` and prevent
inheritance to nested tables.*/

/*Generate the contextual variants*/
@include table-row-variant(active, $table-bg-active);
@include table-row-variant(success, $state-success-bg);
@include table-row-variant(info, $state-info-bg);
@include table-row-variant(warning, $state-warning-bg);
@include table-row-variant(danger, $state-danger-bg);


/*Responsive tables

Wrap your tables in `.table-responsive` and we'll make them mobile friendly
By enabling horizontal scrolling. Only applies <768px. Everything above that
will display normally.*/

.table-responsive {
  display: block;
  width: 100%;
  min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
  overflow-x: auto;

  /*TODO: find out if we need this still.
  
  border: $table-border-width solid $table-border-color;
  -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057*/
}


.thead-inverse {
  th {
    color: #fff;
    background-color: $gray-dark;
  }
}
.thead-default {
  th {
    color: $gray;
    background-color: $gray-lighter;
  }
}

.table-inverse {
  color: $gray-lighter;
  background-color: $gray-dark;

  &.table-bordered {
    border: 0;
  }

  th,
  td,
  thead th {
    border-color: $gray;
  }
}


.table-reflow {
  thead {
    float: left;
  }

  tbody {
    display: block;
    white-space: nowrap;
  }

  th,
  td {
    border-top: $table-border-width solid $table-border-color;
    border-left: $table-border-width solid $table-border-color;

    &:last-child {
      border-right: $table-border-width solid $table-border-color;
    }
  }

  thead,
  tbody,
  tfoot {
    &:last-child {
      tr:last-child {
        th,
        td {
          border-bottom: $table-border-width solid $table-border-color;
        }
      }
    }
  }

  tr {
    float: left;

    th,
    td {
      display: block !important;
      border: $table-border-width solid $table-border-color;
    }
  }
}