ux-hierarchy-bar-collapsed {
  display: flex;
  flex: 1;
  max-width: 100%;

  .hierarchy-bar-addons {
    display: inline-flex;
    flex: none;
  }

  .hierarchy-bar-nodes {
    position: relative;
    display: flex;
    flex: 1;
    height: 100%;
    overflow: hidden;

    &.hierarchy-bar-nodes-overflow {
      ux-hierarchy-bar-node {
        flex: 1 1 auto;
        overflow: hidden;

        .hierarchy-bar-node {
          .hierarchy-bar-node-title {
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
          }

          .hierarchy-bar-node-content {
            max-width: ~'calc(100% - 5px)';
          }

          &.hierarchy-bar-node-child-indicator {
            .hierarchy-bar-node-content {
              max-width: ~'calc(100% - 22px)';
            }
          }
        }
      }
    }
  }

  .hierarchy-bar-overflow {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0.25rem 0 0.75rem;
    color: @primary;
    min-width: 70px;

    .hierarchy-bar-overflow-container {
      margin-right: 7px;

      .overflow-button {
        border: none;
        background: transparent;
        padding: 0 2px;

        &:focus {
          .native-focus-outline();
        }

        > ux-icon {
          font-size: 1.5rem;
        }
      }
    }

    .hierarchy-bar-node-arrow {
      display: inline-flex;
      color: @organization-chart-hierarchy-bar-arrow;
      margin-left: 5px;
      transition: color 250ms ease-in-out;
      border: none;
      background: transparent;
      padding: 0;
      height: 16px;

      &:hover:not(:disabled) {
        color: @primary;
      }

      &:focus:not(:disabled) {
        color: @primary;
        .native-focus-outline();
      }
    }
  }
}