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

.root::-webkit-scrollbar
  display none

.tag
  display inline-block
  margin 1px 3px
  padding 0
  height 20px
  background-color alpha($ui-tag-backgroundColor, 10%)
  border-radius 3px
  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 11px
  font-weight 600
  color: alpha($ui-text-color, 80%)
  float left
  height 20px
  line-height 20px
  padding 0 6px

.newTag
  display inline-block
  margin 2px 0 15px 2px
  vertical-align middle
  height 18px
  box-sizing border-box
  border none
  background-color transparent
  outline none
  padding 0 4px

body[data-theme="dark"]
  .tag
    background-color alpha($ui-dark-tag-backgroundColor, 60%)

  .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 none
    background-color transparent
    color $ui-dark-text-color