/* badge.wxss */
.wv-badge {
  /* 基础变量 - updated to use _size.wxss variables */
  --wv-badge-size: var(--wv-tag-badge-height-default);
  --wv-badge-font-size: var(--wv-font-size-mini);
  --wv-badge-dot-size: 16rpx;
  
  /* 布局 */
  display: inline-flex;
  gap: var(--wv-margin-mini); /* 添加gap属性处理内部元素间距 */
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  vertical-align: middle;
  position: relative;
  
  /* 尺寸 */
  min-width: var(--wv-badge-size);
  height: var(--wv-badge-size);
  padding: var(--wv-padding-small) var(--wv-padding-mini);
  
  /* 样式 - using updated border radius and color variables */
  border-radius: var(--wv-border-radius-mini);
  font-size: var(--wv-badge-font-size);
  line-height: 1;
  transition: all 0.2s ease;
}


/* 禁用状态 - 使用CSS变量而不是简单的opacity */
.wv-badge.disabled {
  --wv-tag-color: var(--wv-background-color-muted);
  --wv-tag-text-color: var(--wv-content-color-fit-background-muted-disabled);
  filter: grayscale(0.8);
  pointer-events: none;
}

.wv-badge.border.disabled {
  background-color: transparent;
  border-color: var(--wv-background-color-muted-disabled);
  color: var(--wv-background-color-muted-disabled);
}


/* === 标准尺寸 === */
.wv-badge.huge {
  --wv-badge-size: var(--wv-tag-badge-height-huge);
  --wv-badge-font-size: var(--wv-font-size-small);
}

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

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

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

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

/* === 点状尺寸（独立体系）=== */
.wv-badge.dot {
  /* 重置基础尺寸 */
  min-width: var(--wv-badge-dot-size);
  width: var(--wv-badge-dot-size);
  height: var(--wv-badge-dot-size);
  padding: 0;
  font-size: 0;
  line-height: 0;
  border-radius: 50%; /* 点状徽标始终是圆形 */
}

.wv-badge.dot.huge { --wv-badge-dot-size: 24rpx; }
.wv-badge.dot.large { --wv-badge-dot-size: 20rpx; }
.wv-badge.dot, .wv-badge.dot.default { --wv-badge-dot-size: 16rpx; }
.wv-badge.dot.small { --wv-badge-dot-size: 12rpx; }
.wv-badge.dot.mini { --wv-badge-dot-size: 8rpx; }


/* 示例：保持定位样式 */
.wv-badge.absolute {
  position: absolute;
}

.wv-badge.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.wv-badge.top, .wv-badge.top-center {
  top: calc(var(--wv-badge-dot-size) * -0.5);
  left: 50%;
  transform: translateX(-50%);
}

.wv-badge.bottom, .wv-badge.bottom-center {
  bottom: calc(var(--wv-badge-dot-size) * -0.5);
  left: 50%;
  transform: translateX(-50%);
}

.wv-badge.top-left {
  top: calc(var(--wv-badge-dot-size) * -0.5);
  left: calc(var(--wv-badge-dot-size) * -0.5);
  transform: none;
  align-items: flex-start;
}

.wv-badge.top-right {
  top: calc(var(--wv-badge-dot-size) * -0.5);
  right: calc(var(--wv-badge-dot-size) * -0.5);
  left: auto;
  transform: none;
  align-items: flex-end;
}

.wv-badge.center-left {
  top: 50%;
  left: calc(var(--wv-badge-dot-size) * -0.5);
  transform: translate(0, -50%);
  align-items: flex-start;
}

.wv-badge.center-right {
  top: 50%;
  right: calc(var(--wv-badge-dot-size) * -0.5);
  left: auto;
  transform: translate(0, -50%);
  align-items: flex-end;
}

.wv-badge.bottom-left {
  bottom: calc(var(--wv-badge-dot-size) * -0.5);
  left: calc(var(--wv-badge-dot-size) * -0.5);
  transform: none;
  align-items: flex-start;
}

.wv-badge.bottom-right {
  bottom: calc(var(--wv-badge-dot-size) * -0.5);
  right: calc(var(--wv-badge-dot-size) * -0.5);
  left: auto;
}

/* === 内容处理 === */
/*.wv-badge:empty {
  min-width: 16rpx;
  width: 16rpx;
  height: 16rpx;
  padding: 0;
}*/

.wv-badge.ellipsis {
  max-width: 80rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* === 特殊形状 === */
/* 移除rect类，因为默认已经是矩形了 */

/* 新增pill类，设置为圆形/胶囊外观 */
.wv-badge.pill {
  border-radius: 100rpx;
}

.wv-badge.ribbon {
  border-radius: 4rpx 100rpx 100rpx 4rpx;
  padding-right: 12rpx;
}

/* === 动画 === */

/* 渐隐效果 */
.wv-badge.pulse {
  animation: badge-pulse 1.2s ease-in-out infinite;
}

@keyframes badge-pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

/* 闪烁效果 */
@keyframes badge-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.wv-badge.blink {
  animation: badge-blink 1.5s linear infinite;
}

/* 抖动效果 */
.wv-badge.shake {
  animation: badge-shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes badge-shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* 缩放跳动效果 */
.wv-badge.bounce {
  animation: badge-bounce 1s forwards;
  transform-origin: center bottom; 
}

@keyframes badge-bounce {
  0%, 100% { transform: translateY(0); }
  8% { transform: translateY(-8px); }
  16% { transform: translateY(0); }
  24% { transform: translateY(-6px); }
  32% { transform: translateY(0); }
  40% { transform: translateY(-4px); }
  48% { transform: translateY(0); }
  56% { transform: translateY(-2px); }
  64% { transform: translateY(0); }
  72% { transform: translateY(-1px); }
  80% { transform: translateY(0); }
}

/* 3D dimension effect for badges */
.wv-badge.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-badge.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 badges with dimension */
.wv-badge.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);
}

/* Special handling for dot style badges with dimension */
.wv-badge.dimension.dot {
  box-shadow: 0 1px 0px rgba(190, 187, 185, 0.5) inset, 0 1px 0 rgba(252, 252, 252, 0.5);
}

/* Enhance shadow effect for pill badges */
.wv-badge.dimension.pill {
  box-shadow: 0 1px 0px rgba(190, 187, 185, 0.5) inset, 0 1px 0 rgba(252, 252, 252, 0.5);
}