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

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

/* 状态颜色 - 从 documents_index.css 同步 */
.status-pending {
  background-color: #E6F7FF;
  color: #1890FF;
}

.status-processing {
  background-color: #FFF7E6;
  color: #FA8C16;
}

.status-pass {
  background-color: #F6FFED;
  color: #52C41A;
}

.status-warning {
  background-color: #FFFBE6;
  color: #FAAD14;
}

.status-fail {
  background-color: #FFF1F0;
  color: #F5222D;
}

/* 动画效果 - 用于processing状态 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.status-processing i {
  animation: spin 1.2s linear infinite;
}

/* 状态徽章尺寸 */
.status-badge-sm {
  padding: 0px 4px;
  font-size: 11px;
}

.status-badge-lg {
  padding: 3px 10px;
  font-size: 14px;
}

/* 带图标的状态徽章 */
.status-badge i {
  margin-right: 4px;
}

/* 可点击的状态徽章 */
.status-badge-clickable {
  cursor: pointer;
  transition: background-color 0.2s;
}

.status-badge-clickable.status-pending:hover {
  background-color: #BAE7FF;
}

.status-badge-clickable.status-processing:hover {
  background-color: #FFE7BA;
}

.status-badge-clickable.status-pass:hover {
  background-color: #D9F7BE;
}

.status-badge-clickable.status-warning:hover {
  background-color: #FFF1B8;
}

.status-badge-clickable.status-fail:hover {
  background-color: #FFCCC7;
}