$co-m-horizontal-nav__menu-item-link-padding-lr: 15px;

.co-m-horizontal-nav__menu {
  border-bottom: 1px solid $color-grey-background-border;
  display: flex;
  white-space: nowrap;
  @media (min-width: $grid-float-breakpoint) {
    margin-left: (-$co-m-horizontal-nav__menu-item-link-padding-lr);
    padding: 0 30px;
  }
}

.co-m-horizontal-nav__menu-primary {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.co-m-horizontal-nav__menu-secondary {
  display: flex;
  list-style: none;
  margin: 0 0 -1px; // -1px bottom so co-m-horizontal-nav__menu-item *::after are fully visible
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
  -webkit-overflow-scrolling: touch;
}

.co-m-horizontal-nav__menu-item {
  font-size: 18px;
  a,
  button {
    background: transparent;
    border: 0;
    color: $color-pf-black-700;
    display: block;
    padding: 6px $co-m-horizontal-nav__menu-item-link-padding-lr 8px;
    position: relative;
    text-decoration: none;
    &:hover,
    &:focus {
      color: #252525;
      text-decoration: none;
      &::after {
        background: $color-pf-black-400;
      }
    }
    &::after {
      bottom: -1px;
      content: "";
      display: block;
      height: 2px;
      left: $co-m-horizontal-nav__menu-item-link-padding-lr;
      position: absolute;
      right: $co-m-horizontal-nav__menu-item-link-padding-lr;
    }
  }
  &.co-m-horizontal-nav-item--active {
    a,
    button {
      color: $color-pf-blue-400;
      &::after {
        background: $color-pf-blue-400;
      }
    }
  }
}

.co-m-horizontal-nav__menu-item--divider {
  border-left: 1px solid $color-grey-background-border;
  margin: 0 10px;
}

.overview__sidebar {
  .co-m-horizontal-nav__menu {
    padding: 0 5px;
    @media (min-width: $grid-float-breakpoint) {
      padding: 0 20px;
    }
  }
  .co-m-horizontal-nav__menu-item {
    font-size: 16px;
    line-height: normal;
  }
}
