.page-nav
  +media-breakpoint-up(lg)
    +position(right 0, top 3.5rem)
    position: sticky
    overflow: hidden
  +media-breakpoint-down(md)
    position: static

.page-nav__title
  +text-block(.875rem 1.4, 600)

.page-nav__title-inner
  display: block
  text-align: center
  padding: .5rem .75rem
  color: var(--default-text)
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis

a.page-nav__title-inner
  text-decoration: none
  &:hover
    text-decoration: underline

.page-nav__footer-link
  +block-link
  +text-block(.8125rem 1.4)
  text-align: right
  padding: .5rem .75rem
  color: var(--default-text)
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis
  &:hover
    text-decoration: underline

.page-nav__items
  overflow-y: auto
  +position(relative, 1)
  +media-breakpoint-up(lg)
    max-height: calc(100vh - 8.5rem)
  +media-breakpoint-down(md)
    max-height: 12rem

=page-nav-current($background-color, $border-color, $text-color, $pointer-events-none)
  +position(relative, 1)
  box-shadow: 0 0 0 1px $border-color inset
  background-color: $background-color
  border-bottom: none
  .page-nav__item-link
    background-color: transparent
    color: $text-color
    @if $pointer-events-none == true
      pointer-events: none

.page-nav__item
  &:not(:last-child)
    border-bottom: solid 1px var(--border-tint)
  &.is-active
    .page-nav__item-link
      color: var(--default-text)
      font-weight: 700
  &.is-current
    +page-nav-current(var(--primary-tint), var(--primary), var(--primary-text), true)
  &.is-current:not(:last-child)
    margin-bottom: -1px
  &.is-current:last-child
    border-radius: 0 0 .25rem .25rem
  &.is-reply-warning
    +page-nav-current(var(--reply-warning-background), var(--reply-warning-border), var(--default-text), false)
  &.is-reply-alert
    +page-nav-current(var(--reply-alert-background), var(--reply-alert-border), var(--reversal-text), false)
  &.is-reply-deadline
    +page-nav-current(var(--reply-deadline-background), var(--reply-deadline-border), var(--reversal-text), false)
  &.is-inactive
    position: static
    &:not(:last-child)
      border-bottom: solid 1px var(--border)
    .page-nav__item-link
      background-color: var(--background)
      color: var(--muted-text)
      pointer-events: none

.page-nav__item-link
  padding: .75rem
  +text-block(.8125rem 1.4)
  color: var(--semi-muted-text)
  +block-link
  transition: all .1s ease-in
  background-color: transparent
  &:hover
    color: var(--primary-text)
    text-decoration: underline

.page-nav__item-header .a-badge
  transform: translateY(-.125em)
  margin-right: .25rem

.page-nav__item-title
  +text-block(.875rem 1.4, 600 inline)

.page-nav-metas
  margin-top: .25rem
  font-size: .75rem
  display: flex
  flex-wrap: wrap
  gap: .25rem .75rem

.page-nav__item-link-inner
  +flex-link
  gap: .5rem
  align-items: center
