@use "./abstract/_members" as *

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


@mixin forest-layout-gutter

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

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


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

body > .tree ul > li:first-child::before
  top: 12px

li
  .leaf
    display: flex
    flex-direction: row
    color: #005a9aff

    .folder-icon
      padding: 0 2 0 2
      cursor: pointer

    .node-link
      a
        cursor: pointer
      & > .node-text
        color: #000000

    a.settings
      cursor: pointer
      display: block
      padding: 0 2 0 2
      text-decoration: none
      visibility: hidden
      z-index: 1
    &:hover
      a.settings
        visibility: visible

.tree

  ul
    li
      position: relative
      &::after
        content: " "
        height: 1px
        position: absolute
        top: 12px
      &::before
        bottom: -12px
        content: " "
        height: 7px
        position: absolute
        top: 5px
      &:not(:first-child):last-child::before
        display: none
      &:only-child::before
        bottom: 7px
        content: " "
        display: list-item
        //height: 7px
        position: absolute
        width: 1px
        top: 5px
      &.with-children
        &::after
          background-color: #000
        &::before
          background-color: #000

  .lefthanded
    .leaf
      justify-content : flex-end
    ul
      margin-right : 5px
      li
        margin-right: 10px
        padding-right: 5px
        &.with-children
          &::after
            right: -10px
            width: 5px
          &::before
            right: -10px
            width: 1px
          &:only-child::before
            //right: 1px
  .righthanded
    .leaf
      justify-content : flex-start
    ul
      margin-left : 5px
      li
        margin-left: 10px
        padding-left: 5px
        &.with-children
          &::after
            left: -10px
            width: 5px
          &::before
            left: -10px
            width: 1px
          &:only::before
            background-color: #000
            right: 10px

  .file-dropped
    background-color: #d8dfe5
  .node-actions
    padding-left: 5px
    .update-button
      &.enabled
        cursor: pointer
      &.disabled
        cursor: wait
  .node
    margin-top: 1px
    &.node-type-valid
      .text
        text-decoration: underline


.subtree
  $self: &

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

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

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

    @include right-handed

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

      &__icons
        flex-direction: row

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

    @include left-handed

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

      &__icons
        flex-direction: row-reverse

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


.node-text
  display: inline-flex

  &--selected
    font-weight: bold
    text-decoration: underline

  @include right-handed
    flex-direction: row

  @include left-handed
    flex-direction: row-reverse



// based on https://codeburst.io/how-to-pure-css-pie-charts-w-css-variables-38287aea161e
.progress-pie
  background: rgba(51, 122, 183, 0.1)
  border-radius: 100%
  height: calc(var(--size, 14) * 1px)
  overflow: hidden
  position: relative
  width: calc(var(--size, 14) * 1px)

  .progress-pie-segment
    --a: calc(var(--over50, 0) * -100%)
    --b: calc((1 + var(--over50, 0)) * 100%)
    --degrees: calc((var(--offset, 0) / 100) * 360)
    -webkit-clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b))
    clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b))
    height: 100%
    position: absolute
    transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg))
    transform-origin: 50% 100%
    width: 100%
    z-index: calc(1 + var(--over50))

    &:after,
    &:before
      background: var(--bg, rgb(51, 122, 183))
      content: ''
      height: 100%
      position: absolute
      width: 100%

    &:before
      --degrees: calc((var(--value, 45) / 100) * 360)
      transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg))
      transform-origin: 50% 0%

    &:after
      opacity: var(--over50, 0)

#node-popup-tooltip
  // @XXX "react-awesome-popover" lack of parent host parameter
  //
  //      hence, the popover will be added from within the overflow context
  //      of component where its CTA lies, causing an issue with the hidden
  //      overflow of its parent component
  //
  //      to avoid a truncated popover, this position workaround has to be set
  //      (so the popover will be hoisted to the overflow context of the window)
  //
  // @link https://gitlab.iscpif.fr/gargantext/purescript-gargantext/issues/302
  position: fixed


  background-color: white
  border-radius: $node-popop-radius

  &:hover
    border: none
    text-decoration: none


  // @XXX "react-awesome-popover" lack of parent host parameter
  //
  //       as the container where the popover will be appended is actually a
  //       a heighthy sidebar (which a large is hidden with a scrollbar),
  //       the library tends to add the tooltip position in the middle of the
  //       sidebar height: which can be off screen
  //
  //       this workaround appends the tooltip in a static position
  @include right-handed
    $offset-x: 16.6666666667% // simulate "col-2" sidebar attributes
    top: 50%
    left: $offset-x
    transform: translateY(-50%)

  @include left-handed
    $offset-x: 16.6666666667% // simulate "col-2" sidebar attributes
    top: 50%
    right: $offset-x
    transform: translateY(-50%)

  .tree
    .node
      margin-top: 5px
    .children
      .node
        padding-left: 15px

  .panel-actions
    .almost-useable
      color: orange
    .development-in-progress
      color: red
    .ok-to-use
      color: black


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

    & > .card
      // will enlarge popup when inner content is larger (see issue #315),
      // with a minimal width to avoid row item collapsing (see issue #324)
      width: auto !important
      min-width: $node-popup-width


      border: 1px solid rgba(0,0,0,0.2)
      box-shadow: 0 2px 5px rgba(0,0,0,0.2)
      margin-bottom: initial

      .fa-pencil
        color: black

      .card-body
        display: flex
        justify-content: center
        background-color: white
        border: none
        .spacer
          margin: space-x(1)

    .frame-search.card
      border: 1px solid rgba(0,0,0,0.2)
      box-shadow: 0 2px 5px rgba(0,0,0,0.2)
      height: 600px
      width: 1000px

  .popup-container-body
    // empirical value (see issue #308, #315)
    max-height: 70vh
    overflow-y: auto

.forest-layout-wrapper
  // removing Bootstrap "col" padding
  padding-left: 0
  padding-right: 0

.forest-layout
  $offset-y: 56px

  z-index: 909

  // make the sidebar a scrollable component
  // `max-width` rule is an addition due to Bootstrap "col-2" applied on its
  // parent
  position: fixed
  height: calc(100vh - #{ $offset-y })
  width: 100%
  max-width: inherit

  // avoiding ugly scrollbar
  scrollbar-width: none
  overflow-y: scroll
  overflow-x: visible

  &::-webkit-scrollbar
    display: none

  transition: border 150ms


.forest-layout-action
  @include forest-layout-gutter

  display: flex

  @include right-handed
    flex-direction: row

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

  @include left-handed
    flex-direction: row-reverse

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

// UX addition: visually delimiting the sidebar on hover
// -- for now in "_common.scss" file (see @TODO: More SASS structure)

// UX best pratice: when a lengthy column is overflowy hidden (with a scroll), a teaser
// UI element shows to the user that a scroll is possible
.forest-layout-bottom-teaser
  $width: 16.6666666667%    // simulate "col-2" sidebar attributes
  $minus-parent-border: 1px // border size of the sidebar on hover

  z-index: 1 // @TODO z-index stacking context management

  pointer-events: none
  position: fixed
  bottom: 0
  height: $forest-layout-bottom-teaser-height
  width: calc(#{ $width } - #{ $minus-parent-border})
  // background -- for now in "_common.scss" file (@TODO: More SASS structure)

  @include right-handed
    left: 0

  @include left-handed
    right: 0

.forest-layout-top-teaser
  $minus-parent-border: 1px // border size of the sidebar on hover

  z-index: 1 // @TODO z-index stacking context management

  pointer-events: none
  position: sticky
  top: 0
  height: $forest-layout-top-teaser-height
  width: calc(100% - #{ $minus-parent-border})
  // background -- for now in "_common.scss" file (@TODO: More SASS structure)

  @include right-handed
    left: 0

  @include left-handed
    right: 0


.forest-layout-content

  & > ul.tree // `ul` prefixed to override bootstrap "_reboot.scss" rules

    @include forest-layout-gutter

    margin-top: space-x(3)
    margin-bottom: 0

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

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

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