.page-body__inner.has-side-nav
  +media-breakpoint-up(lg)
    padding-right: var(--side-nav-width)

.a-side-nav
  background-color: var(--base)
  +media-breakpoint-up(lg)
    +position(absolute, right 0, top -1.5rem, bottom -1.5rem)
    width: var(--side-nav-width)
    border-left: solid 1px var(--border)
    height: calc(100% + 3rem)
  +media-breakpoint-down(md)
    border: solid 1px var(--border)
    border-radius: .25rem
    margin-top: 1rem
  +media-breakpoint-only(md)
    margin-inline: 1.5rem
  +media-breakpoint-down(sm)
    margin-inline: 1rem

.a-side-nav__inner
  +media-breakpoint-up(lg)
    max-height: 100%
    position: sticky
    top: var(--header-height__md-up)
    display: flex
    flex-direction: column

.a-side-nav__header
  height: 2.5rem
  display: flex
  align-items: center
  justify-content: space-between
  +media-breakpoint-up(md)
    padding: .75rem 1rem
  +media-breakpoint-down(sm)
    padding: .5rem .75rem

.a-side-nav__title
  +text-block(.875rem 1.4, 600)
  width: 100%

.a-side-nav__title-link
  +block-link
  width: 100%
  text-align: center
  color: var(--default-text)
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis
  &:hover
    text-decoration: underline

.a-side-nav__footer
  height: 2.5rem
  display: flex
  align-items: center
  justify-content: flex-end
  +media-breakpoint-up(md)
    padding: .5rem 1.25rem
  +media-breakpoint-down(sm)
    padding: .5rem .75rem

.a-side-nav__footer-link
  +text-block(.8125rem 1.4)
  color: var(--muted-text)
  +hover-link-reversal

.a-side-nav__body
  overflow: auto

=a-side-nav-current($background-color, $border-color, $text-color, $pointer-events-none)
  +position(relative, 1)
  border: solid 1px $border-color
  background-color: $background-color
  .a-side-nav__item-link
    background-color: transparent
    color: $text-color
    @if $pointer-events-none == true
      pointer-events: none

.a-side-nav__item
  &:not(:first-child)
    border-top: solid 1px var(--border)
  &.is-active
    .a-side-nav__item-link
      color: var(--default-text)
      font-weight: 700
  &.is-current
    +a-side-nav-current(var(--primary-tint), var(--primary), var(--primary-text), true)

.a-side-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
  &:not(.has-metas):hover
    color: var(--primary-text)
    text-decoration: underline
  &.has-metas:hover
    .a-side-nav__item-title
      transition: all .2s ease-out
      color: var(--primary-text)
      text-decoration: underline

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

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

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