// Copyright (C) 2019-2021 Estonian Information System Authority.
// See the file 'LICENSE' for copying permission.

// bare process tree implementation because using off the shelf code is not
// sufficient for this use case.
ul.process-tree

  &, ul
    list-style: none
    padding: 0
    margin: 0

  ul
    padding-left: 2rem

  li
    position: relative
    input[type="checkbox"]
      display: none
      // closed
      & + label
        .caret:before
          content: "\f054"
        & + ul
          display: none
      // open
      &:checked + label
        .caret:before
          content: "\f078"
        & + ul
          display: block
    &:before
      content: ""
      position: absolute
      left: 2rem
      width: .1rem
      height: 100%
      border-left: 1px solid $border
      z-index: 0
    &:after
      content: ""
      position: absolute
      width: 2rem
      height: .062rem
      background-color: $border
      top: 0
      left: 0

  .pid
    position: relative
    z-index: 1
    display: block
    background-color: $border
    width: 2rem
    height: 2rem
    border-radius: .75rem
    text-align: center
    padding-top: .5rem

  .duration
    position: relative
    display: inline-block
    vertical-align: middle
    width: 15rem
    max-width: 15rem
    height: .5rem
    background-color: $border
    overflow: hidden
    border-radius: 4rem
    margin-right: $gap

    &--inner
      position: absolute
      height: .5rem
      width: 0
      left: 0
      top: 0
      background-color: $blue
