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

// Tree List
// -----------------------------------------------------------------------------

// List text-items

.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;
    }
    &:focus {
      border: 0;
      outline: 0;
    }
  }
}

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

// DO NOT EXTEND TO THIS MIXIN - IT IS A FUNCTION PLACEHOLDER
// There are multiple branch sizes to choose from, see below for options

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

// -----------------------------------------------------------------------------

// Branch size options
// I used a mixin placeholder above and created the options below in their own
// classes because we cannot extend to a mixin, extend to any class below

// Branch icon size 17

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

// Branch icon size 22
// -----------------------------------------------------------------------------

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