@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;
      }
    }
  }

}