$indentation: 0.8rem;
$line-height: 1.4rem;
$line-style:2px rgba($primary-color, 0.6) solid;

.treeview {

  li:hover {
    color: $primary-color;
  }

  ul {
    padding-inline-start: 0;
    margin-block-start: 0.2rem;
    margin-block-end: 0.2rem;
    color: $primary-color;
    font-weight: 600;
    list-style: none;
  }

  .tree,
  .tree ul {
    margin: 0 0 0.2rem 0.8rem;
    /* indentation */
    padding: 0;
    list-style: none;
    color: $primary-color;
    position: relative;
  }

  .tree {

    &:before,
    & ul:before {
      content: "";
      display: block;
      width: 0;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      border-left: $line-style;
    }

    li {
      margin: 0;
      padding-left: calc($indentation + 0.2rem);
      /* indentation + .5em*/
      line-height: $line-height;
      /* default list item's `line-height` */
      position: relative;
      font-size: 1rem;
      color: black;
      font-weight: 400;
    }

    li:before {
      content: "";
      display: block;
      width: $indentation;
      /* same with indentation */
      height: 0;
      border-top: $line-style;
      margin-top: -1px;
      /* border top width */
      position: absolute;
      top: calc($line-height/2);
      /* (line-height/2) */
      left: 0;
    }

    li:last-child:before {
      background: white;
      /* same with body background */
      height: auto;
      top: calc($line-height/2);
      /* (line-height/2) */
      bottom: 0;
    }

    @for $i from 1 through 4 {
      .level#{$i}-text {
          font-size: calc(0.8rem + (4 - $i)*0.1rem);
          //color: lighten(rgb(0, 0, 0), ($i - 1)*20);
      }
  }
  

  }

  .block-sm {
    min-width: 6rem;
  }

}