.tag
  display: flex
  align-items: center
  justify-content: center
  padding: 4px 12px
  border-radius: 4px
  border: 1px solid $border-secondary
  background: transparent
  font-weight: $weight-medium
  background: $white
  position: relative
  color: $text-secondary

  i
    color: $text-secondary !important
    margin-right: 5px

  &:not(:first-child)
      margin-left: 5px

  &:not(:last-child)
    margin-right: 5px

  &.is-light
    border: 1px solid $border-default
    color: $text-secondary
    font-weight: $weight-normal

    i
      color: $text-secondary !important

  &.is-medium, &.is-fullwidth
    width: 100px
    display: block
    margin-left: auto
    margin-right: auto
    text-align: center
    padding: 5px 10px

    i, img
      font-size: 14px !important
      margin-right: 7px
      display: inline-block
      width: 14px
      height: 14px

    i
      padding-top: 1px

  &.is-fullwidth
    width: 100%

  &.is-small
    min-width: 100px
    font-size: 13px
    padding: 2px 10px

    i
      font-size: 16px
      margin-right: 5px

  @each $name, $color in $colors
    &.is-#{$name}
      color: $color
      background: rgba($color, .2)
      border-color: $color

      i
        color: $color !important
