@import "../style/var.less";
@padding-normal: @padding-base*0.5 @padding-base*1.5;
:root {
  --yh-small-font-size: @font-size-sm;
  --yh-normal-font-size: @font-size-sm;
  --yh-large-font-size: @font-size-md;
  --yh-small-padding: 0 @padding-base;
  --yh-normal-padding: @padding-normal;
  --yh-large-padding: @padding-base  @padding-xs;
  --yh-small-radius: 2px;
  --yh-normal-radius: 2px;
  --yh-large-radius: 4px;
  --yh-tag-type-primary: @color-primary;
  --yh-tag-type-success: @color-success;
  --yh-tag-type-warning: @color-warning;
  --yh-tag-type-danger: @color-danger;
  --yh-tag-type-info: @color-info;
  --yh-tag-max-radus:  999px;
  --yh-tag-close-left-margin:5px;
}

.yh--tag {
  color: #fff;
  display: inline-flex;
  align-items: center;
  &:active {
    opacity: 0.8;
  } 
  &--type-primary {
    background-color: var(--yh-tag-type-primary);
    border:1px solid var(--yh-tag-type-primary);

    &.yh--tag--plain {
    background-color:transparent;
    color: var(--yh-tag-type-primary);
    }
  }
  &--type-success {
    background-color: var(--yh-tag-type-success);
    border:1px solid var(--yh-tag-type-success);
    &.yh--tag--plain {
      background-color:transparent;
      color: var(--yh-tag-type-success);  
      }
  }
  &--type-warning {
    background-color: var(--yh-tag-type-warning);
    border:1px solid var(--yh-tag-type-warning);
    &.yh--tag--plain {
      background-color:transparent;
      color: var(--yh-tag-type-warning); 
      }
  }
  &--type-danger {
    background-color: var(--yh-tag-type-danger);
    border:1px solid var(--yh-tag-type-danger);
    &.yh--tag--plain {
      background-color:transparent;
      color: var(--yh-tag-type-danger);
      }
  }
  &--type-info {
    background-color: var(--yh-tag-type-info);
    border:1px solid var(--yh-tag-type-info);
    &.yh--tag--plain {
      background-color:transparent;
      color: var(--yh-tag-type-info);
      }
  }

  &--size-small {
    font-size: var(--yh-small-font-size);
    padding: var(--yh-small-padding);
    border-radius: var(--yh-small-radius);
  }
  &--size-normal {
    font-size: var(--yh-normal-font-size);
    padding: var(--yh-normal-padding);
    border-radius: var(--yh-normal-radius);
  }
  &--size-large {
    font-size: var(--yh-large-font-size);
    padding: var(--yh-large-padding);

    border-radius: var(--yh-large-radius);
  }
  &.yh--tag--round {
   border-radius: var( --yh-tag-max-radus); 
  } 
  .yh-tag-close {
    margin-left: var(--yh-tag-close-left-margin);
  }
}