@import "settings.global";

@mixin tree {
  display: block;
  padding: $tree-padding;
  margin: $tree-margin;
  list-style: none;
}

@mixin tree--nested {
  padding: $tree-nested-padding;
}

@mixin tree__item {
  padding: $tree-item-padding;

  &:before {
    content: "–";
    display: inline-block;
    padding: $tree-item-indicator-padding;
    color: $tree-item-indicator-color;
    transform-origin: 30% 50%;
  }
}

@mixin tree__item--expandable {
  &:before {
    color: $tree-item-expandable-indicator-color;
    content: "\276F";
  }
}

@mixin tree__item--expanded {
  &:before {
    color: $tree-item-expanded-indicator-color;
    content: "\276F";
    transform: rotate(90deg);
  }
}