//Tables

//
//@variables
//
@import "functions";

//General settings
$table-background-color: #FFF !default;
$table-margin-bottom: px-to-rems(20) !default;
$table-cell-padding: px-to-rems(10) !default;
$table-line-height: px-to-rems(18) !default;
$table-cell-alignment: left !default;
$table-border-color: #d2d2d2 !default;
$table-border-width: 1px !default;
$table-border-style: solid !default;
$table-color: #666 !default;
$table-font-weight: 300 !default;

$table-head-font-weight: 500 !default;
$table-head-letter-spacing: 1px !default;
$headers-with-uppercase: false !default;

//Variations
$table-condensed-padding: 0.28571429rem 0.35714286rem !default;
$table-striped-background-color: #f9f9f9 !default;
$table-bordered-border-width: 1px !default;
$table-bordered-border-style: solid !default;

//Media queries
$media-display: "only screen" !default;
$media-max-width: 768px !default; //~ 768px
$media-table-responsive-query: "#{$media-display} and (max-width: #{$media-max-width})" !default;

//Responsive tables
$include-responsive-tables: true !default;
$table-responsive-pinned-background: #FFF !default; 
$table-responsive-pinned-border-right: 1px solid #CCC !default;
$table-responsive-pinned-border-left: $table-responsive-pinned-border-right !default;
$table-responsive-wrapper-border-right: $table-responsive-pinned-border-right !default;

//Base table style
table {
  background-color: $table-background-color;
  margin-bottom: $table-margin-bottom;
  color: $table-color;
  font-weight: $table-font-weight;
  max-width: 100%;
  width: 100%;
  background-color: transparent;
  border-collapse: collapse;
  border-spacing: 0;
  border: none;

  thead {
      border-bottom: $table-border-width $table-border-style $table-border-color;
  }
  
  tr {
    //Cells
    th, td {
      border-top: $table-border-width $table-border-style $table-border-color;
      padding: $table-cell-padding;
      line-height: $table-line-height;
      text-align: $table-cell-alignment;
      vertical-align: top;
    }

    th {
      font-weight: $table-head-font-weight;
      letter-spacing: $table-head-letter-spacing;
      @if($headers-with-uppercase) {
        text-transform: uppercase;
      }
    }
  }

  thead tr th { vertical-align: bottom; }

  //Remove border top from thead
  thead:first-child tr:first-child th,
  thead:first-child tr:first-child td {
    border-top: 0;
  }

  //Table striped
  &.striped {
    tbody {
      > tr:nth-child(odd) > td,
      > tr:nth-child(odd) > th {
        background-color: $table-striped-background-color;
      }
    }
  }

  //Table bordered
  &.bordered {
    border: $table-bordered-border-width $table-bordered-border-style $table-border-color;

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

@if($include-responsive-tables) {
  //Responsive tables
  @media #{$media-table-responsive-query} {
    table.responsive { 
      margin-bottom: 0; 

      td, th { 
        position: relative; 
        white-space: nowrap; 
        overflow: hidden; 
      }

      th:first-child, 
      td:first-child, 
      &.pinned td { 
        display: none; 
      }
    }

    .pinned { 
      position: absolute; 
      left: 0; 
      top: 0; 
      background: $table-responsive-pinned-background; 
      width: 35%; 
      overflow: hidden; 
      overflow-x: scroll; 
      border-right: $table-responsive-pinned-border-right; 
      border-left: $table-responsive-pinned-border-left; 

      table {
        border-right: none; 
        border-left: none; 
        width: 100%;

        th,
        td {
          white-space: nowrap;
        }
      }

      td:last-child {
        border-bottom: 0;
      }
    }

    div.table-wrapper { 
      position: relative; 
      margin-bottom: 20px; 
      overflow: hidden; 
      border-right: $table-responsive-wrapper-border-right; 

      div.scrollable {
        margin-left: 35%;
        overflow: scroll;
        overflow-y: hidden;
      }
    }
  }
}