$forest-layout-top-teaser-height: 24px;
$forest-layout-bottom-teaser-height: 24px;
$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(0.5);
  }


  @include left-handed {
    flex-direction: row-reverse;
    padding-left: space-x(2);
    padding-right: space-x(0.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 {
    $blank-color: $gray-100;
    $blank-link-width: 120px;
    $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;
      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;
    }

    &--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);
      }
    }
  }
}

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

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

  // width: $frame-width
  height: $frame-height;
}

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

.forest-layout {
  @include term-window;

  overflow-x: clip;

  @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");
}
