/* ============================================================
   川渝好门户 - 专业图标系统 v2.1
   ============================================================ */

/* ========== SVG 图标样式 ========== */
.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

/* 调整大小 */
.icon-xs {
  width: 14px;
  height: 14px;
}

.icon-sm {
  width: 16px;
  height: 16px;
}

.icon-md {
  width: 20px;
  height: 20px;
}

.icon-lg {
  width: 24px;
  height: 24px;
}

.icon-xl {
  width: 32px;
  height: 32px;
}

/* 调整颜色 */
.icon-primary {
  color: var(--cy-primary);
}

.icon-success {
  color: var(--cy-success);
}

.icon-warning {
  color: var(--cy-warning);
}

.icon-danger {
  color: var(--cy-danger);
}

.icon-muted {
  color: var(--cy-text-muted);
}

/* 旋转动画 */
.icon-spin {
  animation: icon-spin 1s linear infinite;
}

@keyframes icon-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 跳动动画 */
.icon-pulse {
  animation: icon-pulse 1.5s ease-in-out infinite;
}

@keyframes icon-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* ========== 常用图标定义 ========== */

/* 基础图标 */
.icon-home {
  width: 20px;
  height: 20px;
}

.icon-forum {
  width: 18px;
  height: 18px;
}

.icon-portal {
  width: 20px;
  height: 20px;
}

.icon-weibo {
  width: 18px;
  height: 18px;
}

/* 内容图标 */
.icon-news {
  width: 18px;
  height: 18px;
}

.icon-article {
  width: 18px;
  height: 18px;
}

.icon-video {
  width: 18px;
  height: 18px;
}

.icon-image {
  width: 18px;
  height: 18px;
}

/* 生活服务图标 */
.icon-food {
  width: 18px;
  height: 18px;
}

.icon-house {
  width: 18px;
  height: 18px;
}

.icon-auto {
  width: 18px;
  height: 18px;
}

.icon-travel {
  width: 18px;
  height: 18px;
}

.icon-life {
  width: 18px;
  height: 18px;
}

.icon-info {
  width: 18px;
  height: 18px;
}

/* 操作图标 */
.icon-search {
  width: 18px;
  height: 18px;
}

.icon-comment {
  width: 18px;
  height: 18px;
}

.icon-like {
  width: 18px;
  height: 18px;
}

.icon-share {
  width: 18px;
  height: 18px;
}

.icon-edit {
  width: 18px;
  height: 18px;
}

.icon-delete {
  width: 18px;
  height: 18px;
}

.icon-view {
  width: 18px;
  height: 18px;
}

.icon-add {
  width: 18px;
  height: 18px;
}

/* 用户图标 */
.icon-user {
  width: 18px;
  height: 18px;
}

.icon-avatar {
  width: 18px;
  height: 18px;
}

.icon-login {
  width: 18px;
  height: 18px;
}

.icon-logout {
  width: 18px;
  height: 18px;
}

/* 状态图标 */
.icon-success {
  width: 18px;
  height: 18px;
}

.icon-warning {
  width: 18px;
  height: 18px;
}

.icon-danger {
  width: 18px;
  height: 18px;
}

.icon-info {
  width: 18px;
  height: 18px;
}

/* 媒体图标 */
.icon-wechat {
  width: 18px;
  height: 18px;
}

.icon-weibo {
  width: 18px;
  height: 18px;
}

.icon-qq {
  width: 18px;
  height: 18px;
}

/* 专业图标定义 */
.icon-arrow-left {
  width: 18px;
  height: 18px;
}

.icon-arrow-right {
  width: 18px;
  height: 18px;
}

.icon-arrow-up {
  width: 18px;
  height: 18px;
}

.icon-arrow-down {
  width: 18px;
  height: 18px;
}

.icon-menu {
  width: 24px;
  height: 24px;
}

.icon-close {
  width: 24px;
  height: 24px;
}

.icon-ellipsis {
  width: 24px;
  height: 24px;
}

/* ========== 高级图标样式 ========== */
.icon-gradient-primary {
  stroke: url(#icon-gradient-primary);
}

.icon-gradient-success {
  stroke: url(#icon-gradient-success);
}

.icon-gradient-warning {
  stroke: url(#icon-gradient-warning);
}

.icon-gradient-danger {
  stroke: url(#icon-gradient-danger);
}

/* 图标渐变定义 */
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ========== 响应式图标调整 ========== */
@media (max-width: 768px) {
  .icon {
    width: 18px;
    height: 18px;
  }
  .icon-lg {
    width: 20px;
    height: 20px;
  }
}