// Full screen table stuff
@mixin full-screen-table-overflown {
  // Enable scrolling and make it edge to edge
  // separate class so it can be applied via js if applicable
  overflow-x: scroll;
  margin-left: -15px;
  margin-right: -15px;
}

.full-screen-table-overflown {
  @include full-screen-table-overflown;
}

.full-screen-table {
  @include media-breakpoint-down(sm) {
    @include full-screen-table-overflown;
  }

  td ul {
    padding: 0 0 0 1.5rem;
    margin: 0.5rem 0 0.5rem;
  }

  // Dropdown headers
  .dropdown-toggle {
    font-weight: normal;
    &:active,
    &.active {
      font-weight: bold;
      text-decoration: underline;
    }
  }
}

.table-list {
  @extend .table;
  @extend .table-striped;
  @extend .table-bordered;
  @extend .table-sm;
  word-break: break-word;
  tr td {
    line-height: 1.5;
    &:first-child {
      font-size: 75%;
      font-style: italic;
      text-align: right;
      padding: 9px 4px 4px;
      line-height: 1.25;
    }
    &:first-child.full-width-data {
      font-size: 100%;
      font-style: normal;
      text-align: left;
    }
    // use last, rather than first, to enable full width single rows
    &:last-child {
      width: 85%; // This is effectively min-width for tables
    }
  }
  tr.active-row {
    background-color: #ebf5fb !important;
    a {
      text-decoration: underline;
    }
  }
  pre {
    margin: 0;
  }
  &.wide-definition tr td {
    &:last-child {
      width: 70%;
    }
  }
  &.no-italic-definition tr td {
    &:first-child {
      font-style: normal;
    }
  }
  .inline-images img {
    display: inline-block;
    width: 31%;
    max-width: 150px;
    margin-right: 3%;
  }
}

table thead.sortable {
  th {
    font-weight: normal;
    a.sortable-link {
      display: block;
      position: relative;
      // To give a spot for the sortable direction
      &.active {
        padding-right: 1.5rem;
      }
      span.sortable-direction {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
      }
      &.active {
        font-weight: strong;
        text-decoration: underline;
      }
    }
  }
}

// Random special formatting bits
table {
  .table-cell-check {
    font-family: Courier;
    text-align: center;
    font-weight: bold;
  }

  .table-checkbox-select {
    @extend .table-cell-check;
  }

  code {
    word-break: break-all;
  }

  .data-cell {
    pre {
      padding: 0.25rem 0.5rem;
      margin: 0 0 0.5rem;
    }
    &.only-data {
      padding: 0;
      pre {
        margin-bottom: 0;
        border: none;
        background: none;
      }
      code {
        position: relative;
      }
    }
  }

  .less-strong-hold {
    position: relative;
    min-height: 1.25em;
  }

  .less-strong-right {
    position: absolute;
    right: -0.3em;
    line-height: 1;
    bottom: -0.2em;
    font-size: 0.8em;
    @extend .less-strong;
  }

  .photo-cell {
    text-align: center;
    img {
      max-width: 150px;
    }
  }
}
