/**
 * 1. We want the bottom border on selected tabs to be flush with the bottom of the container.
 */
.kuiLocalTabs {
  display: flex;
  align-items: flex-end; // 1
  height: 100%;
}

  /**
   * 1. Make sure the bottom border is flush with the bottom of the LocalNav.
   */
  .kuiLocalTab {
    padding: 5px 0 6px 0;
    font-size: 18px;
    line-height: 22px; /* 1 */
    color: $localTabTextColor;
    border-bottom: 2px solid transparent;
    text-decoration: none;
    cursor: pointer;

    &:hover,
    &:active {
      color: $localTabTextColor-isHover;

      @include darkTheme {
        color: $localTabTextColor-isHover--darkTheme;
      }
    }

    &.kuiLocalTab-isSelected {
      color: $localTabTextColor-isSelected;
      border-bottom-color: $localTabTextColor-isSelected;
      cursor: default;

      @include darkTheme {
        color: $localTabTextColor-isSelected--darkTheme;
        border-bottom-color: $localTabTextColor-isSelected--darkTheme;
      }
    }

    & + & {
      margin-left: 15px;
    }

    @include darkTheme {
      color: $localTabTextColor--darkTheme;
    }
  }