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

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

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

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

table {
  // This will have to be removed at some point to comply with NHS table guidelines
  width: 100%;

  border-collapse: collapse;

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

    a {
      color: $oil;
      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: none;
        }
      }
    }
  }

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

    dl {
      line-height: 1.3rem;

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

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

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

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

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

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

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

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

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

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

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

      &.wide {
        width: 9rem;
      }
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    &.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;
    }

    .accordion dd > a.toggle-info {
      background: none;
      border-radius: 0.5em;
      padding: 0 0.3em 0 0.3em;
      font-size: 0.9em;
      color: $link-colour;
    }

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

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

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

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

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

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

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

    th {
      padding: 12px;
    }

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