.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
    text-align: center

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

  .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)

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

.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

  &__header
    display: flex
    align-items: flex-start

    &__item
      padding: $card-spacer-y $card-spacer-x

      &:not(:first-child)
        margin-left: space-x(1)
      &:not(:last-child)
        margin-right: space-x(1)

  &__add-term
    // struggling to create harmonious vertical gutters due to Bootstrap adding
    // helper classes surrounding the element
    $offset-top: -8px
    $offset-bottom: 12px

    margin-top: $offset-top
    margin-bottom: $offset-bottom

  &__footer
    padding: $card-spacer-y $card-spacer-x

    &__item
      text-align: center

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

.ngrams-tree-edit-real
  // empirical value fitting the best size of the render tree
  $min-with: 416px

  min-width: $min-with
  width: fit-content // growing purpose
  border-color: $primary
  margin-top: space-x(2)
  margin-bottom: space-x(2)

  &__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

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

.loaded-ngrams-table-header
  text-align: center
  margin-top: space-x(1.5)
  margin-bottom: space-x(1.5)

  &__icon
    font-size: 16px

  &__text
    font-size: 22px
    font-weight: bold
    font-family: $headings-font-family

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

.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

////////////////////////////////////////////////////////
$renameable-icon-margin: space-x(0.5)
$renameable-button-margin: space-x(2)
// @XXX Glyphicon icons lack of homogeneous width
$renameable-icon-width: 16px

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

  &__header
    display: flex
    align-items: center

    &__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)

  &__cache
    margin-top: space-x(2)

    &--on
      font-weight: bold

    &__button
      margin-left: $renameable-button-margin
      color: $secondary

    &__text
      @include clickable

  &__calendar

    &__icon
      margin-right: $renameable-icon-margin
      width: $renameable-icon-width

  .renameable-wrapper--emphase
    .renameable-container__text
      font-size: $h3-font-size
      font-family: $headings-font-family

.renameable-container
  display: flex
  align-items: baseline
  margin-bottom: space-x(0.75)

  &__icon
    margin-right: $renameable-icon-margin
    font-size: 14px
    width: $renameable-icon-width
    text-align: center

  &__button
    margin-left: $renameable-button-margin
