.navbar
  z-index: 8
  top: var(--gap-page)
  position: sticky
  position: -webkit-sticky

.navbar-blur 
  margin: 0 1rem
  position: relative
  border-radius: $border-bar-container
  corner-shape: $corner-shape
  trans1: all
  // 未吸顶：卡片样式（var(--card) 底色 + 文章卡片同款阴影），与文章卡片一致
  background: var(--card)
  box-shadow: $boxshadow-card
  // 吸顶后恢复玻璃效果（bar-glass()），与之前行为一致
  &.pinned
    bar-glass()
    background: transparent

.navbar-container 
  max-width: 100%
  border-radius: $border-bar-container
  overflow: scroll visible
  scrollbar(0, 0)
  
.navbar nav
  display: inline-flex
  font-size: $fs-14
  gap: $bar-item-gap
  padding: $bar-item-gap
  z-index: 1
  >p
    margin: 0
  a
    bar-item()
    &:hover
      background: var(--bg-a50)
    &.active, &:hover
      color: var(--text)
    &.active
      bar-item-active()
      cursor default
      pointer-events: none
    &.active:after
      content: ''

@media screen and (max-width: $device-mobile-max)
  .navbar.top
    top: 8pt