.arrow-nav {
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  height: $spacing-md * 2;
  margin-bottom: $spacing;
}

.arrow-nav-item {
  display: inline-block;
  margin-right: $spacing-md;
  margin-bottom: 0;
  height: $spacing;

  &.active {
    @extend [class*=" icon-"];
    @extend .icon-arrow-menu;
    position: relative;

    &::before {
      z-index: 2;
      position: absolute;
      left: 50%;
      font-size: 20px;
      margin-left: -10px;
      bottom: $spacing-md * -1 + 0.063rem;
      background-color: $white;
      color: $info;
    }

    a, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
      color: $info;
      font-family: $font-family-base;
      -webkit-font-smoothing: auto;
      -moz-osx-font-smoothing: initial;
    }
  }

  &.disabled {
    a {
      cursor: not-allowed;
      color: $nav-disabled-link-color;
    }
  }

  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin-bottom: 0.5rem;
    display: flex;
  }

  .count {
    font-size: 60%;
    margin-left: 2px;
  }
}

.arrow-nav-wrapper {
  position: relative;

  // Blue line underneath the active element
  &::after {
    z-index: 1;
    content: "";
    position: absolute;
    width: 100%;
    left: 0;
    bottom: $spacing-xs;
    border-bottom: 1px solid $info;
  }

  &.navigation-inactive {
    &::after {
      content: none;
    }
  }

  &.secondary-nav {
    &::after {
      border-color: $border-color;
    }

    .arrow-nav-item.active::before {
      content: none;
    }
  }
}

@include media-breakpoint-down(xs) {

  //Fading gradient that indicates more nav items on mobile
  .arrow-nav-wrapper::before {
    content: "";
    pointer-events: none;
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    width: $spacing;
    height: $spacing;
    background: linear-gradient(to left, $white-opaque 0%, $white-invisible 100%);
  }

  .arrow-nav {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;

    .arrow-nav-item {
      margin-right: $spacing-sm;
    }
  }
}