@import "../../index.less";

.tree-first-solid-line-conn-background, .tree-mid-solid-line-conn-background {
  &:before {
    position: absolute;
    top: 0;
    left: -1px;
    width: 50%;
    height: 100%;
    border-right: 1px solid @border-color-dark-gray-line;
    content: '';
  }

  &:after {
    position: absolute;
    top: 0;
    right: 0;
    height: 50%;
    width: 50%;
    border-bottom: 1px solid @border-color-dark-gray-line;
    content: '';
  }
}

.tree-last-solid-line-conn-background {
  &:before {
    position: absolute;
    top: 0;
    left: -1px;
    width: 50%;
    height: 50%;
    border-right: 1px solid @border-color-dark-gray-line;
    content: '';
  }

  &:after {
    position: absolute;
    top: 0;
    right: 1px;
    height: 50%;
    width: 50%;
    border-bottom: 1px solid @border-color-dark-gray-line;
    content: '';
  }
}

.bi-theme-dark {
  .tree-first-solid-line-conn-background, .tree-mid-solid-line-conn-background {
    &:before {
      border-right: 1px solid @border-color-dark-gray-line-theme-dark;
    }

    &:after {
      border-bottom: 1px solid @border-color-dark-gray-line-theme-dark;
    }
  }

  .tree-last-solid-line-conn-background {
    &:before {
      border-right: 1px solid @border-color-dark-gray-line-theme-dark;
    }

    &:after {
      border-bottom: 1px solid @border-color-dark-gray-line-theme-dark;
    }
  }
}