.#{$tag-prefix-cls} {
  $root: #{&};
  display: inline-block;
  height: $tag-height;
  padding: 0 $tag-padding-x;
  line-height: $tag-height;
  color: $tag-color;
  vertical-align: middle;
  background-color: $tag-bg;
  border: $tag-border;
  @include border-radius($border-radius);

  &__title {
    display: inline-block;
    font-size: $tag-title-font-size;
    white-space: nowrap;
    vertical-align: top;
  }

  &__closable {
    padding: 0 $tag-padding-x;
    font-size: 0;
    #{$root}-title__clear {
      margin-left: 4px;
      font-size: $tag-title-font-size;
      cursor: pointer;
    }
  }

  &__create {
    font-size: 0;
    border-style: dashed;
    i {
      margin-right: 4px;
      font-size: $tag-title-font-size;
    }
  }

  &__checkable {
    cursor: pointer;
    background: none;
    border: none;
    &.checked {
      background-color: $brand-primary;
      color: $white;
    }
  }

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

  &__status {
    display: inline-flex;
    align-items: center;
    height: $tag-status-height;
    border-radius: $tag-status-height;
    padding: 0 $tag-status-padding;
    #{$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-light-45;
      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-light-4 $gray-light-25,
    "dark": $gray-light-65 $white,
  ) {
    $bg: nth($value, 1);
    $color: nth($value, 2);
    &__#{$key} {
      border: transparent;
      color: $color;
      background-color: $bg;
      &.#{$tag-prefix-cls}__status{
        #{$root}__prefix-icon {
          background: $color;
          box-shadow: 0 2px 5px rgba($bg,.2);
        }
      }
      #{$root}__title{
        &__clear{
          font-size: $tag-title-font-size;
          color: $color;
          cursor: pointer;
          &:hover{
            color: $color;
          }
        }
      }
    }
  }
}