/* ==========================================================================
 * Tree
 * ========================================================================== */

.mds-c-tree {
  line-height: 0;
  padding-top: var(--mds-d-spacing--med);
  position: relative;

  &:not(:first-of-type) {
    padding-left: var(--mds-d-spacing--sm);

    &::after {
      background-color: var(--mds-t-background-color--tertiary);
      content: '';
      height: calc(100% - 0.75rem);
      left: 0.5rem;
      position: absolute;
      top: 0.75rem;
      width: 1px;
    }
  }
}

.mds-c-tree__label {
  @mixin mds-m-heading--size-med;

  padding-top: var(--mds-d-spacing--xs);

  .mds-c-tree:not(:first-of-type) & {
    padding-left: var(--mds-d-spacing--med);
  }
}

.mds-c-tree__item {
  padding-top: var(--mds-d-spacing--med);
  z-index: 1;

  & &:last-child {
    &::after {
      background-color: var(--mds-t-background-color);
      bottom: -1.4rem;
      content: '';
      height: 100%;
      left: 0;
      position: absolute;
      width: 1px;
      z-index: 1;
    }
  }

  .mds-c-tree:not(:first-of-type) & {
    padding-left: var(--mds-d-spacing--lg);
    position: relative;

    &::before {
      background-color: var(--mds-t-background-color--tertiary);
      content: '';
      height: 1px;
      left: 0;
      position: absolute;
      top: 22px;
      width: var(--mds-d-spacing--sm);
    }
  }
}

.mds-c-tree__link {
  align-items: center;
  display: flex;
}

.mds-c-tree__badge {
  margin-right: var(--mds-d-spacing--sm);
}