.tag {
  $root: #{&};
  display: inline-block;
  height: $tag-height;
  padding: 0 $tag-padding-x;
  margin: $tag-margin-y $tag-margin-x $tag-margin-y 0;
  line-height: $tag-height;
  color: $white;
  vertical-align: middle;
  background-color: $gray;
  @include border-radius($border-radius);
  &__title {
    display: inline-block;
    font-size: $font-size-xs;
    white-space: nowrap;
    vertical-align: top;
  }

  &__clear {
    margin-left: $tag-title-font-size;
    font-size: $tag-title-close-font-size;
    color: $gray;
    cursor: pointer;
    &:hover{
      color: $body-color;
    }
  }

  &--text {
    padding: 0 $tag-text-padding-x;
    color: $gray;
    background-color: $default-bg;
  }

  &--pill {
    @include border-radius($tag-pill-border-radius);
  }

  &--status {
    color: $gray;
    background: transparent;

    #{$root}__title,
    #{$root}__prefix-icon {
      display: inline-block;
      vertical-align: middle;
    }
    #{$root}__title {
      font-size: $tag-status-title-font-size;
    }
    #{$root}__prefix-icon {
      width: $tag-status-prefix-icon-width;
      height: $tag-status-prefix-icon-height;
      margin-right: $tag-status-prefix-icon-spacer-x;
      background: $gray;
      box-shadow: $tag-status-prefix-icon-box-shadow;
      @include border-radius(100%);
    }
  }

  //colors
  @each $key, $value in (
    "success": $brand-success $white,
    "danger": $brand-danger $white,
    "warning": $brand-warning $white,
    "info": $brand-info $white,
    "primary": $brand-primary $white,
    "muted": $divider-bg $gray,
    "dark": $gray-dark $white,
  ) {
    $bg: nth($value, 1);
    $color: nth($value, 2);
    &--#{$key} {
      color: $color;
      background-color: $bg;
      &.tag--status{
        color: $bg;
        background: transparent;
        #{$root}__prefix-icon {
          background: $bg;
          box-shadow: 0 2px 5px rgba($bg,.2);
        }
      }
      #{$root}__title{
        &--clear{
          color: rgba($color,.7);
          &:hover{
            color: $color;
          }
        }
      }
    }
  }
}
