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

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

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

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

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

// there are two branch sizes in OpenToonz, extend to required size using the
// mixins below by calling:
// &:extend(.branch(17); or &:extend(.branch(22);

// Branch icon size 17

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

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

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