.pagenav {
  background-color: var(--background-light);
  border-bottom: .0625em solid var(--background-dark);
  font-size: 1rem;
  left: 0;
  position: absolute;
  right: 0;

  @nest .header--sticky & {
    height: var(--sticky-header__height);
    position: fixed;
    top: 0;
    z-index: 2;

    @media (--onecol) {
      right: 0;
      z-index: 1;
    }
  }

  &\__button {
    &\--menu {
      display: none;

      @nest .header--sticky & {
        @media (--onecol) {
          display: block;
          position: fixed;
          top: 1.0625rem;
          right: var(--sticky-header__padding--onecol-leftright);
          z-index: 3;
        }
        @media (--fluid) {
          right: var(--sticky-header__padding--fluid-leftright);
        }
      }
    }

    &\--search {
      flex: 0 1 auto;
      @nest .header--sticky & {
        top: .875rem;
      }
      @nest .pagenav__content--is-open & {
        top: .5rem;
        right: 0;

        @media (--fluid) {
          left: 0;
        }
      }
      @nest .pagenav__content--search-is-open & {
        @media (--twocol) {
          top: .9375rem;
        }
        @media (--fluid) {
          left: auto;
          position: relative;
        }
      }
    }
  }

  &\__content {
    position: relative;

    @nest .header--sticky & {
      margin: 0;
      max-width: 100%;

      @media (--onecol) {
        background-color: var(--background-light);
        display: flex;
        height: 0;
        justify-content: center;
        opacity: 0;
        overflow: hidden;
        transition: opacity var(--transition__duration--default) ease;
        visibility: hidden;
        width: 0;
      }
    }
    @nest .pagenav__content--is-open & {
      @media (--onecol) {
        bottom: 0;
        height: 100vh;
        left: 0;
        opacity: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        position: fixed;
        right: 0;
        top: 0;
        visibility: visible;
        width: 100vw;
        z-index: 1;
      }
    }
  }

  &\__items {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    position: relative;
    text-transform: uppercase;
    transition: font-size var(--transition__duration--default), justify-content var(--transition__duration--default);

    @media (--fluid) {
      height: 0;
      overflow: hidden;
      @nest .pagenav__content--is-open & {
        height: auto;
        overflow: visible;
      }
    }

    @nest .header--sticky & {
      font-size: .75rem;
      justify-content: flex-end;
      line-height: 2.7;

      @media (--onecol) {
        align-items: center;
        flex-flow: column nowrap;
        font-size: 1rem;
        justify-content: center;
        line-height: 4;
        margin: 3em 0;
        width: 90%;
      }

      @media (--fluid) {
        width: 100%;
      }

      @media (--fluid-landscape) {
        justify-content: space-around;
        line-height: 1.5;
        margin: 3.5em 0 2em;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }
    }

    @nest .header--sticky .pagenav__content--search-is-open & {
      @media (--fluid) {
        line-height: 2.7;
      }
    }
  }

  &\__item {
    transition: opacity var(--transition__duration--default);

    &\--search {
      align-self: center;

      @nest .header--sticky & {
        margin-left: 2em;

        @media (--onecol) {
          border-bottom: .125rem solid transparent;
          margin-left: 0;
          padding-bottom: .25rem;
        }
      }

      @nest .header--sticky .pagenav__content--search-is-open & {
        border-color: #212123;

        @media (--onecol) {
          width: 100%;
        }
      }
    }

    @nest .pagenav__content--search-is-open &:not(.pagenav__item--search) {
      opacity: 0;

      @media (--fluid-landscape) {
        display: none;
      }
    }
    @nest .header--sticky.pagenav__content--is-open & {
      opacity: 1;
    }
  }

  &\__link.link {
    color: var(--linkcolor__nav);
    margin: 0 .5em;
    padding: .75em 1.5em;

    &:--enter, &\--is-active {
      color: var(--linkcolor__nav--hover);
    }

    @nest .header--sticky & {
      padding: .75em 1em;
    }
    @nest .header--sticky.pagenav__content--is-open & {
      padding: 0 1em;
    }
  }

  &\__search {
    background: var(--background-light);
    display: flex;
    flex-flow: row nowrap;
    height: 99%;
    padding-right: 1.125rem;
    position: absolute;
    right: 0;
    top: 0;
    width: 0;

    @nest .pagenav__content--search-is-open & {
      animation: slideinTransition .25s linear .25s 1 forwards;
    }

    @nest .header--sticky & {
      @media (--onecol) {
        margin: 0 auto;
        padding-right: 1.25rem;
        position: relative;
      }
    }

    @nest .header--sticky .pagenav__content--search-is-open & {
      animation-name: slideinTransition--overlay;

      @media (--onecol) {
        animation: none;
        width: 100%;
      }
    }

    & > .searchform {
      flex: 1 0 auto;
    }
  }
}

@keyframes slideinTransition--overlay {
  0% {
    width: 0;
  }
  1% {
    width: 32%;
  }
  100% {
    width: 35%;
  }
}

@keyframes slideinTransition {
  0% {
    width: 0;
  }
  1% {
    width: 95%;
  }
  100% {
    width: 100%;
  }
}