@import '../common/index.wxss';

.van-tag {
  position: relative;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  padding: 0 8rpx;
  padding: var(--tag-padding,0 8rpx);
  color: #fff;
  color: var(--tag-text-color,#fff);
  font-size: 24rpx;
  font-size: var(--tag-font-size,24rpx);
  line-height: 32rpx;
  line-height: var(--tag-line-height,32rpx);
  border-radius: 4rpx;
  border-radius: var(--tag-border-radius,4rpx);
}

.van-tag--default {
  background-color: #969799;
  background-color: var(--tag-default-color,#969799);
}

.van-tag--default.van-tag--plain {
  color: #969799;
  color: var(--tag-default-color,#969799);
}

.van-tag--danger {
  background-color: #ee0a24;
  background-color: var(--tag-danger-color,#ee0a24);
}

.van-tag--danger.van-tag--plain {
  color: #ee0a24;
  color: var(--tag-danger-color,#ee0a24);
}

.van-tag--primary {
  background-color: #1989fa;
  background-color: var(--tag-primary-color,#1989fa);
}

.van-tag--primary.van-tag--plain {
  color: #1989fa;
  color: var(--tag-primary-color,#1989fa);
}

.van-tag--success {
  background-color: #07c160;
  background-color: var(--tag-success-color,#07c160);
}

.van-tag--success.van-tag--plain {
  color: #07c160;
  color: var(--tag-success-color,#07c160);
}

.van-tag--warning {
  background-color: #ff976a;
  background-color: var(--tag-warning-color,#ff976a);
}

.van-tag--warning.van-tag--plain {
  color: #ff976a;
  color: var(--tag-warning-color,#ff976a);
}

.van-tag--plain {
  background-color: #fff;
  background-color: var(--tag-plain-background-color,#fff);
}

.van-tag--plain:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 2rpx solid;
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.van-tag--medium {
  padding: 4rpx 12rpx;
  padding: var(--tag-medium-padding,4rpx 12rpx);
}

.van-tag--large {
  padding: 8rpx 16rpx;
  padding: var(--tag-large-padding,8rpx 16rpx);
  font-size: 28rpx;
  font-size: var(--tag-large-font-size,28rpx);
  border-radius: 8rpx;
  border-radius: var(--tag-large-border-radius,8rpx);
}

.van-tag--mark {
  border-radius: 0 1998rpx 1998rpx 0;
  border-radius: 0 var(--tag-round-border-radius,1998rpx) var(--tag-round-border-radius,1998rpx) 0;
}

.van-tag--mark:after {
  display: block;
  width: 4rpx;
  content: "";
}

.van-tag--round {
  border-radius: 1998rpx;
  border-radius: var(--tag-round-border-radius,1998rpx);
}

.van-tag__close {
  min-width: 1em;
  margin-left: 4rpx;
}