@use '../../styles/settings'
@use '../../styles/tools'
@use '../../components/VTable/variables' as *
@use './variables' as *
@use '../VTable/variables' as VTable

@include tools.layer('components')
  .v-data-table
    width: 100%

  .v-data-table__table
    width: 100%
    border-collapse: separate
    border-spacing: 0

  .v-data-table__tr
    &--focus
      border: 1px dotted black

    &--clickable
      cursor: pointer

  .v-data-table
    .v-table__wrapper
      > table
        > thead,
          tbody
          > tr
            > td,
              th

              &.v-data-table-column--align-end
                text-align: end

                .v-data-table-header__content
                  flex-direction: row-reverse

              &.v-data-table-column--align-center
                text-align: center

                .v-data-table-header__content
                  justify-content: center

              &.v-data-table-column--no-padding
                padding: 0 8px

              &.v-data-table-column--empty
                padding: 0

              &.v-data-table-column--nowrap
                text-overflow: ellipsis
                text-wrap: nowrap
                overflow: hidden

                & .v-data-table-header__content
                  display: contents

            > th
              align-items: center

            > th.v-data-table__th--fixed
              position: sticky

            > th.v-data-table__th--sortable:hover,
            > th.v-data-table__th--sortable:focus
                cursor: pointer
                color: tools.theme-color('on-surface', var(--v-high-emphasis-opacity))

            > th:not(.v-data-table__th--sorted)
                .v-data-table-header__sort-icon
                  opacity: $data-table-header-sort-icon-default-opacity

                &:hover,
                &:focus-visible
                  .v-data-table-header__sort-icon
                    opacity: $data-table-header-sort-icon-hover-opacity

            &.v-data-table__tr--mobile
              > td
                height: fit-content

  .v-data-table-column--fixed,
  .v-data-table-column--fixed-end,
  .v-data-table__th--sticky
    background-color: $table-background
    background-image: inherit
    left: 0
    z-index: 1

    @include tools.layer('overrides')
      // Beat out relative on table > tbody > tr > td
      // TODO: Use :where() for all those child combinators
      // @scope would probably be even better but
      // doesn't seem to be getting here any time soon
      position: sticky

  .v-data-table-column--fixed-end
    left: unset
    right: 0

  .v-data-table-column--last-fixed
    border-right: 1px solid rgba(var(--v-border-color), var(--v-border-opacity))

  .v-data-table-column--first-fixed-end
    border-left: 1px solid rgba(var(--v-border-color), var(--v-border-opacity))

  .v-data-table.v-table--fixed-header > .v-table__wrapper > table > thead > tr
    > th.v-data-table-column--fixed,
    > th.v-data-table-column--fixed-end
      z-index: 2

  .v-data-table-group-header-row
    td
      background: rgba(var(--v-theme-surface))
      color: rgba(var(--v-theme-on-surface))

      > span
        padding-left: 5px

  .v-data-table--loading
    &:not(.v-table--fixed-header) > .v-table__wrapper > table > thead,
    &:not(.v-table--fixed-footer) > .v-table__wrapper > table > tfoot,
    > .v-table__wrapper > table > tbody
      > tr > .v-data-table__td
        &:not(.v-data-table-column--fixed),
        &:not(.v-data-table-column--fixed-end)
          opacity: $data-table-loading-opacity

  @include tools.layer('overrides')
    // Again, needs to beat all the child combinators
    .v-data-table-group-header-row__column
      padding-inline-start: calc(var(--v-data-table-group-header-row-depth) * 16px)

  .v-data-table-header__content
    display: flex
    align-items: center

  .v-data-table-header__sort-icon
    margin-inline: $data-table-header-sort-icon-margin-inline

  .v-data-table-header__sort-badge
    display: inline-flex
    justify-content: center
    align-items: center
    font-size: 0.875rem
    padding: 4px
    border-radius: 50%
    background: $data-table-header-sort-badge-color
    min-width: $data-table-header-sort-badge-size
    min-height: $data-table-header-sort-badge-size
    width: $data-table-header-sort-badge-size
    height: $data-table-header-sort-badge-size

  @include tools.layer('overrides')
    .v-data-table-progress
      > th
        border: none
        height: auto
        padding: 0

  .v-data-table-progress__loader
    position: relative

  .v-data-table-rows-loading,
  .v-data-table-rows-no-data
    text-align: center

  .v-data-table__tr--mobile
    > .v-data-table__td--expanded-row
      grid-template-columns: auto
      justify-content: center

    > .v-data-table__td--select-row
      grid-template-columns: 0
      justify-content: end

    > td
      align-items: center
      column-gap: 4px
      display: grid
      grid-template-columns: repeat(2, 1fr)
      min-height: var(--v-table-row-height)

      @include tools.layer('overrides')
        &:not(:last-child)
          border-bottom: 0

  .v-data-table__td-title
    font-weight: VTable.$table-header-font-weight
    text-align: start

  .v-data-table__td-value
    text-align: end

  .v-data-table__td
    &-sort-icon
      color: $data-table-header-mobile-chip-icon-color

      &-active
        color: $data-table-header-mobile-chip-icon-color-active