@import 'tao/ui/globals';

.tao-tree {

display: block;

.tao-tree-item {
  display: block;

  .tao-tree-item-padding {
    height: 100%;
    display: flex;

    .padding-item {
      position: relative;
      height: 100%;
      width: 2rem;

      &:before {
        content: '';
        display: block;
        border-left: 1px solid $light-border-color;
        position: absolute;
        left: 0.625rem;
        top: 0;
        right: 0;
        bottom: 0;
      }

      &:last-child:after {
        content: '';
        display: block;
        border-bottom: 1px solid $light-border-color;
        position: absolute;
        left: 0.625rem;
        top: 0;
        right: 0.6rem;
        bottom: 50%;
      }
    }
  }

  &:first-child[depth='0'] > .tao-tree-item-content .tao-tree-item-padding .padding-item:last-child:before {
    top: 50%;
  }

  &:last-child > .tao-tree-item-content .tao-tree-item-padding .padding-item:last-child:before {
    bottom: 50%;
  }

  & > .tao-tree-item-content {
    display: flex;
    align-items: center;
    height: $tree-item-height;
    font-size: $tree-item-font-size;

    .link-toggle-item {
      display: block;
      background: $white-color;
      width: 1.375rem;
      height: 1.375rem;
      padding: 0.25rem;
      transition: transform 200ms;
      border: 1px solid $border-color;
      border-radius: 50%;
      margin: 0 0.75rem 0 -2rem;
      cursor: pointer;
      visibility: hidden;
      position: relative;

      .icon {
        display: block;
        width: 0.75rem;
        height: 0.75rem;
        fill: $lighter-grey-color;
      }

      &:hover {
        background: $grey-bg-color;

        .icon {
          fill: $grey-color;
        }
      }
    }

    tao-check-box {
      margin: 0 0.75rem 0 0;
    }
  }

  & > .tao-tree-list {
    display: none;
    transition: height 200ms;
    overflow: hidden;

    & > .tao-tree-loading {
      display: flex;
      align-items: center;
      height: $tree-item-height;
      line-height: $tree-item-height;
      font-size: $tree-item-font-size;
      color: $lighter-grey-color;

      .icon {
        margin: 0 0.75rem 0 0;
      }
    }
  }

  &[expandable] {
    & > .tao-tree-item-content .link-toggle-item {
      visibility: visible;
    }
  }

  &[expandable][expanded] {
    & > .tao-tree-item-content .link-toggle-item {
      transform: rotate(90deg);
    }

    & > .tao-tree-list {
      display: block;
      height: auto;
    }
  }
}

}