/* SVGアイコン共通スタイル */

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* アイコンサイズ */
.icon-sm {
  width: 20px;
  height: 20px;
}

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

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

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

.icon-2xl {
  width: 64px;
  height: 64px;
}

/* アイコンカラー */
.icon-primary {
  color: var(--primary);
}

.icon-secondary {
  color: var(--secondary);
}

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

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

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

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

/* グラデーションアイコン */
.icon-gradient svg {
  fill: url(#icon-gradient);
}

/* アイコンコンテナ */
.icon-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  padding: 12px;
  background: var(--bg-light);
  transition: all 0.3s;
}

.icon-container:hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  transform: scale(1.05);
}

.icon-container-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  color: white;
}

.icon-container-lg {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-lg);
}

/* アニメーション */
@keyframes icon-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.icon-pulse {
  animation: icon-pulse 2s ease-in-out infinite;
}