// <table data-element="expandable">
// <tbody>
//   <!-- hidden by default, will open for URL hash "#/item/details" -->
//   <tr id="/item/details" data-mode="details">
//     <td>normal details, <a href="#/item">hide extra details</a></td>
//   </tr>
//   <!-- also hidden by default, coupled with the previous row -->
//   <tr data-role="expandable_extension">
//     <td>hidden extra details, <a href="#/item">hide extra details</a></td>
//   </tr>
//   <!-- displayed by default -->
//   <tr id="/item">
//     <td>normal details, <a href="#/item/details">show extra details</a></td>
//   </tr>
// </tbody>
// </table>


table[data-element="expandable"]

  & > tbody > tr

    & > th,
    & > td,
    & > td > table > tbody > tr > th,
    & > td > table > tbody > tr > td
      border-color: rgba(#000, .07)

    &[data-mode],
    &[data-mode] + tr[data-role~="expandable_extension"]
      display: none

    &[data-mode]:target ~ tr
      display: none

    &[data-mode]:target,
    &[data-mode]:target + tr[data-role~="expandable_extension"],
    &[data-mode]:target ~ tr.spacer
      display: table-row

    &[data-mode]:target,
    &[data-mode]:target + tr[data-role~="expandable_extension"]

      & > th,
      & > td
        background: #ffffd7

      & > th,
      & > td,
      & > td > table > tbody > tr > th,
      & > td > table > tbody > tr > td
        border-color: #ececc7
