tableDividerColor       = #CECECE
tableBackgroundColor    = #FFF
tableDropShadowColor    = rgba(0,0,0,0.3)
tablePadding            = 32px
tableRowHeight          = 50px

//
// Tables:
// 'daisho-table-widget' - Daisho's Default Table Widget
//
//  @example
//  daisho-table-widget
//      .table-head
//          .table-row
//              div th1,1
//              div th2,1
//      .table-body
//          .table-row
//              div td1,1
//              div td2,1
//          .table-row
//              div td1,2
//              div td2,2
//

//
// Structural
//
daisho-table-widget
  display: table
  position: relative
  width: 100%

  .table-head
    display: table-header-group
    width: 100%

  .table-body
    display: table-row-group
    width: 100%

  .table-row
    display: table-row
    width: 100%

  .table-row > *
  .table-cell

    display: table-cell

//
// Theming
//
daisho-table-widget
  .table-row
  daisho-table-row
    height: tableRowHeight

    > *
      position: relative
      line-height: 3.8em

      &:first-child
        padding-left: tablePadding

      &:last-child
        padding-right: tablePadding

  .table-head
    .table-row
    daisho-table-row
      height: tableRowHeight + tablePadding
      > *
        padding-top: tablePadding

  .table-body
    &:before
      content: ''
      display: block
      position:absolute
      width: 100%
      top: tablePadding + tableRowHeight
      left: 0
      bottom: 0
      right: 0
      box-shadow: .1em .1em 1em tableDropShadowColor

    .table-row
    daisho-table-row

      &:first-child
        > *
          height: tableRowHeight + tablePadding
          padding-top: tablePadding

      &:last-child
        > *
          padding-bottom: tablePadding

          &:after
            border-bottom: 0

      > *
        background-color: tableBackgroundColor

        &:after
          content: ''
          display: block
          width: 100%
          height: 0
          position: absolute
          bottom: 0
          border-bottom: 1px solid tableDividerColor

        &:first-child:after
          left: tablePadding

        &:last-child:after
          right: tablePadding