// Imports
@import '../../styles/styles.sass'
@import './_variables.scss'

// Theme
+theme(v-data-table) using ($material)
  tbody
    tr
      &.v-data-table__selected
        background: map-deep-get($material, 'table', 'active')

  .v-row-group
    &__header, &__summary
      background: map-deep-get($material, 'table', 'group')

  .v-data-footer
    border-top: 1px solid rgba(map-get($material, 'fg-color'), map-get($material, 'divider-percent'))

  .v-data-table__empty-wrapper
    color: map-deep-get($material, 'text', 'disabled')

.v-data-table
  tbody
    tr
      &.v-data-table__expanded
        border-bottom: 0

      &.v-data-table__expanded__content
        box-shadow: inset 0px 4px 8px -5px rgba(50, 50, 50, 0.75), inset 0px -4px 8px -5px rgba(50, 50, 50, 0.75)

.v-data-table__empty-wrapper
  text-align: center

.v-data-table__mobile-row
  display: block

  &__wrapper
    height: 100%
    display: flex
    justify-content: space-between
    align-items: center

  &__header
    font-weight: 600

  &__cell
    text-align: right

.v-row-group
  &__header, &__summary

    td
      height: 35px

.v-data-table__expand-icon
  user-select: none
  cursor: pointer

  &--active
    transform: rotate(-180deg)