@import "var";

.@{prefixName}-tag {
  display: inline-block;
  font-size: @tag-sm-text-size;
  line-height: 1;
  color: @tag-text-color;
  padding: @tag-padding;
  border: 1px solid;
  border-radius: @tag-border-radius;

  &.size {
    &-md {
      font-size: @tag-md-text-size;
    }
    &-lg {
      font-size: @tag-lg-text-size;
    }
  }

  &--default {
    background-color: @tag-default-background-color;
    border-color: @tag-default-border-color;
  }
  &--primary {
    background-color: @tag-primary-background-color;
    border-color: @tag-primary-border-color;
  }
  &--success {
    background-color: @tag-success-background-color;
    border-color: @tag-success-border-color;
  }
  &--warning {
    background-color: @tag-warning-background-color;
    border-color: @tag-warning-border-color;
  }
  &--danger {
    background-color: @tag-danger-background-color;
    border-color: @tag-danger-border-color;
  }
  
  &--outline {
    background-color: @tag-outline-background-color;

    &.@{prefixName}-tag--default {
      color: @tag-default-text-color;
    }
    &.@{prefixName}-tag--primary {
      color: @tag-primary-text-color;
    }
    &.@{prefixName}-tag--success {
      color: @tag-success-text-color;
    }
    &.@{prefixName}-tag--warning {
      color: @tag-warning-text-color;
    }
    &.@{prefixName}-tag--danger {
      color: @tag-danger-text-color;
    }
  }
  
  &--round {
    border-radius: @tag-round-border-radius;
  }

  &.is-clickable {
    opacity: @opacity-active;
  }
}