.cardTable {
  :global {
    .ms-DetailsRow {
      > :first-child.ms-DetailsRow-fields {
        font-size: 0.8rem;
        > :first-child {
          padding-left: @padding-page;
        }
      }
    }
  }
}

.cardTable.contentExtended {
  :global {
    .ms-DetailsRow {
      > :first-child.ms-DetailsRow-fields {
        > :last-child {
          padding-right: @padding-page;
        }
      }
    }
  }
}

.tableHeader {
  :global {
    .ms-DetailsHeader {
      padding-top: 0;

      > :first-child .ms-DetailsHeader-cellTitle {
        padding-left: @padding-page;
      }

      // FIXME: For sticky headers, when there is `.contentExtended`, we
      // need to add padding right.

      // > :nth-last-child(2) .ms-DetailsHeader-cellTitle {
      //   padding-right: @padding-page;
      // }

      // &.is-resizingColumn > :nth-last-child(3) .ms-DetailsHeader-cellTitle {
      //   // FIXME: This is highly magical
      //   padding-right: @padding-page;
      // }
    }
  }
}

.clickableTableRow {
  cursor: pointer;
}

.highlightRow {
  border: 1px solid;
}

.cardTableContent {
  margin-left: -@padding-page;
  margin-right: -@padding-page;
}