@use '../../styles/tools'
@use '../../styles/settings'
@use './variables' as *
@use './mixins' as *

@include tools.layer('components')
  // Theme
  .v-table
    font-size: $table-font-size
    transition-duration: $table-transition-duration
    transition-property: $table-transition-property
    transition-timing-function: $table-transition-timing-function
    @include tools.theme($table-theme...)

    .v-table-divider
      border-right: $table-border

    .v-table__wrapper
      > table
        > thead
          > tr
            > th
              border-bottom: $table-border

        > tbody
          > tr
            &:not(:last-child)
              > td,
              > th
                border-bottom: $table-border

        > tfoot
          > tr
              > td,
              > th
                border-top: $table-border


    &.v-table--hover
      > .v-table__wrapper
        > table
          > tbody
            > tr
              > td
                position: relative

              &:hover > td::after
                background: $table-hover-color
                pointer-events: none
                @include tools.absolute(true)

    &.v-table--striped-even
      > .v-table__wrapper
        > table
          > tbody
            > tr:nth-child(even)
              background-image: linear-gradient(0deg, $table-stripe-color, $table-stripe-color)

    &.v-table--striped-odd
      > .v-table__wrapper
        > table
          > tbody
            > tr:nth-child(odd)
              background-image: linear-gradient(0deg, $table-stripe-color, $table-stripe-color)

    &.v-table--fixed-header
      > .v-table__wrapper
        > table
          > thead
            > tr
              > th
                background: $table-background
                box-shadow: inset 0 -1px 0 $table-border-color
                z-index: 1

    &.v-table--fixed-footer
      > tfoot
        > tr
          > th,
          > td
            background: $table-background
            box-shadow: inset 0 1px 0 $table-border-color

  // Block
  .v-table
    border-radius: inherit
    // Do not inherit line-height
    line-height: $table-line-height
    max-width: 100%
    display: flex
    flex-direction: column

    > .v-table__wrapper
      > table
        width: 100%
        border-spacing: 0

        > tbody,
        > thead,
        > tfoot
          > tr
            > td,
            > th
              padding: $table-column-padding
              transition-duration: $table-transition-duration
              transition-property: $table-transition-property
              transition-timing-function: $table-transition-timing-function

            > td
              height: var(--v-table-row-height)

            > th
              height: var(--v-table-header-height)
              font-weight: $table-header-font-weight
              font-size: $table-header-font-size
              user-select: none
              text-align: start

    @at-root
      @include tools.density('v-table', $table-density) using ($modifier)
        --v-table-header-height: #{$table-header-height + $modifier}
        --v-table-row-height: #{$table-row-height + $modifier}

  // Elements
  .v-table__wrapper
    border-radius: inherit
    overflow: auto
    flex: 1 1 auto

  // Modifiers
  .v-table--has-top
    > .v-table__wrapper
      border-top-left-radius: 0
      border-top-right-radius: 0

  .v-table--has-bottom
    > .v-table__wrapper
      border-bottom-left-radius: 0
      border-bottom-right-radius: 0

  .v-table--fixed-height
    > .v-table__wrapper
      overflow-y: auto

  .v-table--fixed-header
    > .v-table__wrapper
      > table
        > thead
          position: sticky
          top: 0
          z-index: 2
          > tr
            > th
              @include tools.layer('overrides')
                border-bottom: 0px

  .v-table--fixed-footer
    > .v-table__wrapper
      > table
        > tfoot
          > tr
            position: sticky
            bottom: 0
            z-index: 1
            > td,
            > th
              @include tools.layer('overrides')
                border-top: 0px