table thead tr th,
table tfoot tr th,
table tfoot tr td,
table tbody tr th,
table tbody tr td,
table tr td {
  display: table-cell;
  line-height: 1.3rem;
  padding: 0.2rem 0.28571rem;
}

table thead th {
  vertical-align: bottom;
}

table tbody tr:hover,
table.column_hover .hover { // for js column hovering see table.js
  background-color: $table-row-hover-colour;
}

.no-permission {
  color: $disabled-colour;
}

.actions-dropdown {
  .no-permission {
    padding: 0.5rem;
    display: inline-block;
    line-height: inherit;
  }
}

/*
  Add a pipe between action links (Edit, Delete etc) in tables
*/
td.actions {
  padding-left: 0;
  white-space: nowrap;

  > a, > span {
    &:after {
      color: $pipe-separator-colour;
      content: "|";
      padding-right: 0;
      padding-left: .3rem;
    }

    &:last-child:after {
      content: "";
    }

    &:before {
      display: inline-block;
      color: $pipe-separator-colour;
      content: "";
      padding-right: 0;
      padding-right: .3rem;
    }

    &:first-child:before {
      padding-right: 0;
    }
  }
}

table.stripeless {
  tr:nth-of-type(even),
  tr:nth-of-type(odd) {
    background-color: transparent;
  }
}

table td.actions-dropdown {
  padding-bottom: 0.3rem;
  padding-right: 0;
  padding-top: 0.3rem;

  > div  {
    display: inline-block;
  }

  .button.dropdown {
    margin: 0;
    padding: .2rem 2.3rem .2rem .4rem;

    &:after {
      right: 0.5rem;
    }
  }

  .f-dropdown {
    margin-left: -110px;

    &.open::before,
    &.open::after {
      left: 160px;
    }
  }

  &.going-right {
    .f-dropdown {
      margin-left: 0;
    }
  }
}

table {
  // This will have to be removed at some point to comply with NHS table guidelines
  border-collapse: collapse;

  width: 100%;

  thead {
    background-color: transparent;
    border-bottom: solid 1px $letter-preview-background-colour;
    //border-top: solid 1px $letter-preview-background-colour;

    a {
      color: $muted-dark-grey;
      text-decoration: underline;
    }

    &:hover {
      color: $steel;
    }
  }

  &.natural-width {
    width: auto;
  }

  // On tables where every other row is can be toggled open, we need the following:
  // 0 Visible white bg
  // 1 Hidden white bg
  // 2 -- Visible grey bg --
  // 3 Hidden white bg
  // 4 Visible white
  // 5 Hidden white bg
  // 6 -- Visible grey bg --
  // 7 Hidden white bg
  // So this == tr:nth-child(4n+3) (offset of 3 then every 4 rows)
  // &.has-togglable-rows {
  //   tbody tr {
  //     &:nth-child(4n+3) {
  //       background: $table-even-row-colour;
  //     }

  //     // The (initially hidden) toggle content row
  //     &:nth-child(even) {
  //       background-color: $table-toggled-content-colour;
  //     }

  //     &.content-toggled {
  //       background-color: $table-toggled-content-colour;
  //       td {
  //         border-bottom: 0;
  //       }
  //     }
  //   }
  // }

  .quick-preview {
    p {
      line-height: inherit;
      margin: 0;
      padding: 0;
    }

    dl {
      line-height: 1.3rem;

      dt {
        color: $monsoon;
        text-align: right;
      }

      dd {
        * {
          font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
          font-size: 1rem;
          border: 0;
          margin: 0;
          padding: 0;
        }
      }
    }
  }

  &.align-top {
    td,
    th {
      vertical-align: top;
    }
  }

  &.align-centre {
    td,
    th {
      vertical-align: middle;
    }
  }

  tr th,
  tr td {
    border-bottom: 1px solid $table-border-colour;
    border-left-width: 0;
    border-right: solid 1px $white;
    font-size: 1rem;

    &:last-child {
      border-right: 0;

      &.actions {
        text-align: right;
        white-space: nowrap;
      }
    }

    &:first-child {
      &.actions {
        white-space: nowrap;
      }
    }

    &.no-wrap {
      white-space: nowrap;
    }
  }

  tr td {
    &.with-ellipsis {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 0;
    }

    &.col-width-small-with-ellipsis {
      min-width: 5.1rem;
      max-width: 5.1rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &.col-width-medium-with-ellipsis {
      max-width: 7rem;
      min-width: 5rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &.col-width-mediumish-with-ellipsis {
      max-width: 9rem;
      min-width: 7rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &.col-width-large-with-ellipsis {
      max-width: 20rem;
      min-width: 15rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &.actions {
      text-align: left;
    }
  }

  tr th,
  tr td {
    &.col-width-date {
      min-width: 7.4em;
      width: 7.8em;

      &.wide {
        width: 9rem;
      }
    }

    &.col-width-time {
      min-width: 2.7rem;
      width: 3rem;
    }

    &.col-width-date-time {
      min-width: 9.6rem;
      width: 9.6rem;
    }

    &.col-width-reference-without-prefix {
      min-width: 5.5rem;
      white-space: nowrap;
      width: 7rem;
    }

    &.col-width-reference-no {
      min-width: 8rem;
      white-space: nowrap;
      width: 8.5rem;
    }

    &.col-width-nhs-no {
      min-width: 7rem;
      white-space: nowrap;
      width: 7rem;
    }

    &.col-width-bp {
      min-width: 3.8rem;
      width: 4.5rem;
    }

    &.col-width-toggle {
      min-width: 9.7rem;
      width: 9.7rem;
    }

    &.col-width-actions-dropdown {
      width: 2rem;
    }

    &.col-width-tiny {
      min-width: 2rem;
      width: 3rem;
    }

    &.col-width-tinyish {
      min-width: 4.5rem;
      width: 5rem;
    }

    &.col-width-small {
      min-width: 5.1rem;
      width: 7rem;
    }

    &.col-width-medium {
      min-width: 10rem;
      width: 12rem;
    }

    &.col-width-medium-ish {
      min-width: 12rem;
      width: 14rem;
    }

    &.col-width-medium-plus {
      min-width: 14rem;
      width: 15rem;
    }

    &.col-width-large {
      min-width: 17rem;
      width: 20rem;
    }

    &.col-width-xlarge {
      min-width: 25rem;
      width: 30rem;
    }

    &.column-6-width {
      width: 6%;
    }

    &.col-width-6 {
      width: 6rem;
    }

    &.col-width-9 {
      width: 9rem;
    }

    &.col-width-11 {
      width: 11rem;
      min-width: 11rem;
    }

    &.col-width-13 {
      width: 13rem;
    }

    &.col-width-15 {
      min-width: 15rem;
      width: 15rem;
    }

    &.col-width-17 {
      min-width: 17rem;
      width: 17rem;
    }

    &.at-least {
      width: auto;
    }
  }

  &.with-trailing-datepicker {
    tr td:last-child {
      min-width: 150px;
      width: 150px;
    }
  }
}

table.report {
  table-layout: auto;

  th,
  td {
    padding-left: 5px;
    padding-right: 5px;
  }
}

table.auto-layout {
  table-layout: auto;
}

th,
td {
  overflow: hidden;

  &.strong {
    font-weight: bold;
  }
}

@media screen and (max-width: 1000px) {

  table.responsive {
    display: block;
    font-size: 1.2em;

    .toggle-content {
      font-size: 0.9em;
    }

    thead,
    tbody,
    th,
    td,
    tr,
    caption {
      display: block;
    }

    td:before {
      content: attr(data-heading);
      float: left;
      font-weight: bold;
      left: 6px;
      padding-right: 10px;
      position: absolute;
      top: 6px;
      white-space: nowrap;
      width: 33%;
    }

    td:first-child {
      background: #ccc;
    }

    td:nth-child(even) {
      background: $table-even-row-colour;
    }

    thead tr {
      left: -9999px;
      position: absolute;
      top: -9999px;
    }

    tbody tr {
      border-bottom: 1px solid $table-border-colour;
      margin-bottom: 20px;
    }

    td {
      border-bottom: 0;
      padding: 6px 24px 24px 35%;
      position: relative;
    }

    th {
      padding: 12px;
    }

    th.g-center,
    td.g-center {
      text-align: left;
    }
  }
}

table {
  @media print {
    th {
      a {
        text-decoration: none;
      }
    }
  }
}

table tr.even,
table tr.alt,
table tr:nth-of-type(even) {
  background: transparent;
}

th, td {
  &.valign-bottom {
    vertical-align: bottom;
  }
}