.hierarchy {
  margin: 0;
  padding: 20px;

  .branch-collapsed {
    > ul * {
      display: none;
    }
  }

  legend {
    display: inline-block;
    font-size: $ids-size-font-base;
    margin: 20px 40px;

    li {
      display: inline-block;
      margin-bottom: 10px;
      margin-right: 20px;
    }

    .key {
      border-radius: 50%;
      display: inline-block;
      height: 15px;
      margin: 0 10px;
      width: 15px;
    }

    span {
      vertical-align: middle;
    }
  }

  // The Centering Container
  .container {
    display: table;
    margin: 0 auto;

    @media (max-width: ($breakpoint-slim - 1px)) {
      width: 100%;
    }

    li {
      @include transition(all 200ms cubic-bezier(0.17, 0.04, 0.03, 0.94));
    }

    .chart {
      position: relative;

      &.has-single-child .sub-level > li:last-child::before,
      &.has-single-child .sub-level > li:first-child::before,
      &.has-single-child .sub-level > li::before {
        display: none;
      }

      // Single child
      &.has-single-child .root {
        margin: 0;

        + .sub-level::before {
          height: 66px;
          left: 20px;
        }

        + .sub-level > li .leaf::before {
          border-bottom: $hierarchy-line-width solid $hierarchy-line-color;
          border-left: $hierarchy-line-width solid $hierarchy-line-color;
          content: '';
          display: block;
          height: 105px;
          left: -30px;
          position: absolute;
          top: -65px;
          width: calc(50% + 2px);
          z-index: -1;
        }
      }
    }

    .sub-level > li > ul .leaf::before {
      border-bottom: $hierarchy-line-width solid $hierarchy-line-color;
      border-left: $hierarchy-line-width solid $hierarchy-line-color;
      content: '';
      display: block;
      height: 105px;
      left: -30px;
      position: absolute;
      top: -65px;
      width: 50%;
      z-index: -1;
    }

    .sub-level > li ul:not(.popupmenu) {
      position: relative;
    }

    .sub-level > li.branch-expanded > ul > li.branch-expanded:not(:last-child)::after {
      border-left: $hierarchy-line-width solid $hierarchy-line-color;
      content: '';
      height: 100%;
      left: -25px;
      position: absolute;
      top: 0;
    }

    // Remove the last node if its expandable
    .chart:not(.has-single-child) > .sub-level > li.branch-expanded:last-child::after {
      background-color: $body-color-primary-background;
      content: '';
      height: 100%;
      left: 13px;
      margin-top: calc(-100% + 53px);
      position: absolute;
      width: 52px;
      z-index: -1;
    }
  }

  // A node in the tree
  .leaf {
    background-color: $panel-bg-color;
    border: 1px solid $panel-border-color;
    border-left: 5px solid $ids-color-palette-slate-60;
    border-radius: 2px;
    cursor: pointer;
    display: flex;
    height: $hierarchy-node-height;
    position: relative;
    width: $hierarchy-node-width;

    &.azure08 {
      border-left-color: $ids-color-palette-azure-80;

      .image-initials {
        background-color: $ids-color-palette-azure-80;
      }

      .image-placeholder {
        border: 2px solid $ids-color-palette-azure-80;
      }
    }

    &.turquoise02 {
      border-left-color: $ids-color-palette-turquoise-20;

      .image-initials {
        background-color: $ids-color-palette-turquoise-20;
      }

      .image-placeholder {
        border: 2px solid $ids-color-palette-turquoise-20;
      }
    }

    &.amethyst06 {
      border-left-color: $ids-color-palette-amethyst-60;

      .image-initials {
        background-color: $ids-color-palette-amethyst-60;
      }

      .image-placeholder {
        border: 2px solid $ids-color-palette-amethyst-60;
      }
    }

    &.slate06 {
      border-left-color: $ids-color-palette-slate-60;

      .image-initials {
        background-color: $ids-color-palette-slate-60;
      }

      .image-placeholder {
        border: 2px solid $ids-color-palette-slate-60;
      }
    }

    &.amber06 {
      border-left-color: $ids-color-palette-amber-60;

      .image-initials {
        background-color: $ids-color-palette-amber-60;
      }

      .image-placeholder {
        border: 2px solid $ids-color-palette-amber-60;
      }
    }

    &.emerald07 {
      border-left-color: $ids-color-palette-emerald-70;

      .image-initials {
        background-color: $ids-color-palette-emerald-70;
      }

      .image-placeholder {
        border: 2px solid $ids-color-palette-emerald-70;
      }
    }

    &.ruby06 {
      border-left-color: $ids-color-palette-ruby-60;

      .image-initials {
        background-color: $ids-color-palette-ruby-60;
      }

      .image-placeholder {
        border: 2px solid $ids-color-palette-ruby-60;
      }
    }

    &.is-selected {
      box-shadow: 0 0 0 5px $focus-box-shadow-color;
    }

    //Styling for objects in the leafs
    img,
    .image-placeholder {
      border-radius: 50%;
      float: left;
      height: 55px;
      margin-left: 14px;
      margin-top: 8px;
      width: 55px;
    }

    .image-initials {
      float: left;
      height: 55px;
      min-height: 55px;
      line-height: 5.5rem;
      margin-left: 14px;
      margin-top: 10px;
      min-width: 55px;
      width: 55px;
    }

    .image-placeholder {
      border: 2px solid $ids-color-brand-secondary-alt;
    }

    .detail {
      flex-grow: 1;
      margin-left: 20px;
      margin-right: 10px;
      max-width: 178px;
      overflow: hidden;
      text-align: left;
    }

    .heading {
      @include ellipsis();
      @include font-size(16);

      color: $font-color-extrahighcontrast;
      line-height: 20px;
      margin-top: 8px;
    }

    .subheading {
      @include ellipsis();

      color: $listview-color;
      font-size: $ids-size-font-base;
      line-height: 20px;
      margin-top: 0;
    }

    .micro {
      @include ellipsis();

      color: $listview-color;
      font-size: $ids-size-font-sm;
      line-height: 18px;
      margin-top: 0;
    }

    .btn-icon {
      left: 0;
      position: relative;
      top: -16px;
    }

    .btn-hidden {
      display: none;
    }
  }

  //Adjust size for buttons
  ul > li > .leaf {
    width: 260px;

    @media only screen and (min-width: $breakpoint-slim) and (max-width: $breakpoint-phablet) {
      width: 280px;
    }

    @media (min-width: $breakpoint-phablet) {
      width: 315px;
    }

    .btn-actions,
    .btn-expand,
    .btn-collapse {
      height: 30px;
      left: auto;
      min-height: 30px;
      min-width: 30px;
      right: 13px;
      top: 22px;
      width: 30px;
    }
  }

  li[data-disabled='true'],
  li[data-disabled='true'] > a {
    cursor: default;
    opacity: 0.5;
  }

  //The Top Level Node
  .root {
    margin: 0 auto;
    position: relative;

    //draw a line down
    &::after {
      @include hierarchy-vertical-line;

      bottom: 0;
      height: 50%;
      left: 50%;
    }

    + .sub-level {
      padding-bottom: 5px;
      padding-left: 35px;
      padding-top: 25px;

      //draw a line up
      &::before {
        @include hierarchy-vertical-line;

        height: 32px;
        left: 50%;
        top: 0;
      }
    }
  }

  //The Second to Top Level - Flows left to right
  .top-level {
    overflow: hidden;
    padding: 30px 0;
    position: relative;
    text-align: center;

    //draw a line down
    &::after {
      @include hierarchy-vertical-line;

      height: 100%;
      left: 50%;
      top: 0;
    }

    &.no-sublevel::after {
      height: calc(100% - 40px);
    }

    li {
      display: inline-block;
      padding: $hierarchy-padding;

      &:last-child::before {
        border-top: 0;
      }
    }
  }

  //The Bottom Levels - Flow Down and Up
  .sub-level {
    overflow: hidden;
    position: relative;
    text-align: center;
    white-space: nowrap;

    // Top Level Nodes still follow left to right
    > li {
      display: inline-block;
      padding: 5px 10px;
      vertical-align: top;

      //Draw Line Up and right
      &:first-child::before {
        border-left: $hierarchy-line-width solid $hierarchy-line-color;
        border-top: $hierarchy-line-width solid $hierarchy-line-color;
        content: '';
        display: inline-block;
        height: 25px;
        margin-left: 51%;
        width: 55%;
      }

      &::before {
        border-left: 0;
        border-right: 0;
        border-top: $hierarchy-line-width solid $hierarchy-line-color;
        content: '';
        display: inline-block;
        height: 25px;
        width: 120%;
      }

      //Draw Line Up and Left
      &:last-child::before {
        border-left: 0;
        border-right: $hierarchy-line-width solid $hierarchy-line-color;
        border-top: $hierarchy-line-width solid $hierarchy-line-color;
        content: '';
        display: inline-block;
        height: 25px;
        margin-left: -51%;
        width: 50%;
      }
    }

    // Child Nodes - 4th level down
    li ul:not(.popupmenu) {
      overflow: hidden;
      padding-left: 45px;
      padding-right: 5px;

      li {
        margin: 30px 0;

        &:last-child:not(:first-child) {
          margin: 5px 0;
        }
      }
    }

    li ul.popupmenu li {
      margin: 0;

      &:last-child:not(:first-child) {
        margin: 0;
      }
    }
  }

  .image-user-status {
    display: block;
  }

  .popupmenu.has-detail-fields {
    padding-top: 0;
  }

  .popupmenu.has-detail-fields + .arrow {
    border-bottom-color: $popupmenu-border-color;
  }

  .popupmenu.has-detail-fields + .arrow::after {
    border-bottom-color: $popupmenu-bg-color;
  }

  .detail-fields {
    background: $popupmenu-bg-color;
    border-bottom: thin solid $popupmenu-border-color;
    padding: 10px;

    .dt-fields-row {
      display: table-row;
    }

    .dt-fields-cell:first-child {
      opacity: 0.7;
      padding-right: 8px;
      text-align: right;

      &::after {
        content: ':';
      }
    }

    .dt-fields-cell {
      color: $popupmenu-color;
      display: table-cell;
      font-size: $ids-size-font-sm;
      line-height: 1.4rem;
    }
  }
}