@charset "UTF-8";

/**
 * 统一的操作按钮样式
 * 用于表格操作列等场景
 */

.art-action-btn {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center; /* 增加居中 */
  min-width: 64px;
  padding: 6px 12px;
  font-size: 13px;
  line-height: 1;
  color: var(--el-text-color-primary);
  cursor: pointer;
  background: var(--el-fill-color-light);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 10px;
  transition: all 0.15s ease; /* 移动 transition 到这里 */

  .art-action-icon {
    display: flex;
    font-size: 16px;
  }

  &:hover {
    filter: brightness(0.97);
  }

  /* 样式变体 */
  &.primary {
    color: var(--el-color-primary);
    background: var(--el-color-primary-light-9);
    border-color: var(--el-color-primary-light-8);
  }

  &.success {
    color: var(--el-color-success);
    background: var(--el-color-success-light-9);
    border-color: var(--el-color-success-light-8);
  }

  &.warning {
    color: var(--el-color-warning);
    background: var(--el-color-warning-light-9);
    border-color: var(--el-color-warning-light-8);
  }

  &.danger {
    color: var(--el-color-danger);
    background: var(--el-color-danger-light-9);
    border-color: var(--el-color-danger-light-8);
  }

  &.info {
    color: var(--el-text-color-secondary);
    background: var(--el-fill-color-lighter);
    border-color: var(--el-border-color-lighter);
  }
}

/* 操作按钮容器 */
.action-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
