.tag {

cursor: default;
font-size: 12px;
border-radius: 3px;
border-width: 1px;
border-style: solid;
border-color: #ccc;
padding: 1px 9px;
display: inline-block;
text-align: center;
min-width: 56px;

&.tag-btn {
  background-color: transparent;
  cursor: pointer;
  &.hover,
  &:hover {
    box-shadow: 0 1px 3px 0 rgba(50, 50, 93, .11),
      0 1px 3px 0 rgba(0, 0, 0, .08);
  }
  &.active,
  &:active {
    box-shadow: none;
  }
  &.disabled,
  &:disabled {
    cursor: not-allowed;
  }
}

@each $classname, $bg in $bg-tags {
  &.#{$classname} {
    border-color: $bg;
    color: $bg;
  }
}

&.tag-danger-ex {
  color: $color-tag-danger-ex;
  background-color: $bg-tag-danger-ex;
  border: 1px solid $bg-tag-danger-ex;
}

}