/* -----------------------------------------------------------------------------
   Component: Treeviews / Branch
----------------------------------------------------------------------------- */

// List
// -----------------------------------------------------------------------------

.tree-list {
  background-color: @tree-bg-color;
  alternate-background-color: @tree-bg-color-alt;
  border: 0;
  margin: 0;
  outline: 0;
  &::item {
    color: @text-color;
    &:selected {
      .selected-primary; // base/mixins.less
    }
    &:focus {
      border: 0;
      outline: 0;
    }
  }
}

// Branch Size
// -----------------------------------------------------------------------------

// Extend to one of the branch sizes below that suits the situation.

// Base mixin

.branch-base(@size: 17) {
  &:adjoins-item {
    border-image: url('@{img-url}/tree@{size}_branch-end.svg') 0;
  }
  &:has-siblings {
    border-image: url('@{img-url}/tree@{size}_vline.svg') 0;
    &:adjoins-item {
      border-image: url('@{img-url}/tree@{size}_branch-more.svg') 0;
    }
  }
  &:has-children {
    &:closed {
      background: url('@{img-url}/tree@{size}_branch-closed_nosib.svg') no-repeat;
      border-image: none;
      image: none;
    }
    &:open {
      background: url('@{img-url}/tree@{size}_branch-open_nosib.svg') no-repeat;
      border-image: none;
      image: none;
    }
    &:has-siblings {
      &:closed {
        background: url('@{img-url}/tree@{size}_branch-closed.svg') no-repeat;
        border-image: none;
        image: none;
      }
      &:open {
        background: url('@{img-url}/tree@{size}_branch-open.svg') no-repeat;
        border-image: none;
        image: none;
      }
    }
  }
}

// Size 17
// -----------------------------------------------------------------------------

.branch-17 {
  .branch-base(17);
}

// Size 22
// -----------------------------------------------------------------------------

.branch-22 {
  .branch-base(22);
}