.tree{
  padding-left: 0;
  li {
    list-style: none;
  }

  &__node {
    $node: #{&};
    &-title {
      font-size: 12px;
      padding: 5px 0;
      line-height: 18px;
      overflow: hidden;
      &--toggle {
        display: inline-block;
        width:1rem;
        cursor: pointer;
        vertical-align: middle;
        text-align: center;
        &:before{
          @extend %aid-icon;
          content: '\F567';
          transform: scale(1.6,1.6);

          #{$node}--open > & {
            content: "\F565";
          }
          #{$node}-leaf > &{
            content: '';
          }
        }
      }
    }
    &-leaf {
      #{$node}-title--toggle {
        // display: none;
        visibility: hidden;

      }
    }
    &-content {
      @include hover-focus{
        background-color: $tree-node-text-hover-bg;
      }
      &--checked{
        background-color:$tree-node-text-check-bg;
        @include hover-focus{
          background-color: $tree-node-text-check-bg;
        }
      }
    }
    &-text{
      padding: $tree-node-text-padding-y $tree-node-text-padding-x;
      cursor: pointer;
      vertical-align: middle;
      @include border-radius();
    }

    .form-checkbox{
      margin-bottom: 0;
      &__inner{
        width: 1rem;
        height: 1rem;
        padding: 0 0 0 1rem;
      }
    }
  }
  &__child-tree {
    display: none;
    padding-left: 0;

    @at-root {
      .tree__node--open >& {
        display: block;
      }
    }

  }

}