@mixin ds2-link--style($hoverColor: #111,) {
  &:focus {
  border: 2px solid black;
  outline: none;
}
  &:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    color: $hoverColor;
    text-decoration-color: $hoverColor;
  }
}

@mixin ds2-focus--white {
  outline: 2px solid #fff;
  outline-offset: 1px;
}

.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;
    }
    border: 2px solid transparent;

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

    @include ds2-link--style;
  }

  &__arrow-container {
    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: inherit;
    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;

    &:focus {
     @include ds2-link--style;
    }
  }

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

// theme options

// default

.ds2-secondary-nav {
  color: black;
  background: $color-brand-black-5;

  .ds2-secondary-nav__link--selected {
    color: white;
    background: $color-brand-black-90;
  }
}

// green
.ds2-secondary-nav--green {
  .ds2-secondary-nav__link--selected {
    background: $color-brand-vivid-green;
  }
}



// lilac
.ds2-secondary-nav--lilac {
  color: black;
  background: #ece8ff;

  .ds2-secondary-nav__link--selected {
    color: black;
    background: $color-brand-lilac;
  }
}

// teal
.ds2-secondary-nav--teal {
  color: black;
  background: #dcf1ec;

  .ds2-secondary-nav__link--selected {
    color: black;
    background: #00d0a0;
  }
}