.table {
  $row-min-height: 48px;

  tr td {
    height: $row-min-height;
  }

  ///////////////////////

  .page-paint-raw {
    &--selected {
      td:first-child {
        position: relative;

        &::before {
          @include fit-positions;

          content: "";
          width: 3px;
          background-color: $info;
          position: absolute;
        }
      }
    }
  }

  ///////////////////////

  .page-paint-row {
    &--active {
      // font-weight: bold
   
    }

    &--trash {
      text-decoration: line-through;
    }
  }

  ///////////////////////

  .doc-chooser {
    // $offset-top: 3px // flex alignment won't work, hence empirical value

    // padding-top: $offset-top
 
  }

  ///////////////////////
}

///////////////////////////////////////////////////:

.rating-group {
  // $offset-top: 3px // flex alignment won't work, hence empirical value

  display: flex;

  // padding-top: $offset-top

  &__action {
    // @XXX Glyphicon icons lack of homogeneous width
    width: 14px;
    margin-right: space-x(1);
  }
}

///////////////////////////////////////////////////:

.loaded-ngrams-table-header {
  display: flex;
  margin-top: space-x(4);

  &__search {
    flex-basis: 380px;
    flex-grow: 0;
    flex-shrink: 1;
  }
}

///////////////////////////////////////////////////:

.ngrams-table-search-button {
  .input-group-text {
    // @XXX Glyphicon icons lack of homogeneous width
    width: 41px;

    // @XXX Bootstrap adding unwanted `z-index` on "_input-group.scss"
    z-index: initial;
  }
}

///////////////////////////////////////////////////:

.ngrams-table-container {
  &__navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: space-x(2);
    margin-bottom: space-x(2);
  }

  &__add-term {
    margin-top: space-x(1.5);
    margin-left: space-x(1.5);
    display: flex;
    align-items: center;
    gap: space-x(1);
    font-size: 14px;

    &::before {
      $offset-y: 1px;

      content: "└";
      color: $gray-400;
      font-size: 18px;
      line-height: 0;
      position: relative;
      top: $offset-y;
      padding-right: space-x(1);
    }
  }

  &__selection-cta {
    margin-left: space-x(1.5);
    display: flex;
    align-items: center;
    gap: space-x(1);
    font-size: 15px;
  }

  &__table-wrapper {
    // @XXX: reset "main-page__main-route" wrapper margin
    //       see Gargantext.Components.Router)
    margin-left: -(space-x(2));
    margin-right: -(space-x(2));
    margin-bottom: -(space-x(2));
  }

  &__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: $body-bg;
    position: sticky;
    top: $topbar-height;
    z-index: z-index("main", "topbar");
    padding: $card-spacer-y space-x(2);
    border-bottom: 2px solid $border-color;
  }

  &__table {
    display: flex;
    gap: space-x(2);

    .ngrams-tree-edit-real {
      $width: 416px;
      $min-width: 264px;
      $empirical-action-row-height: 64px;
      $offset-y: space-x(2);

      width: $width;
      min-width: $min-width;
      flex-grow: 0;
      flex-shrink: 1;
      align-self: flex-start;
      position: sticky;
      margin-top: $offset-y;
      margin-bottom: $offset-y;
      top: calc( #{$topbar-height} + #{$empirical-action-row-height} + #{$offset-y} );
    }

    // reduce top border → due to the "__actions" bottom one
    thead th {
      border-top-width: 0;
    }

    tbody {
      padding-left: $card-spacer-x;
      padding-right: $card-spacer-x;
    }
  }

  &__table {
    $select-column-width: 50px;
    $score-column-width: 25%;
    $score-column-min-width: 280px;

    /// as of now (one-based index):
    /// nth(1) → "Select"
    /// nth(2) → "Score"
    /// nth(3) → "Terms"

    // (header)
    th:nth-child(1),
    th:nth-child(2) {
      width: $select-column-width;

      // padding-left: space-x(4)
      input {
        @include clickable;
      }
    }

    th:nth-child(3) {
      width: $score-column-width;
      min-width: $score-column-min-width;
    }

    // (rows)
    td:nth-child(1),
    th:nth-child(2) {
      // padding: initial

      div {
        $offset-y: 14px;

        @include clickable;

        height: 100%;

        // padding-left: space-x(4)
        // padding-top: $offset-y
     
      }
    }

    td:nth-child(3) {
      // padding-left: space-x(4)
      // margin-left: space-x(1.5)
   
    }

    td:nth-child(4) {
      .tree-loaded-plus {
        $offset-y: 1px;

        visibility: hidden;
        position: relative;
        top: $offset-y;
        margin-left: space-x(1);

        .fa-plus-minus:before {
          font-size: 0.85rem;
          line-height: 0.85rem;
        }
      }
    }

    tr:hover {
      .tree-loaded-plus {
        visibility: unset;
      }
    }
  }
}

///////////////////////////////////////////////////:

.ngrams-tree-edit-real {
  border-color: $primary;

  &__actions {
    display: flex;
    margin-top: space-x(2);

    .b-button {
      margin-right: space-x(1);
    }
  }

  .ngrams-tree-loaded-node a:hover {
    text-decoration: line-through;
  }
}

//////////////////////////////////////////////////

.ngrams-tree-loaded-node {
  &--first-child::before,
  &--grand-child::before {
    color: $gray-400;
    font-size: 11px;
    margin-right: space-x(0.5);

    @include right-handed {
      content: "└";
    }


    @include left-handed {
      content: "┘";
    }
  }

  &--first-child {
    // empirical value where the child separator aligns with its parent text
    $child-offset: -2px;

    margin-left: -2px;
  }

  &--grand-child {
    // empirical value where the child separator aligns with its parent text
    $child-offset: 13px;

    margin-left: 13px;
  }
}

////////////////////////////////////////////////////////

.table-header-rename {
  margin-bottom: space-x(1);

  &__title {
    display: flex;
    align-items: center;

    &__text {
      font-size: $h3-font-size;
      font-family: $headings-font-family;
    }

    &__line {
      // (?) This is a peculiar line directly coming from the legacy style
      //     It originaly was a solid 2px black one, that added to much
      //     emphasize comparing to the surrounding gray border and lighter
      //     element (font, icon, etc)
      //
      //     As far as it goes, we kept it for inheritance, but without more
      //     previous decision on it, we can only make assumption here. Maybe
      //     the line was intended to bring the page title out, as we can see
      //     on the likes on some academing print paper
      border-bottom: 1px solid $gray-200;
      border-top: none;

      // (?) strange behavior where browser engine add it by itself
      height: 0;
      flex-grow: 1;
      margin-left: space-x(4);
      margin-right: space-x(4);
    }
  }

  &__cache-toolbar {
    width: $topbar-fixed-button-width;
    margin-left: $topbar-item-margin;
    margin-right: $topbar-item-margin;
  }
}

.table-header-rename-edition {
  margin-top: space-x(1);
  padding: $card-spacer-y $card-spacer-y;

  .form-group {
    display: flex;
    align-items: baseline;
    margin-bottom: space-x(0.75);

    // remove "bootstrap" not-needed-here rule
    flex-wrap: initial;
  }

  .form-group__label .b-icon {
    // @XXX Glyphicon icons lack of homogeneous width
    $icon-width: 16px;

    margin-right: space-x(1);
    width: $icon-width;
    font-size: 14px;
    text-align: center;
  }
}

.side-panel {
  z-index: 10;

  .ngrams-doc-list {
    .list-group {
      max-height: 40em;
      overflow-y: scroll;

      .context-item-title {
        line-height: 1.3;
        margin-bottom: 4px;
      }

      .context-item-source {
        color: $gray-600;
        font-variant-caps: small-caps;
        font-size: 15px;
      }

      .context-item-date {
        color: $gray-600;
        font-size: 0.85rem;
      }
    }
  }
}

.tree-expanded {
  padding-top: 12px;
  padding-bottom: 12px;
}