@import '../../stylesheets/defaults'

.mp-tag
  background-color mp-tag-background-color()
  border-radius 13px
  box-sizing border-box
  color $white
  display inline-flex
  font-family $family-helvetica
  font-size-default()
  font-weight $weight-bold
  padding 5px 15px

  &.default-tag
    .extra-icon
      top 2px

  &.small-tag
    .extra-icon
      top 2px

  &.clickable:hover
    background-color $grey-500
    cursor pointer

  &.removable
    padding-right 10px

  .extra-icon
    left -4px
    position relative

    svg-icon-style($white, size: 14px)

  .remove-tag
    border-radius 20px
    cursor pointer
    height 16px
    left 3px
    position relative
    width 16px

    .remove-icon
      position relative
      top 1px

      svg-icon-style($grey-300, white, size: 16px)