table {
  .maximal {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 1px;
  }

  .maximal,
  &.maximal {
    width: 100%;
  }

  .minimal {
    width: 1px;
  }

  .nowrap {
    white-space: nowrap;
    vertical-align: top;
  }

  .count {
    text-align: right;
    padding-right: 1.5em;
  }
}

tbody {
  font-variant-numeric: tabular-nums;
}

th.first input {
  padding-right: 34px;
}

th,
tr.line {
  img {
    vertical-align: middle;

    &.expand {
      margin-right: 6px;
      margin-bottom: -2px;
    }
  }
}

tr.line {
  p {
    margin: 0;
  }

  input,
  select {
    vertical-align: middle;
    box-shadow: none;
  }

  select {
    width: 6em;
  }

  &:hover {
    background: var(--line-background-over);
  }

  &:focus-within {
    background-color: var(--line-focus-background);
  }
}

td.status {
  vertical-align: middle;

  a {
    border: none;
  }
}

.noborder td,
td.noborder,
.noborder th,
th.noborder {
  border-width: 0 0 1px 0;
  border-color: var(--cell-noborder-color);
  line-height: 2em;
  padding-bottom: 0;
}

.noborder p {
  margin-bottom: 0;
}

table.posts-list {
  min-width: 50%;
}

table.settings,
table.prefs {
  margin-bottom: 3em;

  &:target caption::before {
    content: '▶';
    margin-right: 5px;
  }

  th:first-child {
    width: 20%;
  }

  th + th {
    width: 30%;

    + th {
      width: 10%;
    }
  }

  th:last-child {
    width: 40%;
  }
}

/* js */

td.expand {
  padding: 1em;

  td {
    border-bottom: none;
  }
}

.handle {
  padding: 0;
}

.handler {
  cursor: move;
  background: url(drag.png) no-repeat 0 50%;
  background-color: transparent;
  padding-left: 15px;
}

/* Responsive Cell Header */

.rch td::before {
  display: none;
}

@media screen and (max-width: $mobile-screen), print and (max-width: 5in) {
  table.rch {
    display: block;

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

    th,
    tr:first-of-type {
      display: none;
    }

    td:first-of-type {
      border-top: 1px solid var(--rch-table-1st-border);
      color: var(--rch-table-1st-color);
      background: var(--rch-table-1st-background);
    }

    td::before {
      display: inline;
      font-weight: bold;
    }

    td {
      display: grid;
      grid-template-columns: 10em auto;
      grid-gap: 1em 0.5em;
      text-align: left;
      border: none;

      a {
        color: var(--rch-table-td-link);
      }
    }

    .maximal {
      max-width: inherit;
    }

    .nowrap {
      white-space: inherit;
    }

    td.expand {
      grid-template-columns: auto !important;
      color: var(--rch-table-expand-color);
      background-color: var(--rch-table-expand-background);
      border-top: 1px dashed var(--rch-table-expand-border);
    }

    input,
    select {
      align-self: center;
    }
  }

  table.rch-thead {
    thead {
      display: none;
    }

    tr:first-of-type {
      display: block;
    }
  }
}
