/**
 * 状态点组件样式
 */

/* 状态点基础样式 */
.status-dot {
  @apply inline-block w-2 h-2 rounded-full;
}

/* 状态点类型 */
.status-dot-success {
  @apply bg-green-500;
}

.status-dot-processing {
  @apply bg-blue-500;
}

.status-dot-warning {
  @apply bg-yellow-500;
}

.status-dot-error {
  @apply bg-red-500;
}

.status-dot-default {
  @apply bg-gray-400;
}

/* 状态点尺寸 */
.status-dot-sm {
  @apply w-1.5 h-1.5;
}

.status-dot-lg {
  @apply w-3 h-3;
}

/* 带脉冲动画的状态点 */
.status-dot-pulse {
  @apply relative;
}

.status-dot-pulse::after {
  content: '';
  @apply absolute w-full h-full rounded-full -left-1 -top-1 animate-ping;
}

.status-dot-pulse.status-dot-success::after {
  @apply bg-green-400 opacity-60;
}

.status-dot-pulse.status-dot-processing::after {
  @apply bg-blue-400 opacity-60;
}

.status-dot-pulse.status-dot-warning::after {
  @apply bg-yellow-400 opacity-60;
}

.status-dot-pulse.status-dot-error::after {
  @apply bg-red-400 opacity-60;
}

/* 带文本的状态点 */
.status-dot-with-text {
  @apply flex items-center justify-center;
}

.status-dot-text {
  @apply ml-1.5 text-sm;
  color: inherit;
}

/* 状态文本颜色 */
.status-dot-success + .status-dot-text {
  @apply text-green-600;
}

.status-dot-default + .status-dot-text {
  @apply text-gray-500;
}