@import '~scss/variables';

.tree {
  display: inline-block;
  position: relative;
  padding: 0;

  li.treeNode {
    position: inherit;
    list-style: none;
    padding: 0;
    outline: 0;
    margin: 0;
    z-index: auto;
  }

  ul.treeChildren {
    padding: 0 0 0 22px;
    margin: 0;
  }

  .treeNodeWrap {
    color: $tree-text-color;
    display: inline-flex;
    &.disabled {
      .treeContent {
        opacity: 0.5;
        cursor: default;
      }
    }
  }

  .treeContent {
    flex: 1;
    padding: 6px 8px;
    border-radius: $tree-border-radius;
    display: flex;
    cursor: pointer;
    white-space: nowrap;

    &:hover {
      background-color: $tree-node-hover-bg;
    }

    &.selected {
      color: #fff;
      background-color: $tree-node-selected-bg;
    }
  }

  .treeSwitch {
    width: 20px;
    height: 20px;
    border-radius: $tree-border-radius;
    margin: 6px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    &.open {
      :global {
        .icon {
          transform: rotate(90deg);
        }
      }
    }

    &.close {
      :global {
        .icon {
          transform: rotate(0deg);
        }
      }
    }

    &.noop {
      width: 0;
      margin: 0;
      visibility: hidden;
    }

    &:hover {
      background-color: $tree-switch-hover-color;
    }
  }

  &.showLine {
    ul.treeChildren {
      padding: 0 0 0 29px;
    }

    > li:first-child {
      &:before {
        top: #{$tree-node-height / 2} !important;
        height: 100% !important;
      }

      &:not(:has(ul)):after {
        display: none;
      }
    }

    > li:only-of-type {
      &:after {
        display: none;
      }
    }

    li.treeNode {
      position: relative;

      &:after {
        position: absolute;
        top: $tree-node-height / 2;
        left: -17px;
        width: 8px;
        height: 1px;
        border-top: 1px solid $border-color;
        content: ' ';
        z-index: auto;
      }

      &:not(:last-child):before {
        position: absolute;
        top: 0;
        left: -17px;
        width: 0;
        height: calc(100% + #{$tree-node-height / 2});
        border-left: 1px solid $border-color;
        margin: 0;
        content: ' ';
      }
    }
    ul li.treeNode {
      &:only-of-type:before {
        position: absolute;
        top: 0;
        left: -17px;
        width: 0;
        height: #{$tree-node-height / 2};
        border-left: 1px solid $border-color;
        margin: 0;
        content: ' ';
      }
    }
  }
}
