.tree
  margin-top: 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
        color: blue
        text-decoration: underline
  .lefthanded
    ul
      margin-right : 19px
    li
      .leaf
        justify-content : flex-end

  .righthanded
    li
      .leaf
        justify-content : flex-start

// 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
  .tree
    .node
      margin-top: 5px
    .children
      .node
        padding-left: 15px