$indent-max: 9 !default;

#component-documentation {
  @include float(left);
}


.component-tree {
  box-sizing: border-box;
  flex: 1;
  .component {
    @for $i from 0 to $indent-max {
      &.component-level-#{$i} .component-heading .component-title {
        @include margin-left($i * $lh-large + 0.5 * $default-gap);
      }
    }
    .component-row, .component-head {
      display: flex;
      flex-direction: row;
      flex-grow: 0;
      flex-wrap: wrap;
      align-items: center;
      .component-col {
        @include ellipsis;
        flex: 1 1;
        padding: round($fs-normal*0.2) round($fs-normal*0.5);
        &.component-heading {
          flex: 2;
          .component-title {
            @include display(block);
            @include icon-before(info-circle, $font-size: 14px);
            vertical-align: inherit;
          }
        }
        &.component-status, &.component-count {
          flex: 0.5
        }
      }
    }
    .component-row {
      border-top: $row-border;
      .component-col {
        &.component-life {
          @include padding-right($lh-small);
          @include text-align(right);
        }
        &.component-wear {
          @include padding-right($lh-ratio);
        }
      }
    }
    .component-head {
      .component-col {
        font-weight: bold;
      }
    }
  }
}
