.page-nav {
  min-height: #{$spacing-md + $spacing-xl + $spacing-md};

  $background: white;

  --background: #{$background};
  --backgroundRGB: #{red($background)}, #{green($background)}, #{blue($background)};

  &__stickyContainer {
    // we'd be doing this with position sticky, but IE,
    // and the need to change colour on attachment means we're using waypoints instead, sorry.

    //position: sticky;

    top: 0;
    left: $body-border-width;
    right: 0;
    z-index: 9;
    //transition: all 200ms;

    @media (min-width: $body-border-breakpoint) {
      left: $body-border-width--wide;
    }

    background: $background;
    //background: var(--background);
    box-shadow: 0 0.5rem 0.5rem -0.5rem rgba(0, 0, 0, 0.15);
  }

  &__inner {
    overflow: hidden;
    overflow-x: auto;
    overflow-scrolling: touch;

    &::-webkit-scrollbar {
      height: 10px;
      background-color: transparent;
    }

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

    &::-webkit-scrollbar-thumb {
      border: 2px solid var(--background);
      height: 10px;
      background-color: rgba(220, 220, 220, 0.75);
      border-radius: 10px;
    }

    background: linear-gradient(to right, white 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 0 100%,
    radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)) 0 100%;

    //@supports (--css: variables) {
    //  background: linear-gradient(to right, rgba(var(--backgroundRGB), 1) 30%, rgba(var(--backgroundRGB), 0)),
    //  linear-gradient(to right, rgba(var(--backgroundRGB), 0), rgba(var(--backgroundRGB), 1) 70%) 0 100%,
    //  radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)),
    //  radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
    //}

    background-repeat: no-repeat;
    background-size: 1em 100%, 1em 100%, 1em 100%, 1em 100%;
    background-position: 0 0, 100%, 0 0, 100%;
    background-attachment: local, local, scroll, scroll;
  }

  &__list {
    position: relative;
    display: flex;
    margin: 0;
    padding: $spacing-md 0;
    white-space: nowrap;
  }

  &__item {
    margin: 0 $spacing-2xs;
  }

  &__link {
    padding: $spacing-sm;
    border-radius: 0.2em;
    font-weight: 500;
    transition: all 200ms;

    &:hover {
      text-decoration: underline;
    }

    &.is-active {
      background: $primary;
      color: white;
      text-decoration: none;
      cursor: default;
    }
  }

  &.is-waypoint-reached {
    $background: $primary;
    --background: #{$background};
    --backgroundRGB: #{red($background)}, #{green($background)}, #{blue($background)};

    .page-nav__stickyContainer {
      position: fixed;
      background: $background;
      background: var(--background);
    }

    .page-nav__inner {
      &::-webkit-scrollbar-thumb {
        background-color: rgba(white, 0.35);
      }

      background: linear-gradient(to right, $background 30%, rgba($background, 0)),
      linear-gradient(to right, rgba($background, 0), $background 70%) 0 100%,
      radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)),
      radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)) 0 100%;

      //@supports (--css: variables) {
      //  background: linear-gradient(to right, rgba(var(--backgroundRGB), 1) 30%, rgba(var(--backgroundRGB), 0)),
      //  linear-gradient(to right, rgba(var(--backgroundRGB), 0), rgba(var(--backgroundRGB), 1) 70%) 0 100%,
      //  radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)),
      //  radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
      //}

      background-repeat: no-repeat;
      background-size: 1em 100%, 1em 100%, 1em 100%, 1em 100%;
      background-position: 0 0, 100%, 0 0, 100%;
      background-attachment: local, local, scroll, scroll;
    }

    .page-nav__link {
      color: white;

      &.is-active {
        background: white;
        color: $text-color;
      }
    }
  }
}