.nav-wrap
  padding: 0 1rem
  z-index: 8
  top: 0
  background: var(--site-bg)
  if hexo-config('style.site') && hexo-config('style.site.background-image')
    position inherit
    background: none
  else 
    position: sticky
    position: -webkit-sticky
    margin-bottom: 1px
    margin-top: -8px
  &:after
    content: ''
    width: 'calc(100% - 2 * %s)' % 1rem
    height: 2px
    border-radius: 2px
    position: absolute
    bottom: 0
    left: 1rem
    background: var(--block-hover)

nav.cap
  display: flex
  overflow: scroll visible
  scrollbar(0, 0)
  >p
    margin: 0
  a
    padding: .25rem 0.75rem
    if hexo-config('style.site') && hexo-config('style.site.background-image')
      margin: 10px 0.25rem 8px 0
    else
      margin: 10px 0.25rem 8px 0.25rem
    line-height: 2
    color: var(--text-p3)
    border-radius: $border-button
    font-weight: 500
    white-space: nowrap
    position: relative
    z-index: 1
    &:after
      height: 2px
      position: absolute
      bottom: -8px
      left: 0.75rem
      right: 0.75rem
      background: $color-theme
      border-radius: 2px
      pointer-events: none
    &:hover
      background: var(--block-hover)
    &.active, &:hover
      color: var(--text-p1)
    &.active
      background: var(--card)
      box-shadow: $boxshadow-button
    &.active:after
      content: ''
  a+a
    margin-left: 4px

@media screen and (max-width: $device-mobile-max)
  .nav-wrap
    margin-top: 0
    padding-left: 0
    padding-right: 0
    nav
      a:first-child
        margin-left: 1rem
      a:last-child
        margin-right: 1rem