// Tags

.wy-tag-input-group
  padding: 4px 4px 0px 4px
  display: inline-block
  border: 1px solid $input-border-color
  font-size: 80%
  font-family: $base-font-family
  box-shadow: inset 0 1px 3px $input-shadow-color
  background: $input-background-color
  +transition(border .3s linear)
  +font-smooth
  .wy-tag
    display: inline-block
    background-color: rgba(0,0,0,.1)
    padding: em(8px) em(10px)
    border-radius: 2px
    position: relative
    margin-bottom: 4px
    +transition(background-color .5s ease-in-out)
    &.on
      background-color: rgba(0,0,0,.2)
      .wy-tag-remove
        color: $red
    &.active
      background-color: rgba(0,0,0,.2)
    .wy-tag-remove
      @extend %icon
      @extend .#{$icon-prefix}-#{$icon-close}
      color: $gray-lighter
      margin-left: 5px
      &:hover
        color: $red
  // label is used here as an icon to the input, which is why normal label stuff is removed
  label
    margin-left: 5px
    display: inline-block
    margin-bottom: 0
  input
    border: none
    font-size: 100%
    margin-bottom: 4px
    box-shadow: none

