.n-btn-group
  display inline-block
  white-space nowrap
  overflow visible
  .n-btn:hover
    color $primary-color

// default
.n-btn-group-default
  .n-btn + .n-btn
    margin-left -1px
  .n-btn.active
    position relative
    z-index 1
  & > .n-btn
    border-radius 0
    n-set-color($n-color-1, white, $n-color-5)
    &:first-child
      border-top-left-radius 4px
      border-bottom-left-radius 4px
    &:last-child
      border-top-right-radius 4px
      border-bottom-right-radius 4px
    &.active
      n-set-color(white, $primary-color, $primary-color)

// primary
.n-btn-group-primary > .n-btn
  n-set-color($n-color-1, white, white)
  &.active
    n-set-color(white, $primary-color, $primary-color)


// circle
.n-btn-group-primary.circle
  background-color #F9F9F9
  border-radius 16px
  & > .n-btn
    border-radius 16px
    background-color transparent
  & > .n-btn.active
    background-color $primary-color


// outline
.n-btn-group-primary.outline > .n-btn.active
  n-set-color($primary-color, white, $primary-color)