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

  &__node {
    $node: #{&};
    &-title {
      display: inline-block;
      font-size: 14px;
      padding: 5px 0;
      line-height: 18px;
      overflow: hidden;
      &--toggle {
        display: inline-block;
        width:20px;
        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{
        .tree__node-title {
          background-color: rgba(11,130,255,0.10);
          border-radius: 2px;
        }
      }
      &--checked{
        .tree__node-title {
          color: $brand-primary;
          background-color: rgba(11, 130, 255, 0.10);
          border-radius: 2px;
          .aid-folder,
          .aid-folder-open {
            color: $brand-primary;
          }
          @include hover-focus{
            background-color: rgba(11, 130, 255, 0.10);
          }
        }
      }
      &.disabled {
        color: $gray-lighter;
        .aid-folder,
        .aid-folder-open {
          color: $gray-lighter;
        }
        @include hover-focus{
          .tree__node-title {
            background-color: transparent;
          }
        }
      }
    }
    &-text{
      padding: $tree-node-text-padding-y $tree-node-text-padding-x;
      cursor: pointer;
      vertical-align: middle;
      @include border-radius();

      .aid-folder,
      .aid-folder-open {
        color: $gray-light;
      }
    }

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

  }

}