// COMPONENT VARIABLES
// -----------------------------------------------------------------------------

$cellPadding: 1em;
$tableBorderRadius: 5px;

/*==============================================================================
Tables

Markup:
<table class="{$modifiers}">
  <thead>
      <tr>
          <th> Table header </th>
          <th> Table header </th>
          <th> Table header </th>
      </tr>
  </thead>
  <tfoot>
      <tr>
          <td> Table footer </td>
          <td> Table footer </td>
          <td> Table footer </td>
      </tr>
  </tfoot>
  <tbody>
      <tr>
          <td> Table cell </td>
          <td> Table cell </td>
          <td> Table cell </td>
      </tr>
      <tr>
          <td> Table cell </td>
          <td> Table cell </td>
          <td> Table cell </td>
      </tr>
      <tr>
          <td> Table cell </td>
          <td> Table cell </td>
          <td> Table cell </td>
      </tr>
  </tbody>
</table>

#{$namespace}table - default
#{$namespace}table--border - border
#{$namespace}table--zebra - zebra
#{$namespace}table--condense - condense
#{$namespace}table--round - round
==============================================================================*/



table {
    @include rem(margin-bottom, $verticalspace);
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}



caption {
    @include rem(font-size, 14px);
    font-weight: bold;
    text-transform: uppercase;
    padding: $cellPadding;
}



th {
    font-weight: bold;
    background-color: lighten($theme-grey--medium, 20%);
}



th,
td {
    text-align: left;
    > :last-child,
    > :last-child > :last-child {
        margin-bottom: 0;
    }
    padding: $cellPadding/2 $cellPadding;
}



#{$namespace}table {
    @include rem(border, 1px, solid $theme-grey--medium);

    th,
    td {
        @include rem(border-right, 1px, solid $theme-grey--medium);
    }
}



#{$namespace}table--condense {
    th,
    td {
        padding: $cellPadding/4 $cellPadding/2;
    }
}



#{$namespace}table--border {
    th {
        @include rem(border, 1px, solid $theme-grey--medium);
    }

    td {
        @include rem(border, 1px, solid lighten($theme-grey--medium, 20%));
    }
}



#{$namespace}table--zebra {
    tr:nth-child(even) {
        background-color: darken($color-bg, 5%);
    }
}





/*==============================================================================
Column widths

Control the width of the table columns "total must be = 100%"
based on https//:github.com/csswizardry/inuit.css/blob/master/inuit.css/partials/base/_tables.scss#L88

Markup:
<table class="{$modifiers}">
  <colgroup>
      <col class="t5"/>
      <col class="t10"/>
      <col/>
  </colgroup>
  <thead>
      <tr>
          <th> Table header </th>
          <th> Table header </th>
          <th> Table header </th>
      </tr>
  </thead>
  <tfoot>
      <tr>
          <td> Table footer </td>
          <td> Table footer </td>
          <td> Table footer </td>
      </tr>
  </tfoot>
  <tbody>
      <tr>
          <td> Table cell </td>
          <td> Table cell </td>
          <td> Table cell </td>
      </tr>
      <tr>
          <td> Table cell </td>
          <td> Table cell </td>
          <td> Table cell </td>
      </tr>
      <tr>
          <td> Table cell </td>
          <td> Table cell </td>
          <td> Table cell </td>
      </tr>
  </tbody>
</table>


==============================================================================*/



.t5     { width: 5% }
.t10    { width:10% }
.t12    { width:12.5% }     // 1/8
.t15    { width:15% }
.t20    { width:20% }
.t25    { width:25% }       // 1/4
.t30    { width:30% }
.t33    { width:33.333% }   // 1/3
.t35    { width:35% }
.t37    { width:37.5% }     // 3/8
.t40    { width:40% }
.t45    { width:45% }
.t50    { width:50% }       // 1/2
.t55    { width:55% }
.t60    { width:60% }
.t62    { width:62.5% }     // 5/8
.t65    { width:65% }
.t66    { width:66.666% }   // 2/3
.t70    { width:70% }
.t75    { width:75% }       // 3/4
.t80    { width:80% }
.t85    { width:85% }
.t87    { width:87.5% }     // 7/8
.t90    { width:90% }
.t95    { width:95% }