$triglecolor: rgba(0,0,0,0.15)
$margin_table_actions: 7px
$padding_table: 5px 7px
$color_table_border: darken($table_color, 45)

=rbbt_table()
  min-width: 300px

  caption
    text-align: left
    span
      color: #999
    //margin-bottom: $vindent / 2

  background-color: lighten($table_color, 5)
  border: 1px solid $color_table_border
  padding: $padding_table
  font-size: 14px
  margin: $vindent 0
  border-collapse: collapse
 
  td, th
    padding: $padding_table 
    margin: 0
    text-align: left
    vertical-align: center

  tr:nth-child(2n)
    background-color: lighten($table_color, 2)
 
  th
    background-color: darken($table_color, 10)

  &.wide
    td
      max-width: 200px
      overflow: hidden
      text-overflow: ellipsis

  tfoot
    th
      background-color: lighten($table_color, 5)
    ul.table_actions li
      margin-left: $margin_table_actions
    ul.table_pagination
      +clean_list
      margin-bottom: 0
      float: left
      margin-right: $indent
      li
        margin-left: $margin_table_actions
        &.active a
          text-decoration: underline


    ul.table_actions
      +clean_list
      margin-bottom: 0
      float: left
      li.filter
      @media print
        &
          display: none

    
  &.sorted
    thead
      tr
        th
          position: relative

          &:hover 
            cursor: pointer

          &.headerSortUp:after, &.headerSortDown:after
            content: " "
            float: right
            right: 0
 
          &.headerSortDown:after
            margin-top: 5px
            @include css-triangle(5px, $triglecolor, top)

          &.headerSortUp:after
            margin-bottom: 5px
            @include css-triangle(5px, $triglecolor, bottom)

=table_column_selector
  li
    @include grid-row()

    span
      @include ellipsis_text()
      @include grid-column(8)
    a
      @include grid-column(2, $last-column:false)

=responsive_table()
  caption
    display: block
  display: block
  position: relative
  width: 100%
  border-collapse: collapse
  border-spacing: 0
  th, td 
    margin: 0
    vertical-align: top
    height: 2em

  th 
    text-align: left

  thead 
    display: block
    float: left
    max-width: 40%
    white-space: nowrap
    overflow: auto
    overflow-y: hidden

  tfoot
    width: 100%

  tbody 
    display: block
    width: auto
    position: relative
    overflow-x: auto
    white-space: nowrap
   

  thead tr 
    display: block
   

  th 
    display: block
    text-align: right
   

  tbody tr 
    display: inline-block
    vertical-align: top
   

  td 
    display: block
    min-height: 1.25em
    text-align: left
 
  /* sort out borders */

  th 
    border-bottom: 0
    border-left: 0
   

  td 
    border-left: 0
    border-right: 0
    border-bottom: 0
   

  tbody tr 
    border-left: 1px solid #babcbf
   

  //th:last-child, td:last-child 
  //tfoot
    border: 2px solid #babcbf
    border-top: 1px solid #babcbf