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

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

  ux-hierarchy-bar-node:last-of-type {
    .hierarchy-bar-node-title {
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

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

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

    .overflow-button {
      margin-top: 3px;
      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();
      }
    }
  }
}