/* Wiki Navigation Icon System - SVG-based for consistency and scalability */

:root {
  /* Icon sizing system */
  --icon-xs: 12px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 28px;
}

/* Base icon class */
.wiki-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-md);
  height: var(--icon-md);
  flex-shrink: 0;
  position: relative;
}

/* Replacement for old emoji/unicode icons */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-md);
  height: var(--icon-md);
  flex-shrink: 0;
}

/* Search Icon */
.wiki-icon-search::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Article/Document Icon */
.wiki-icon-article::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14,2 14,8 20,8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10,9 9,9 8,9"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Expand/Collapse Arrow - Downward */
.wiki-icon-expand::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6,9 12,15 18,9"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform var(--transition-fast);
}

/* Rotated state for expanded */
.wiki-icon-expand.expanded::before {
  transform: rotate(180deg);
}

/* Folder/Category Icon */
.wiki-icon-folder::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Icon size variations */
.wiki-icon-xs { width: var(--icon-xs); height: var(--icon-xs); }
.wiki-icon-sm { width: var(--icon-sm); height: var(--icon-sm); }
.wiki-icon-md { width: var(--icon-md); height: var(--icon-md); }
.wiki-icon-lg { width: var(--icon-lg); height: var(--icon-lg); }
.wiki-icon-xl { width: var(--icon-xl); height: var(--icon-xl); }

/* Color variants */
.wiki-icon-primary { color: var(--gold); }
.wiki-icon-secondary { color: var(--medium-gray); }
.wiki-icon-light { color: #ecf0f1; }
.wiki-icon-success { color: #27ae60; }
.wiki-icon-danger { color: #e74c3c; }

/* Animation states */
.wiki-icon-pulse::before {
  animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Hover effects */
.wiki-icon:hover {
  transform: scale(1.1);
  transition: transform var(--transition-fast);
}