@import "ui-variables";
@import "octicon-mixins";

// This is a bootstrap override
.list-group,
.list-group .list-group-item {
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  position: static;
}

.list-group,
.list-tree {
  margin: 0;
  padding: 0;
  list-style: none;
  cursor: default;

  li:not(.list-nested-item),
  li.list-nested-item > .list-item {
    line-height: @component-line-height;
    text-wrap: none;
    white-space: nowrap;
  }

  // The background highlight uses ::before rather than the item background so
  // it can span the entire width of the parent container rather than the size
  // of the list item.
  .selected::before {
    content: '';
    background-color: @background-color-selected;
    position: absolute;
    left: 0;
    right: 0;
    height: @component-line-height;
  }

  // Make sure the background highlight is below the content.
  .selected > * {
    position: relative;
  }

  .icon::before {
    margin-right: @component-icon-padding;
    position: relative;
    top: 1px;
  }
  .no-icon {
    padding-left: @component-icon-padding + @component-icon-size;
  }
}

// Handle indentation of the tree. Assume disclosure arrows.
.list-tree {
  .list-nested-item > .list-tree > li,
  .list-nested-item > .list-group > li {
    padding-left: @component-icon-size + @component-icon-padding;
  }

  &.has-collapsable-children {
    @disclosure-arrow-padding: @disclosure-arrow-size + @component-icon-padding;
    li.list-item {
      margin-left: @disclosure-arrow-padding;
    }

    .list-nested-item.collapsed > .list-group,
    .list-nested-item.collapsed > .list-tree {
      display: none;
    }

    // Nested items always get disclosure arrows
    .list-nested-item > .list-item {
      .octicon(chevron-down, @disclosure-arrow-size);
      &::before{
        position: relative;
        top: -1px;
        margin-right: @component-icon-padding;
      }
    }
    .list-nested-item.collapsed > .list-item {
      .octicon(chevron-right, @disclosure-arrow-size);
      &::before{
        left: 1px;
      }
    }

    .list-nested-item > .list-tree > li,
    .list-nested-item > .list-group > li {
      padding-left: @disclosure-arrow-padding;
    }

    // You want a subtree to be flat -- no collapsable children
    .has-flat-children,
    &.has-flat-children {
      li.list-item {
        margin-left: 0;
      }
    }
  }
}