.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) // (+ another trimmed gutter)

  &__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: .85rem
          line-height: .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: .85rem