.root
  display: inline-block
  position relative
  user-select none
  vertical-align middle
  width 300px
  overflow-x scroll
  white-space nowrap

.root::-webkit-scrollbar
  display none

.tag
  display inline-block
  margin 0 2px
  padding-left 10px
  vertical-align middle
  height 20px
  background-color $ui-tag-backgroundColor
  border-radius 20px
  overflow hidden
  clearfix()

.tag-removeButton
  float right
  height 20px
  width 18px
  margin 0
  padding 0
  border-style solid
  border-width 0
  border-radius 20px
  line-height 18px
  background-color transparent
  color $ui-button-color

.tag-removeButton-icon
  width 5px
  padding-right 4px

.tag-label
  font-size 12px
  font-weight bold
  color: #FFFFFF
  float left
  height 20px
  line-height 20px
  padding 0 6px

.newTag
  display inline-block
  margin 0 2px
  vertical-align middle
  height 24px
  box-sizing borde-box
  border none
  border-bottom $ui-border
  background-color transparent
  outline none
  padding 0 4px
  &:focus
    border-color $ui-input--focus-borderColor = #369DCD
  &:disabled
    background-color $ui-input--disabled-backgroundColor = #DDD

.add-tag-button
  display inline
  margin-left 5px
  width 20px
  height 20px
  border none
  border-radius 20px
  padding 0
  color #FFFFFF
  &:hover
    background-color rgba(0, 0, 0, 0.3)
  &:active, &:active:hover
    background-color rgba(0, 0, 0, 0.5)
    color $ui-button--active-color

body[data-theme="dark"]
  .icon
    color $ui-dark-button-color

  .tag
    background-color $ui-dark-tag-backgroundColor

  .tag-removeButton
    border-color $ui-button--focus-borderColor
    background-color transparent
    color $ui-button-color

  .tag-label
    color $ui-dark-text-color

  .newTag
    border-color $ui-dark-borderColor
    background-color transparent
    color $ui-dark-text-color
    &:focus
      border-color $ui-input--focus-borderColor = #369DCD
    &:disabled
      background-color $ui-input--disabled-backgroundColor = #DDD

  .add-tag-button
    &:hover
      background-color rgba(255, 255, 255, 0.3)
    &:active, &:active:hover
      background-color rgba(255, 255, 255, 0.5)
      color $ui-button--active-color
