/**
 * 状态徽章组件样式
 */

/* 状态徽章基础样式 */
.status-badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

/* 状态徽章尺寸 */
.status-badge-sm {
  @apply px-2 py-0.5 text-xs;
}

.status-badge-lg {
  @apply px-3 py-1 text-sm;
}

/* 状态徽章类型 */
.status-badge-success {
  @apply bg-green-100 text-green-800;
}

.status-badge-processing {
  @apply bg-blue-100 text-blue-800;
}

.status-badge-warning {
  @apply bg-yellow-100 text-yellow-800;
}

.status-badge-error {
  @apply bg-red-100 text-red-800;
}

.status-badge-default {
  @apply bg-gray-100 text-gray-800;
}

/* 带图标的状态徽章 */
.status-badge-with-icon {
  @apply pl-1.5;
}

.status-badge i {
  @apply mr-1;
}

/* 可点击的状态徽章 */
.status-badge-clickable {
  @apply cursor-pointer transition-colors duration-200;
}

.status-badge-clickable.status-badge-success:hover {
  @apply bg-green-200;
}

.status-badge-clickable.status-badge-processing:hover {
  @apply bg-blue-200;
}

.status-badge-clickable.status-badge-warning:hover {
  @apply bg-yellow-200;
}

.status-badge-clickable.status-badge-error:hover {
  @apply bg-red-200;
}

.status-badge-clickable.status-badge-default:hover {
  @apply bg-gray-200;
}