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

    &--clear {
      margin-left: $tag-text-padding-x;
      margin-right: -$tag-text-padding-x/2;
      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;
      color: $gray;
    }
    #{$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": rgba($brand-success, .1) $brand-success,
    "danger": rgba($brand-danger, .1) $brand-danger,
    "warning": rgba($brand-warning, .1) $brand-warning,
    "info": rgba($brand-info, .1) $brand-info,
    "primary": rgba($brand-primary, .1) $brand-primary,
    "muted": $gray-lightest-5 $gray-light,
    "dark": $gray-dark $white,
  ) {
    $bg: nth($value, 1);
    $color: nth($value, 2);
    &--#{$key} {
      color: $color;
      background-color: $bg;
      &.tag--status{
        color: $gray-dark;
        background: transparent;
        #{$root}__prefix-icon {
          background: $color;
          box-shadow: $tag-status-prefix-icon-box-shadow;
        }
      }
      #{$root}__title{
        &--clear{
          color: rgba($color,.7);
          &:hover{
            color: $color;
          }
        }
      }
    }
  }
}