.n-slide-navigation

  &.dark
    color white
    border-radius 4px
    background-color rgba(20,33,51,0.8)
    box-shadow 4px 4px 16px rgba(0,0,0,0.16)
  &.normal
    color #142133

.n-slide-navs
  &-scroll
    overflow auto
  &-items
    max-height 100%


.n-slide-navs-large
  max-height 100%
  overflow-x hidden

.n-slide-navs-small
  max-height 100%
  display flex
  position relative
  .n-slide-navs-line
    max-height 100%
    padding 2px 0
    overflow-x hidden
  .n-slide-navs-text
    padding 2px 0
    position absolute
    right 100%
    max-height 100%
    overflow hidden
    background-color #FFF
    border-radius 4px
    box-shadow 0 2px 8px 0 rgba(22, 22, 22, 0.25)

// 右侧滑入
.slide-navs-enter-active
.slide-navs-leave-active
  transition all .2s ease
.slide-navs-enter
.slide-navs-leave-to
  opacity 0
  transform translateX(100%)


.n-slide-navigation
  position relative
  &-dot
    width 8px
    height 8px
    left 5px
    position absolute
    border-radius 50%
    background-color #FFF
    border 2px solid $primary-color
    transition top 0.2s ease
  &-item
    n-font-s()
    height 24px
    cursor pointer
    display flex
    align-items center
    color $n-color-3
    white-space nowrap
    transition all 0.2s ease
    border-color #CACCD4
    &.hover
      color tint($primary-color, 25%)
      border-color tint($primary-color, 30%)
    &.active
      color $primary-color
      border-color @color
      font-weight bold
  .line
    margin 0 8px
    height 24px
    border-left-width 2px
    border-style solid
    border-color inherit
    transition border-color 0.2s ease
  .text
    display inline-block
    margin-left 6px
    margin-right 10px
    line-height 24px