.wayo-tag{
  display: inline-block;
  font-weight: 500;
  text-align: center;
  box-sizing: border-box;
  white-space: nowrap;
  line-height: 1;
  font-size: $font-size-common;
  @include border-radius(2px);

  &_outline{
    border: solid 1px;
  }
  &_round{
    @include border-radius(50% unquote("/") 100%);
  }
}
.wayo-tag_type{
  &_default{
    background-color: $color-grey-7;
    color: $color-font-common;
    &.wayo-tag_outline{
      background-color: $color-white-1;
      color: $color-font-common;
      border-color: $color-font-common;
    }
  }
  &_primary{
    background-color: $color-primary;
    color: $color-white-1;
    &.wayo-tag_outline{
      background-color: $color-white-1;
      color: $color-primary;
      border-color: $color-primary;
    }
  }
  &_info{
    background-color: $color-info;
    color: $color-white-1;
    &.wayo-tag_outline{
      background-color: $color-white-1;
      color: $color-info;
      border-color: $color-info;
    }
  }
  &_success{
    background-color: $color-success;
    color: $color-white-1;
    &.wayo-tag_outline{
      background-color: $color-white-1;
      color: $color-success;
      border-color: $color-success;
    }
  }
  &_warning{
    background-color: $color-warning;
    color: $color-white-1;
    &.wayo-tag_outline{
      background-color: $color-white-1;
      color: $color-warning;
      border-color: $color-warning;
    }
  }
  &_danger{
    background-color: $color-danger;
    color: $color-white-1;
    &.wayo-tag_outline{
      background-color: $color-white-1;
      color: $color-danger;
      border-color: $color-danger;
    }
  }
}
.wayo-tag_size{
  &_default{
    font-size:$font-size-default;
    padding: 5px 10px;
  }
  &_large{
    font-size:$font-size-large;
    padding: 7px 15px;
  }
  &_small{
    font-size:$font-size-small;
    padding: 3px 6px;
  }
  &_mini{
    font-size:$font-size-mini;
    padding: 2px 5px;
  }
}