@import '../bootstrap'
@import '../theme'

/* Theme */
v-table($material)
  background-color: $material.cards
  color: $material.text.primary

  thead
    tr
      &:first-child
        border-bottom: 1px solid rgba($material.fg-color, $material.divider-percent)

    th
      color: rgba($material.text-color, $material.secondary-text-percent)

  tbody
    tr
      &:not(:last-child)
        border-bottom: 1px solid rgba($material.fg-color, $material.divider-percent)

      &[active]
        background: $material.table.active

      &:hover:not(.v-datatable__expand-row)
        background: $material.table.hover

  tfoot
    tr
      border-top: 1px solid rgba($material.fg-color, $material.divider-percent)

theme(v-table, "v-table")

.v-table
  &__overflow
    width: 100%
    overflow-x: auto
    overflow-y: hidden

table.v-table
  border-radius: 2px
  border-collapse: collapse
  border-spacing: 0
  width: 100%
  max-width: 100%

  thead, tbody
    td, th
      &:not(:nth-child(1)), &:first-child
        padding: 0 24px

  thead
    tr
      height: 56px

    th
      font-weight: 500
      font-size: 12px
      transition: .3s $transition.swing
      white-space: nowrap
      user-select: none

      &.sortable
        pointer-events: auto

      > div
        width: 100%

  tbody
    tr
      transition: background $primary-transition
      will-change: background

    td, th
      height: 48px

    td
      font-weight: 400
      font-size: 13px

  .input-group--selection-controls
    padding: 0

    .input-group__details
      display: none

    &.checkbox
      .v-icon
        left: 50%
        transform: translateX(-50%)

      .input-group--selection-controls__ripple
        left: 50%
        transform: translate(-50%, -50%)

  tfoot
    tr
      height: 48px
      td
        padding: 0 24px