// COMPONENT: Table: used for presenting tabular data (duh; you know what this
// is). Namespaced via tag name rather than class name.
table
  border-collapse: collapse
  border-spacing: 0
  border-width: 0
  width: 100%

  caption
    text-align: left

  &.table--has-checkboxes
    transform: translateX(-$checkbox-strike-area)
    width: calc(100% + #{$checkbox-strike-area})

    .select-all
      display: inline-block
      margin-left: $gutter
      line-height: 1.5

  tbody
    tr
      &:hover
        .table-cell-link
          &,
          ~ td
            background-color: $highlight

          a
            color: $tint

      .table-cell-link:focus-within
        &,
        ~ td
          background-color: $tint-background

  th, td
    padding: $gutter
    position: relative
    vertical-align: middle

    &.table-cell-actions
      text-align: right
      white-space: nowrap
      width: 10px

    &.table-cell-checkbox
      border-top-width: 0
      padding: 0
      position: relative
      width: $checkbox-strike-area

      label
        align-items: center
        display: flex
        padding: $list-padding $gutter

        input
          margin-right: 0

    &.table-cell-checkbox label,
    &.table-cell-link a
      word-break: break-word
      word-wrap: break-word

      &:after
        bottom: 0
        content: ""
        left: 0
        position: absolute
        right: 0
        top: 0

    &.table-cell-link
      font-weight: 500
      padding: 0

      &,
      ~ td:not(.table-cell-actions)
        cursor: pointer

      a
        align-items: center
        display: flex
        padding: $list-padding
        text-decoration: none

        &,
        &:focus
          box-shadow: none

        > * + *
          padding-left: $list-padding

    &.table-cell-nowrap
      white-space: nowrap

  th
    color: $text-dark
    font-size: $font-size-control
    font-weight: 600
    letter-spacing: -0.03em
    text-align: left
    white-space: nowrap

  thead
    td,
    th,
    ~ tbody td,
    ~ tbody th
      padding: $list-padding

    th.table-cell-actions
      padding-right: 0

  tbody
    tr
      td,
      th
        border-top: 1px solid $border-light

      &.table-row-disabled
        td
          color: $placeholder

      +larger-than-small-screen
        th
          // padding-right: $gutter
          width: 10px
          white-space: nowrap

          ~ td
            padding-left: $gutter
            word-break: break-word


      +small-screen
        th
          display: block

          + td
            display: block
            padding-top: 0
            word-break: break-all

// SUBCOMPONENT: A table that renders rows as cards
=cardify-table
  &,
  thead,
  th,
  td
    display: block

  thead
    tr
      align-items: center
      display: flex
      justify-content: space-between

      th:not(.table-cell-checkbox):not(.table-cell-checkbox)
        flex: 1

      th.table-cell-checkbox
        width: auto

        ~ th:not(.table-cell-actions) *[data-checkbox-conditional="hide"]
          position: absolute
          visibility: hidden

  tbody
    display: grid
    grid-auto-rows: $gutter + 2px
    grid-gap: $gutter
    grid-template-columns: repeat(3, 1fr)

    tr
      background-color: $highlight
      border: 1px solid $border-light
      border-radius: $border-radius
      display: flex
      flex-wrap: wrap
      position: relative

      td,
      th
        border-width: 0
        padding: $gutter

        &.table-cell-checkbox
          left: 0
          padding: 0
          position: absolute
          top: 0
          width: auto
          z-index: $z-index-content + 2

          label
            padding: $gutter $list-padding $list-padding $gutter

        &.table-cell-card--tag
          flex: 0
          padding-right: $input-padding
          white-space: nowrap

          + .table-cell-card--tag
            padding-left: 0

        &.table-cell-card--row,
        &.table-cell-actions,
        &.table-cell-link
          flex: 0 0 100%
          width: 100%

        &.table-cell-link
          padding: 0

          a
            display: block
            padding: 0

            > *
              padding: $list-padding

            .image
              border-bottom-left-radius: 0
              border-bottom-right-radius: 0
              display: block
              width: 100%

              &::before
                padding-bottom: percentage(2 / 3)

  &.table--has-checkboxes
    transform: none
    width: 100%

// Mixin to allow styling of card-type tables once. Necessary because we can't mix in a media query
// for `.table--responsive` with a straight-up `.table--cards`
=in-card-table
  table.table--cards
    @content

  +medium-screen
    table.table--responsive
      @content

=not-in-card-table
  +large-screen
    table:not(.table--cards)
      @content


  +medium-screen
    table:not(.table--responsive)
      @content

+not-in-card-table
  &.table--has-checkboxes .select-all
    +sr-only


+in-card-table
  +cardify-table


+tiny-screen
  table.table--responsive
    grid-template-columns: repeat(2, 1fr)


// Only show two cards when sticking w/a grid layout
+medium-screen
  table.table--responsive tbody
    grid-template-columns: repeat(2, 1fr)


// Stack cards on small screens (instead of doing a grid)
+small-screen
  table.table--responsive tbody
    display: block

    tr
      margin-bottom: $gutter


.table-wrapper
  max-width: calc(100% + 6px)
  margin: 0 -3px -3px
  padding: 0 3px ($gutter * 1.5 + 3px)
  overflow: auto
