// Copyright (C) 2019-2021 Estonian Information System Authority.
// See the file 'LICENSE' for copying permission.
.table
  width: 100%
  border-collapse: collapse

  &.has-border
    & > tbody > tr > td
      border-bottom: 1px solid $border
      +dark-mode
        border-color: $border-dark

  &.has-layout-fixed
    table-layout: fixed

  // shared styles for cells and column headers
  th, td
    padding: $gap
    &.is-auto-width,
    &.is-datetime
      min-width: 1px
      white-space: nowrap
    &.is-mini
      width: 4rem
    &.is-small
      width: 7.5rem
    &.is-medium
      width: 15rem
    &.is-nowrap
      white-space: nowrap
    &.is-break
      word-wrap: break-word
      word-break: break-all
      min-width: 10rem
    &.is-vtop
      vertical-align: top
    &.is-vbottom
      vertical-align: bottom
    &.has-ellipsis
      white-space: nowrap
      overflow: hidden
      max-width: 20rem
      text-overflow: ellipsis
    &:not(.has-text-right):not(.has-text-center)
      text-align: left
    a
      color: inherit
      text-decoration: none

  // table cell (heading) styles, including support for sorting indication
  thead th,
  tfoot td
    font-size: .9em
    font-weight: 500
    background-color: $white
    box-shadow: inset 0 -1px 0 $border

    +dark-mode
      background-color: $dark
      box-shadow: inset 0 -1px 0 $border-dark

    // implements a sorting icon. These styles follow this html:
    // <th class="has-sort {is-asc, is-desc}"><a>Table column</a></th>
    // 1. use no is-* class to display indeterminate sorting state
    // 2. use is-asc class to display ascending sorting state
    // 3. use is-desc to display descending sorting state
    // * in .is-dark modifier on the table head, these icons will be light instead of dark
    &.has-sort
      a
        text-decoration: none
        display: flex
        &:after
          content: ""
          display: table-cell
          border-style: solid
          border-width: 0
          align-self: center
          width: .5rem
          height: .1rem
          background-color: $dark
          margin-left: auto
      &.is-asc a:after,
      &.is-desc a:after
        width: 0
        height: 0
        background-color: transparent
      &.is-asc a:after
        border-width: 0 3.5px 6px 3.5px
        border-color: transparent transparent $dark transparent
      &.is-desc a:after
        border-width: 6px 3.5px 0 3.5px
        border-color: $dark transparent transparent transparent

  // table-cell styles
  td
    font-size: .8em

    .table
      font-size: 1.2em

  // table header styles
  thead
    tr
      background-color: $white
      color: $dark
      +dark-mode
        th
          background-color: shade($dark, .8)
          color: $white
    &.is-dark
      tr
        color: $white
      th,
      td
        background-color: $dark
        box-shadow: inset 0 -1px 0 shade($dark, .5)

        +dark-mode
          background-color: shade($dark, .5)

        &.has-sort
          a:after
            background-color: $white
          &.is-asc a:after,
          &.is-desc a:after
            background-color: transparent
          &.is-asc a:after
            border-color: transparent transparent $white transparent
          &.is-desc a:after
            border-color: $white transparent transparent transparent

  tfoot
    tr td
      box-shadow: inset 0 1px 0 $border
      background-color: $light-matte

      +dark-mode
        box-shadow: inset 0 1px 0 $border-dark
        background-color: shade($dark, .5)

  // tbody-specific styles
  &.has-striped-rows
    & > tbody
      & > tr
        &.has-background-red
          background-color: $red
          color: $white
          &:hover
            background-color: shade($red, .1)

  // in some cases, the default odd/even rules won't work, for example when there
  // are multiple 'skippable' rows. These supporting classes can be used to 'force'
  // an odd even style by applying the styles manually
  tr.is-odd-row,
  &.has-striped-rows > tbody > tr:nth-child(odd):not([class^="separator"])
    background-color: $row-odd
    +dark-mode
      background-color: $row-odd-dark

  tr.is-even-row,
  &.has-striped-rows > tbody > tr:nth-child(even):not([class^="separator"])
    background-color: $row-even
    +dark-mode
      background-color: $row-even-dark

  tr.is-shown
    background-color: $blue !important
    color: $white
    a, .is-link
      color: inherit
    td
      background-color: transparent
      font-weight: 700

  tr.is-odd-row:hover,
  tr.is-even-row:hover
    background-color: mix($row-even, $yellow, 95%)

    +dark-mode
      background-color: mix($row-even-dark, $yellow, 95%)

  tr.separator
    background-color: $white
    font-size: .9em
    font-weight: 800
    text-transform: uppercase
    border-top: 0.0625rem solid $border
    border-bottom: 0.0625rem solid $border
    text-align: center

    &-bar
      td
        background-image: linear-gradient(white, $border)
        padding: $gap/2 $gap

    &.is-beveled
      background: linear-gradient(180deg, #EEEEEE 23.44%, tint($blue, .9) 100%)
      text-shadow: 0 0.0625rem 0 rgba($white, 1)

    &.has-normal-text
      text-transform: none

    &:hover
      background-color: $white

    &,
    &.is-beveled,
    &-bar
      td
        +dark-mode
          background-color: $black
          border-color: $border-dark
          text-shadow: none

  // sticky header/footer modifier - snaps the table heading to the top of the element
  &.has-sticky-header,
  &.has-sticky-footer
    position: relative
    width: 100%

  &.has-sticky-header
    thead
      position: relative
      z-index: 2
      th
        position: sticky
        top: 0

  &.has-sticky-footer
    tfoot td
      position: sticky
      bottom: 0

  &.is-compressed
    font-size: .9em
    th,
    td
      padding: .5rem
