/**
 * 通用红点提醒样式
 * 提供可复用的红点通知组件样式
 */

/* 红点容器 - 相对定位的父容器 */
.notification-container {
  position: relative;
}

/* 红点样式 */
.notification-dot {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #ff4757, #ff3742);
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(255, 71, 87, 0.3);
  z-index: 10;
  animation: pulse 2s infinite;
  transform-origin: center;
}

/* 带数字的红点样式 */
.notification-dot.with-count {
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  color: #ffffff;
  line-height: 1;
  padding: 0 4px;
  box-sizing: border-box;
}

/* 大数字时的样式调整 */
.notification-dot.with-count.large-count {
  min-width: 22px;
  height: 18px;
  font-size: 9px;
}

/* 隐藏状态 */
.notification-dot.hidden {
  display: none;
}

/* 显示动画 */
.notification-dot.show {
  animation: showDot 0.3s ease-out;
}

/* 消失动画 */
.notification-dot.hide {
  animation: hideDot 0.3s ease-in forwards;
}

/* 脉搏动画 */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 显示动画 */
@keyframes showDot {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 隐藏动画 */
@keyframes hideDot {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

/* 不同位置的红点 */
.notification-dot.top-left {
  top: -5px;
  left: -5px;
  right: auto;
}

.notification-dot.top-right {
  top: -5px;
  right: -5px;
}

.notification-dot.bottom-left {
  bottom: -5px;
  left: -5px;
  top: auto;
  right: auto;
}

.notification-dot.bottom-right {
  bottom: -5px;
  right: -5px;
  top: auto;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .notification-dot {
    width: 10px;
    height: 10px;
    top: -4px;
    right: -4px;
  }
  
  .notification-dot.with-count {
    min-width: 16px;
    height: 16px;
    font-size: 9px;
  }
  
  .notification-dot.with-count.large-count {
    min-width: 20px;
    height: 16px;
    font-size: 8px;
  }
}