@import "base/variables"
@import "base/colors"
@import "base/text"
@import "base/fonts"

=rbbt_table()
  +normal
  min-width: span(1 of 3)
  max-width: 100%
  &:not([attr-filter])
    tbody:empty
      &:before
        content: "Empty table"
        width: 100%
        padding: $tile
        text-align: center
        display: inline-block
        +subtle_color
  &:not([attr-filter]) 
    tbody:empty ~ tfoot
      display: none

  caption
    margin-left: $padding_table
    text-align: left
    span
      +normal
      +compact
      +subtle_color

  border-collapse: collapse

  tbody, thead, tfoot
    & > tr:nth-child(2n)
      background-color: transparentize($table_color, 0.90)
    & > tr
      & > td, & > th
        margin: 0
        padding: rhythm(0.5)
        text-align: left
      & > th
        background-color: transparentize($table_color, 0.85)
        +noselect
 
  td, th
    vertical-align: center
    a
      white-space: nowrap

  &.wide
    td
      max-width: 200px
      overflow: hidden
      text-overflow: ellipsis
      @media #{$only-large}
        &:first-child
          max-width: 400px

  tfoot
    th
      padding: 0 !important
    ul.table_actions li
      margin-bottom: 0
      margin-left: $margin_table_actions
    ul.table_pagination, ul.table_actions
      +clean_list
      +flat_list
      +button_set
      display: flex
      li > .button, li.button, li
        min-width: 3em
        text-align: center
      float: left
      margin-right: 1em
      li.num.active, li.num.active > *
        text-decoration: underline

    ul.table_actions
      @media print
        &
          display: none

  &.sorted > thead > tr > th
    position: relative
    &, &:hover
      +down_cursor
      &.headerSortDown
        +up_cursor

    &.headerSortDown, &.headerSortUp
      +bold

    &.headerSortUp:after, &.headerSortDown:after
      content: " "
      float: right
      right: 0

    &.headerSortDown:after
      margin-top: 5px

    &.headerSortUp:after
      margin-bottom: 5px

=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

  & > thead, & > tbody
    & > tr
      & > th, & > td 
        margin: 0
        vertical-align: top
        height: 3em

      & > th
        display: block
        text-align: right

      & > td
        display: block
        text-align: left

  & > thead 
    display: block
    float: left
    max-width: 40%
    white-space: nowrap
    overflow: auto
    overflow-y: hidden
    & > tr 
      display: block
      & > th 
        text-align: left

  & > tfoot
    width: 100%
    & > tr > th
      padding: 0

  & > tbody 
    display: block
    width: auto
    position: relative
    overflow-x: auto
    white-space: nowrap
    & > tr 
      display: inline-block
      vertical-align: top
   
  /* sort out borders */

  & > thead, & > tbody, & > tfoot
    & > tr > th, & > tr > td
      border-left: 0
      border-right: 0
      border-bottom: 0

  & > tbody > tr 
    border-left: 1px solid $subtle_border