.root
  display flex
  align-items center
  user-select none
  vertical-align middle
  width 100%
  overflow-x scroll
  white-space nowrap
  margin-top 31px
  position absolute

.root::-webkit-scrollbar
  display none

.tag
  display flex
  align-items center
  margin 0px 2px
  padding 2px 4px
  background-color alpha($ui-tag-backgroundColor, 3%)
  border-radius 4px
  position relative
  clearfix()

.tag-removeButton
  margin 0
  padding 0
  border-style solid
  border-width 0
  border-radius 20px
  background-color transparent
  color $ui-button-color
  position absolute
  right 6px

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

.tag-label
  font-size 13px
  color: $ui-text-color
  padding 4px 16px 4px 8px

.newTag
  box-sizing border-box
  border none
  background-color transparent
  outline none
  padding 0 4px
  font-size 13px

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
    
body[data-theme="solarized-dark"]
  .tag
    background-color $ui-solarized-dark-tag-backgroundColor

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

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

  .newTag
    border-color none
    background-color transparent
    color $ui-solarized-dark-text-color