@import '../../assets/styles/_colors.scss';
.tree-container {
  .tree {
    color: $primary;

    .root {
      .title {
        margin-left: 10px;

        .header {
          font-weight: 700;
          display: inline-flex;
        }
      }
    }

    .ul {
      padding: 0;
      background-color: transparent;
      margin: 0;
      background-color: $white;
      position: relative;

      @for $i from 0 through 5 {
        .node-#{$i} {
          border-left: 1px solid $blue_4;
          list-style-type: none;
          margin-left: 38px;
          position: relative;

          @if $i == 0 {
            border-left: 0;
            background-color: $blue_4;
          }
          @if $i == 1 {
            margin-left: 16px;
          }

          .node {
            display: flex;
            align-items: center;
            font-size: 12px;
            justify-content: flex-start;
            width: 100%;
            min-height: 32px;
            padding-left: 12px;
            position: relative;
            @if $i != 0 {
              gap: 8px;
            }

            @if $i != 0 {
              &::before {
                content: '';
                position: absolute;
                height: 1px;
                border-bottom: 1px solid $blue_4;
                left: 0px;
                width: 10px;
              }
            }

            .column {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              .columnHeading {
                text-transform: uppercase;
                font-weight: 700;
              }
              &--pointer {
                cursor: pointer;
              }
            }

            .folder {
              display: flex;
              gap: 8px;
              justify-content: flex-start;
              font-weight: 700;
            }
          }

          .title-container {
            display: flex;
            width: 400 - (($i) * 40) + 0px;
            @if $i != 0 {
              gap: 8px;
            }
            @if $i == 0 {
              width: 386px;
            }
            align-items: center;

            .title {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              &--folder {
                font-weight: 700;
              }
              &--pointer {
                cursor: pointer;
              }
            }
          }

          @if $i != 0 {
            &:last-child {
              border-left: 0;
              &::before {
                content: '';
                position: absolute;
                width: px;
                top: 0;
                bottom: 50%;
                left: 0px;
                border-left: 1px solid rgba(22, 72, 198, 0.22);
              }
            }
          }
        }
      }
    }
  }
}