@import variables
@import mixins

table
  width: 100%
  border-collapse: collapse
  border-spacing: 0
  margin-bottom: 20px

  &.table-fixed
    table-layout: fixed
    white-space: nowrap
    th
      overflow: hidden
    td
      white-space: nowrap
      overflow: hidden
      text-overflow: ellipsis

  &.table-small
    font-size: size('small')

  &.table-striped tr:nth-child(odd)
    background: bg-color('lighter')

  &.table-scrolling
    @include sm-device
      overflow-x: auto
      display: inline-block
      vertical-align: top
      max-width: 100%
      white-space: nowrap

  th
    text-align: left
    padding: 0.5em 3px
    border: 1px solid #eee
    background: bg-color('primary')

    a
      text-decoration: none
      color: color('primary')
      &:focus, &:hover
        text-decoration: underline

  td
    border: 1px solid #eee
    padding: 0.5em 3px
    vertical-align: top

    li
      margin-left: 20px

@include col-x(100)