table.full-width
  width: 100%

table.ordinary
  line-height: 1.2
  border-spacing: 0
  border: none
  border-bottom: 2px solid rgba(#000, .07)
  margin: 1em 0

  & > thead > tr > td
    white-space: nowrap
    padding: 7px 8px 6px

    &[data-order="desc"]:after
      content: "▾"
      display: inline-block
      margin-left: .25em

    &[data-order="asc"]:after
      // символ стрелки вверх отличается размером,
      // поэтому берём перевёрнутую стрелку вниз
      content: "▾"
      display: inline-block
      transform: rotate(180deg) translateY(-.1em)
      margin-left: .25em

  & > tbody > tr > th,
  & > tbody > tr > td
    vertical-align: top
    padding: 9px 8px

  & > thead > tr > td
    color: #aaa
    background: #f8f8f8
    border-bottom: 2px solid rgba(#000, .07)

  & > tbody

    & > tr > td,
    & > tr > th
      border-top: 1px solid rgba(#000, .07)

    &:first-of-type > tr:first-child > td,
    &:first-of-type > tr:first-child > th
      border-top: none

    &:first-child > tr > td,
    &:first-child > tr > th
      border-top: 2px solid rgba(#000, .07)

    &:hover
      background: #fafafa

  & > tbody > tr > th
    font-weight: normal
    text-align: start
    color: #aaa

table.key-value
  width: 500px
  max-width: 100%
  table-layout: fixed
  border-spacing: 0
  border: none
  border-top: 2px solid rgba(#000, .07)
  border-bottom: 2px solid rgba(#000, .07)
  margin: 1em 0

  & > tbody > tr

    & > th,
    & > td
      vertical-align: top
      border-top: 1px solid rgba(#000, .07)
      padding: 8px 6px 7px

    &:first-child > th,
    &:first-child > td
      border-top: none

    &.followup > th,
    &.followup > td
      font-size: .85rem
      color: rgba(#aaa, .75)
      border-top-color: rgba(#000, .03)

    &.followup > th
      padding-left: 20px

    & > th
      width: 36%
      font-weight: normal
      text-align: start
      color: #aaa

  & > tbody

    & > tr:first-child > td,
    & > tr:first-child > th
      border-top: 2px solid rgba(#000, .07)

    &:first-child > tr:first-child > td,
    &:first-child > tr:first-child > th
      border-top: none

table.minimal
  border-spacing: 0
  border: none
  margin: 0

  & > tbody > tr > td
    vertical-align: top
    padding: 0 6px 0 0
