.wv-tag {
  /* 基础变量 */
  --wv-tag-height: var(--wv-tag-badge-height-default);
  --wv-tag-font-size: var(--wv-font-size-mini);
  
  /* 布局 */
  display: inline-flex;
  gap: var(--wv-margin-mini);
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
  
  /* 尺寸 */
  min-width: 0;
  height: var(--wv-tag-height);
  padding: var(--wv-padding-mini) var(--wv-padding-small);
  
  /* 样式 */
  border-radius: var(--wv-border-radius-small);
  font-size: var(--wv-tag-font-size);
  line-height: 1;
  transition: all 0.2s ease;
}


/* 缩放选中效果 */
.wv-tag.selected.scale {
  transform: scale(1.05);
  z-index: 1;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
}

/* 尺寸变体 */
.wv-tag.huge {
  --wv-tag-height: var(--wv-tag-badge-height-huge);
  --wv-tag-font-size: var(--wv-font-size-small);
  padding: var(--wv-padding-small) var(--wv-padding-default);
}

.wv-tag.large {
  --wv-tag-height: var(--wv-tag-badge-height-large);
  --wv-tag-font-size: var(--wv-font-size-small);
  padding: var(--wv-padding-mini) var(--wv-padding-small);
}

.wv-tag {
  --wv-tag-height: var(--wv-tag-badge-height-default);
  --wv-tag-font-size: var(--wv-font-size-small);
}

.wv-tag.small {
  --wv-tag-height: var(--wv-tag-badge-height-small);
  --wv-tag-font-size: var(--wv-font-size-mini);
}

.wv-tag.mini {
  --wv-tag-height: var(--wv-tag-badge-height-mini);
  --wv-tag-font-size: var(--wv-font-size-mini);
  padding: var(--wv-padding-mini) var(--wv-padding-mini);
  border-radius: var(--wv-border-radius-mini);
}

/* 带关闭按钮的标签 */
.wv-tag .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--wv-tag-height) * 0.5);
  height: calc(var(--wv-tag-height) * 0.5);
  font-size: calc(var(--wv-tag-font-size) * 0.8);
  opacity: 0.7;
}

/* 圆角标签 */
.wv-tag.pill {
  border-radius: 100rpx;
}

/* 方形标签 */
.wv-tag.square {
  border-radius: var(--wv-border-radius-none);
}




/* 角标样式 */
.wv-tag-badge {
  --wv-badge-size: 12rpx;
  
  position: absolute;
  width: var(--wv-badge-size);
  height: var(--wv-badge-size);
  z-index: 1;
  opacity: 0.8;
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 图标样式调整 */
.wv-tag-badge .icon {
  position: absolute;
  transform: rotate(-45deg);
}

.wv-tag-badge.top-left .icon {
  right: -4rpx;
}

.wv-tag-badge.top-right .icon {
  bottom: -4rpx;
}

.wv-tag-badge.bottom-left .icon {
  top: -3rpx;
}

.wv-tag-badge.bottom-right .icon {
  left: -2rpx;
}

/* 尺寸变体 */
.wv-tag.huge .wv-tag-badge {--wv-badge-size: calc(var(--wv-form-check-radio-height-huge));}
.wv-tag.large .wv-tag-badge {--wv-badge-size: calc(var(--wv-form-check-radio-height-large));}
.wv-tag .wv-tag-badge {--wv-badge-size: calc(var(--wv-form-check-radio-height-default));}
.wv-tag.small .wv-tag-badge {--wv-badge-size: calc(var(--wv-form-check-radio-height-small));}
.wv-tag.mini .wv-tag-badge {--wv-badge-size: calc(var(--wv-form-check-radio-height-mini)); }

/* 右上角的三角形 */
.wv-tag-badge.top-right {
  top: calc(var(--wv-badge-size) / -2);
  right: calc(var(--wv-badge-size) / -2);
}

/* 左上角的三角形 */
.wv-tag-badge.top-left {
  top: calc(var(--wv-badge-size) / -2);
  left: calc(var(--wv-badge-size) / -2);
}

/* 右下角的三角形 */
.wv-tag-badge.bottom-right {
  bottom: calc(var(--wv-badge-size) / -2);
  right: calc(var(--wv-badge-size) / -2);
}

/* 左下角的三角形 */
.wv-tag-badge.bottom-left {
  bottom: calc(var(--wv-badge-size) / -2);
  left: calc(var(--wv-badge-size) / -2);
}

/* 边框模式使用文本颜色 */
.wv-tag.border .wv-tag-badge.top-right {
  border-color: transparent #333 transparent transparent;
}

.wv-tag.border .wv-tag-badge.top-left {
  border-color: #333 transparent transparent transparent;
}

.wv-tag.border .wv-tag-badge.bottom-right {
  border-color: transparent transparent #333 transparent;
}

.wv-tag.border .wv-tag-badge.bottom-left {
  border-color: transparent transparent transparent #333;
}

/* 3D dimension effect for tags */
.wv-tag.dimension {
  position: relative;
  box-shadow: 0 1px 0px rgba(190, 187, 185, 0.5) inset, 0 1px 0 rgba(252, 252, 252, 0.5);
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(0, 0, 0, 0.05) 100%
  ) !important;
}

.wv-tag.dimension:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

/* Special handling for border style tags with dimension */
.wv-tag.dimension.border {
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(0, 0, 0, 0.02) 100%
  ) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Enhance selected state for dimension tags */
.wv-tag.dimension.selected {
  box-shadow: 0 1px 0px rgba(190, 187, 185, 0.7) inset, 0 1px 0 rgba(252, 252, 252, 0.7);
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(0, 0, 0, 0.08) 100%
  ) !important;
}

/* Special handling for checkmark with dimension */
.wv-tag.dimension .wv-tag-badge {
  box-shadow: 0 1px 0px rgba(190, 187, 185, 0.5) inset, 0 1px 0 rgba(252, 252, 252, 0.5);
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(0, 0, 0, 0.05) 100%
  ) !important;
}