/* -----------------------------------------------------------------------------

   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);

}