.ds2-secondary-nav {
  $arrowSize: 32px;
  $navButtonSize: 60px;
  $secondaryNavGaps: 24px;
  color: black;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  background: $color-grey--faded;

  // to stop scrollbar showing
  ::-webkit-scrollbar{
    width: 0;
    height: 0
  }

  ::-webkit-scrollbar-thumb{
    background:transparent
  }

  ::-webkit-scrollbar-track {
    background-color:transparent
  }

  &__inner {
    width: 100%;
    max-width: 1400px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;

    @include media(">=uol-media-m") {
      justify-content: center;
    }
  }

  &__links {
    display: flex;
    align-items: center;
    justify-content: left;
    overflow: auto;
    white-space: nowrap;
    scroll-behavior: smooth;
    max-width: calc(100% - 2 * #{$navButtonSize});
    margin: 0;
    padding: 0;
    left: $navButtonSize;
    list-style: none;
    visibility: hidden;

    @include media(">=uol-media-m") {
      position: relative;
      justify-content: center;
      left: 0;
      visibility: visible;
    }
  }

  &__link {
    font-family: uolInter, Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
    padding: 16px 24px;
    border-radius: 6px;

    @include media(">=uol-media-m") {
      display: flex;
    }

    &:focus {
      outline: thin dotted;
    }

    &:active,
    &:hover {
      text-decoration: underline;
    }
  }

  &__arrow-container {
    background: $color-grey--faded;
    width: $navButtonSize;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;

    &--disabled {
      opacity: 0.2;
    }


  }

  &__arrow {
    background: inherit;
    border: 0;
    padding: 0;
    appearance: none;
    color: black;
    font-weight: bold;
    height: $arrowSize;
    width: $arrowSize;
    display: flex;
    justify-content: space-between;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    z-index: 2;

    @include media(">=uol-media-m") {
      display: none;
    }

  }

  &__link--selected {
    background: $color-brand-teal;
    display: flex;
  }
}