_tree.sass

$forest-layout-top-teaser-height: 24px
$forest-layout-bottom-teaser-height: 24px // ~line-height to 1.5 (covering tree)
$node-popup-width: 544px

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

.maintree
  $self: &
  // empirical vertical alignments for folder carets
  $caret-y-offset: 2px

  position: relative

  // @NOTE #386: React Awesome Popover not suited for the feature UX
  //           ↪ for now just avoiding to create a new stacking context
  //             could be a long term issue
  // z-index: 0 // new stacking context "tree"

  &__node
    margin-bottom: space-x(0.25)
    min-width: 0

    a:hover,
    a:focus
      text-decoration: none
      border-bottom: 1px dashed currentColor

  @include right-handed
    &__node
      margin-left: space-x(1.75)
    & > &__node
      margin-right: space-x(1.75)

  @include left-handed
    &__node
      margin-right: space-x(1.75)
    & > &__node
      margin-left: space-x(1.75)

  // &--with-child > &__node > &::before
  //   color: $gray-400
  //   position: absolute
  //   font-size: 11px
  //   top: $caret-y-offset
  //   // z-index macro-management due to "node__link::before" overlay
  //   z-index: z-index("tree", "content")

  //   @include right-handed
  //     content: "└"
  //   @include left-handed
  //     content: "┘"

  // for <Cloak> use cases
  animation: 15ms fade-in

  &--blank
    @extend %placeholder

    // adding an phase on top of <Cloak> ones
    // (aim is to only display the cloack fallback when
    // 1s has passed, in parallel of maintaining the Element
    // dimension)
    animation-name: fade-in
    animation-delay: 100ms
    animation-duration: 50ms
    animation-timing-function: ease-in-out
    animation-fill-mode: forwards
    opacity: 0

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

.mainleaf
  $self: &

  display: flex
  align-items: center
  padding-top: 2px
  padding-bottom: 2px
  // forcing inline width to overflow its container width
  // this is mainly due to the multi-level of nested folders that keeps
  // increasing the mainleaf width
  // (as a "min-width" rule instead of "width" to allow the relative stacking
  // context used for the selected UI border)
  min-width: 0
  position: relative

  &:hover
    background-color: $gray-300

  @include right-handed
    flex-direction: row
    padding-right: space-x(2)
    padding-left: space-x(.5)

  @include left-handed
    flex-direction: row-reverse
    padding-left: space-x(2)
    padding-right: space-x(.5)

  //----------------------------

  &__folder-icon
    font-size: 14px
    // @XXX Glyphicon icons lack of homogeneous width
    width: 16px
    // z-index macro-management due to "node__link::before" overlay
    z-index: z-index("tree", "content")

    &--leaf
      color: $gray-400

    // padding instead of margin will ensure to add a gap for the icon call
    // to action area
    @include right-handed
      padding-right: space-x(1)
    @include left-handed
      padding-left: space-x(1)

  //----------------------------

  &__node-icon
    position: relative
    font-size: 14px
    // @XXX Glyphicon icons lack of homogeneous width
    //      (this also means that we can not align harmoniously the leaf
    //      content)
    width: 14px
    //      Micromanaging icons width as an attempt of alignment harmony
    .fa-address-card-o,
    .fa-newspaper-o
      font-size: 14px
    .fa-share-alt,
    .fa-folder-open-o,
    .fa-file-code-o,
    .fa-list,
    .fa-signal
      font-size: 15px
    .fa-user
      font-size: 17px
    .fa-lock,
    .fa-fork
      font-size: 18px
    .fa-circle
      font-size: 20px

    @include right-handed
      margin-right: space-x(1)
    @include left-handed
      margin-left: space-x(1)

  //----------------------------

  &__version-badge
    // pin the icon on bottom-right of the "&__node-icon"
    $offset-y: -1px
    $offset-x: -4px

    position: absolute
    font-size: 12px
    background-color: $white
    border: 1px solid $white
    border-radius: 50%
    bottom: $offset-y
    right: $offset-x
    z-index: z-index("tree", "badge")
    height: 14px

    // (?) unknown regresion: empirical offset re-alignement
    .b-icon-button__inner
      $offset-y: -3px
      $offset-x: 1px

      top: $offset-y
      left: $offset-x

    // (remove hover effect to maintain continuity with folder + node icon
    // lack of hover effect)
    &--matched
      &.b-icon-button,
      &.b-icon-button:hover
        color: $success
    &--mismatched
      &.b-icon-button,
      &.b-icon-button:hover
        color: $warning

  //----------------------------

  &__node-link
    position: relative
    font-size: 14px
    min-width: 0

    @include right-handed
      margin-right: space-x(1)
    @include left-handed
      margin-left: space-x(1)

    // preparing "before" content (see "&--selected", "&--file-dropped")
    &::before
      // margin for the before background
      $overlay-offset: -2px
      // left extra offset: used to include besides icons, caret, ...
      $extra-left-overlay-offset: -56px
      // right extra offset: adding extra margin
      $extra-right-overlay-offset: - 12px

      position: absolute
      top: $overlay-offset
      bottom: $overlay-offset
      border-radius: $overlay-radius

      @include right-handed
        left: calc( #{ $overlay-offset } + #{ $extra-left-overlay-offset })
        right: calc( #{ $overlay-offset } + #{ $extra-right-overlay-offset })
      @include left-handed
        right: calc( #{ $overlay-offset } + #{ $extra-left-overlay-offset })
        left: calc( #{ $overlay-offset } + #{ $extra-right-overlay-offset })

    // creating a new stacking context due to the "::before" overlay
    & a
      position: relative
      span
        $span-padding: space-x(3)
        
        overflow: hidden
        text-overflow: ellipsis
        white-space: nowrap
        display: block
        
        @include right-handed
          padding-right: $span-padding

        @include left-handed
          padding-left: $span-padding

  //----------------------------
  $icon-button-margin: space-x(1.75)

  &__settings-icon
    visibility: hidden
    position: absolute

  &:hover &__settings-icon
    visibility: visible

    @include right-handed
      margin-left: $icon-button-margin
      right: space-x(2)
    @include left-handed
      margin-right: $icon-button-margin
      left: space-x(2)

  &__pin-icon
    visibility: hidden
    position: absolute

  &:hover &__pin-icon
    visibility: visible

    @include right-handed
      margin-left: $icon-button-margin
      right: space-x(8)
    @include left-handed
      margin-right: $icon-button-margin
      left: space-x(8)

  &__update-icon
    position: absolute

    @include right-handed
      margin-left: $icon-button-margin
      right: space-x(5)
    @include left-handed
      margin-right: $icon-button-margin
      left: space-x(5)

  //----------------------------

  // &__update-icon,
  // &__settings-icon
    // altering component overlay offset to fit it with the ".mainleaf" overlay
    // dimension
    // $aside-icon-offset-y: -5px
    // $aside-icon-offset-x: -6px

    // &.b-icon-button::before
    //   top: $aside-icon-offset-y
    //   bottom: $aside-icon-offset-y
    //   left: $aside-icon-offset-x
    //   right: $aside-icon-offset-x

  //----------------------------

  &__progress-bar
    $progress-bar-width: 64px
    $progress-bar-height: 8px

    width: $progress-bar-width
    position: relative

    &::before
      @include fit-positions(-3px)

      content: ""
      position: absolute
      border: 1px solid $info
      border-radius: $overlay-radius

    .b-progress-bar
      height: $progress-bar-height
      background-color: $white

      .progress-text
        color: $info
        font-size: 0.55rem
        line-height: 0.55rem
        white-space: nowrap
        overflow: hidden

    @include right-handed
      margin-left: space-x(2)
      &:last-child
        margin-right: space-x(3)
    @include left-handed
      margin-right: space-x(2)
      &:last-child
        margin-left: space-x(3)

  //----------------------------

  &__version-comparator
    margin-top: space-x(1)

    li
      margin-left: space-x(3)
      list-style-type: disc
      line-height: 1.4

  //----------------------------

  &--selected
    background-color: $gray-300

  &--selected &

    // &__node-link::before
    //   content: ""
    //   background-color: $gray-100

    &__node-link a
      color: $primary
      font-weight: bold

  //----------------------------

  &--file-dropped

    #{ $self }__node-link::before
      content: ""
      border: 1px dotted $secondary

  //----------------------------

  &--blank // for <Cloak> use cases
    $blank-color: $gray-100
    $blank-link-width: 120px // roughly max size of a truncated node link text
    $blank-link-height: 12px
    $blank-link-offset-y: 5px

    color: $blank-color

    #{ $self }__folder-icon
      visibility: hidden

    // making a text placeholder block
    #{ $self }__node-link

      &::after
        content: ""
        background-color: $blank-color
        height: $blank-link-height
        width: $blank-link-width
        position: absolute
        top: $blank-link-offset-y


.mainleaf-selection-indicator
  // blank line, but relying on the inserted blank character to set a
  // line-height → thus, this will define a block with the same height of the
  // "mainleaf" one
  @include virtual-space
  height: fit-content

  top: 0
  right: 0
  width: 3px
  background-color: $primary
  position: absolute

  // z-index macro-management due to "node__link::before" overlay
  z-index: z-index("tree", "content")

  @include right-handed
    right: 0
    border-top-left-radius: $border-radius
    border-bottom-left-radius: $border-radius

  @include left-handed
    left: 0
    border-top-right-radius: $border-radius
    border-bottom-right-radius: $border-radius


// (?) Chrome engine adds extra height to the overlay embedded settings icon
//        → set an empirical icon overlay position
@media screen and (-webkit-min-device-pixel-ratio:0)
  $icon-overlay-bottom: -5px

  .awesome-popover

    .b-icon-button--overlay::before
      bottom: $icon-overlay-bottom

// (?) FireFox engine adds extra height to the embedded settings
//        → set an empirical fixed height on its wrapper to avoid
//          an height flickering alteration (on mainleaf hover) ;
//          and modify the icon overlay position
@-moz-document url-prefix()
  $simulated-mainleaf-overlay-height: 22.5px
  $icon-overlay-bottom: -3px

  .awesome-popover
    max-height: $simulated-mainleaf-overlay-height

    .b-icon-button--overlay::before
      bottom: $icon-overlay-bottom

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

.subtree
  $self: &

  &__node
    margin-top: space-x(0.25)

    &__inner
      display: flex
      align-items: center // align icon with text
      cursor: pointer
      font-size: 15px

    &__icons
      display: flex

      .fa
        margin-left: space-x(0.25)
        margin-right: space-x(0.25)

    &__text
      margin-left: space-x(0.5)

    &--can-be-selected
      text-decoration: underline
      text-underline-offset: 2px // easing node reading (empirical)

    &--is-selected > &__inner
      // (only current node, not its children)
      text-decoration: underline
      font-weight: bold

    @include right-handed

      &__inner
        flex-direction: row
        text-align: left

      &__icons
        flex-direction: row

      &__children > #{ $self }__node
        padding-left: space-x(2)

    @include left-handed

      &__inner
        flex-direction: row-reverse
        text-align: right

      &__icons
        flex-direction: row-reverse

      &__children > #{ $self }__node
        padding-right: space-x(2.5)

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

.forest-tree-node-modal
  // will enlarge popup when inner content is larger (see issue #315),
  // with a minimal width to avoid row item collapsing (see issue #324)
  width: fit-content
  min-width: $node-popup-width
  max-width: 100vw // override Bootstrap modal rules (via sizing props)

.node-popup-tooltip

  .panel-actions
    font-size: 90%
    padding-left: space-x(2.5)

    .b-icon
      margin-right: space-x(1)
      font-size: 11px

    &__almost-useable
      color: $almost-useable
    &__development-in-progress
      color: $development-in-progress
    &__ok-to-use
      color: $ok-to-use
      // (?) avoid unnecessary informations
      display: none

  .popup-container
    display: flex
    flex-direction: column

    &__header
      .b-wad
        .fa-pencil
          visibility: hidden

        &:hover
          .fa-pencil
            visibility: visible


    &__body
      display: flex
      justify-content: center
      background-color: $body-bg
      padding: space-x(5) space-x(7)
      gap: space-x(6)

    &__cta
      position: relative

      &__button
        font-size: 18px

      &__icon
        $offset-y: -9px
        $offset-x: -13px

        position: absolute
        top: $offset-y
        right: $offset-x
        font-size: 11px

      // @XXX SASS lacking of immediate parent selector
      &--almost-useable .popup-container__cta__icon
        color: $almost-useable
      &--development-in-progress .popup-container__cta__icon
        color: $development-in-progress
      &--ok-to-use .popup-container__cta__icon
        color: $ok-to-use
        // (?) avoid unnecessary informations
        display: none

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

.frame-search.card
  $frame-width: 1000px
  $frame-height: 600px

  width: $frame-width
  height: $frame-height

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

.forest-layout
  @include term-window

  overflow-x: clip // due to resizing content

  @include right-handed
    border-right: 1px solid $border-color

  @include left-handed
    border-left: 2px solid $border-color

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

  @mixin top-teaser()
    background: linear-gradient(to top, mix-alpha($body-bg, 0%) 0%, mix-alpha($body-bg, 100%) 45%)

  &__actions
    z-index: 3
    border-bottom: 1px solid $gray-300

    // $teaser-height: 16px

    // &::after 
    //   @include top-teaser

    //   content: ""
    //   z-index: z-index("tile", "top-teaser")
    //   pointer-events: none
    //   position: sticky
    //   top: 0
    //   height: $teaser-height
    //   width: 100%
    //   display: block


  &__top_action
    & > span
      display: flex
    button
      padding-top: 1px !important
      padding-bottom: 1px !important
      .b-button__inner
        display: flex
        @include right-handed
          flex-direction: row
        @include left-handed
          flex-direction: row-reverse


  &__action
    display: flex

    @include right-handed
      flex-direction: row
      padding-left: space-x(2)
      padding-right: space-x(1)

      &__button
        margin-right: space-x(2)
        white-space: nowrap

    @include left-handed
      flex-direction: row-reverse
      padding-left: space-x(1)
      padding-right: space-x(2)

      &__button
        margin-left: space-x(2)

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

  &__tree
    margin-top: space-x(3)

    &:last-child
      margin-bottom: $forest-layout-bottom-teaser-height

    // remove leaf nested caret for first entry only
    & > .maintree--with-children > .maintree__node

      &::before,
      &::after
        content: none

    // remove horizontal offset for first entry only (see ".maintree")
    & > .maintree > .maintree__node
      @include right-handed
        margin-left: space-x(0.5)
      @include left-handed
        margin-right: space-x(0.5)

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

.ids-selector
  .tree
    .children
      padding-left: 0.5em
      .leaf
        input
          margin: 0.1em

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

.main-page__horizontal-tiles
  border-top: 2px solid $border-color

  .tile-block:not(:first-child)
    border-left: 2px solid $border-color

.main-page__vertical-tiles
  border-left: 2px solid $border-color

  .tile-block:not(:first-child)
    border-top: 2px solid $border-color

.tile-menu__popover
  border-radius: $border-radius
  background-color: $body-bg

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

.phylo-config-form

  // @TODO: manage background color for all node Box popup
  background-color: $card-bg

  // @TODO: manage the blue color set on all node Box popup
  color: $body-color

  &__group
    padding-left: $card-spacer-x
    padding-right: $card-spacer-x

  // Apply Bootstrap "cart-footer" rules (see "_card.scss")
  &__submit

    padding: $card-spacer-y $card-spacer-x
    color: $card-cap-color
    background-color: $card-cap-bg
    border-top: $card-border-width solid $card-border-color

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

.file-type-tooltip
  @include centered

  position: absolute
  background-color: white
  z-index: z-index('main', 'floaty')