/* 🍄 Psilobase - Custom Mushroom Icons
 * SVG-based icon system for mushroom-related graphics
 */

:root {
  --icon-size: 24px;
  --icon-color: currentColor;
  --icon-stroke-width: 2;
}

/* Base Icon Container */
.mushroom-icon {
  display: inline-block;
  width: var(--icon-size);
  height: var(--icon-size);
  vertical-align: middle;
  fill: var(--icon-color);
  stroke: var(--icon-color);
  stroke-width: var(--icon-stroke-width);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Icon Sizes */
.mushroom-icon--xs {
  --icon-size: 16px;
  --icon-stroke-width: 1.5;
}

.mushroom-icon--sm {
  --icon-size: 20px;
}

.mushroom-icon--md {
  --icon-size: 24px;
}

.mushroom-icon--lg {
  --icon-size: 32px;
  --icon-stroke-width: 2.5;
}

.mushroom-icon--xl {
  --icon-size: 48px;
  --icon-stroke-width: 3;
}

/* Icon Colors */
.mushroom-icon--primary {
  --icon-color: var(--primary-color, #2c5f2d);
}

.mushroom-icon--secondary {
  --icon-color: var(--secondary-color, #8b4513);
}

.mushroom-icon--accent {
  --icon-color: var(--accent-color, #d4af37);
}

.mushroom-icon--danger {
  --icon-color: var(--danger-color, #dc3545);
}

.mushroom-icon--warning {
  --icon-color: var(--warning-color, #ffc107);
}

.mushroom-icon--success {
  --icon-color: var(--success-color, #28a745);
}

/* Animated Icons */
.mushroom-icon--spin {
  animation: mushroom-icon-spin 2s linear infinite;
}

@keyframes mushroom-icon-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

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

@keyframes mushroom-icon-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

.mushroom-icon--bounce {
  animation: mushroom-icon-bounce 1s ease-in-out infinite;
}

@keyframes mushroom-icon-bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

/* Category Icons */
.mushroom-icon--category {
  border-radius: 50%;
  padding: 0.5rem;
  background: var(--bg-hover, #f5f5f5);
}

[data-theme='dark'] .mushroom-icon--category {
  background: var(--bg-hover, #2a2a2a);
}

/* Inline Icon in Text */
.mushroom-icon--inline {
  width: 1em;
  height: 1em;
  margin: 0 0.2em;
  vertical-align: -0.15em;
}

/* Icon Backgrounds */
.mushroom-icon-bg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5em;
  height: 2.5em;
  border-radius: 0.5rem;
  background: var(--bg-light, #f8f9fa);
  transition: all 0.3s ease;
}

.mushroom-icon-bg:hover {
  background: var(--bg-hover, #e9ecef);
  transform: translateY(-2px);
}

[data-theme='dark'] .mushroom-icon-bg {
  background: var(--bg-dark, #2a2a2a);
}

[data-theme='dark'] .mushroom-icon-bg:hover {
  background: var(--bg-hover, #3a3a3a);
}

/* Icon with Label */
.mushroom-icon-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.mushroom-icon-label__text {
  font-size: 0.875rem;
  font-weight: 500;
}

/* Specific Mushroom Type Icons */

/* Psilocybe Cubensis */
.icon-cubensis {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a7c59' stroke-width='2'%3E%3Cpath d='M12 3C9 3 7 5 7 7c0 3 2 4 5 4s5-1 5-4c0-2-2-4-5-4z'/%3E%3Cline x1='12' y1='11' x2='12' y2='21'/%3E%3Cellipse cx='12' cy='17' rx='2' ry='1'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Amanita Muscaria */
.icon-amanita {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc3545' stroke-width='2'%3E%3Cpath d='M12 3C8 3 5 6 5 9c0 4 3 5 7 5s7-1 7-5c0-3-3-6-7-6z' fill='%23dc3545'/%3E%3Ccircle cx='9' cy='8' r='1' fill='white'/%3E%3Ccircle cx='15' cy='8' r='1' fill='white'/%3E%3Ccircle cx='12' cy='6' r='1' fill='white'/%3E%3Cline x1='12' y1='14' x2='12' y2='21'/%3E%3Cpath d='M10 21h4v-3h-4z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Oyster Mushroom */
.icon-oyster {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b4513' stroke-width='2'%3E%3Cpath d='M4 12C4 8 7 6 10 6c2 0 4 1 5 2 1-1 3-2 5-2 3 0 6 2 6 6 0 3-2 6-8 6H8c-4 0-4-3-4-6z'/%3E%3Cpath d='M10 14c0 3 1 5 2 7'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Growing/Cultivation Icon */
.icon-growing {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a7c59' stroke-width='2'%3E%3Cpath d='M12 21V9'/%3E%3Cpath d='M8 13c0-2 1-4 4-4s4 2 4 4'/%3E%3Cpath d='M7 19h10v2H7z'/%3E%3Cpath d='M9 13c-1-1-2-3-2-5 0-1 1-2 2-2'/%3E%3Cpath d='M15 13c1-1 2-3 2-5 0-1-1-2-2-2'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Dosage Icon */
.icon-dosage {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a7c59' stroke-width='2'%3E%3Crect x='8' y='4' width='8' height='16' rx='2'/%3E%3Cline x1='8' y1='10' x2='16' y2='10'/%3E%3Cline x1='8' y1='14' x2='16' y2='14'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Safety/Warning Icon */
.icon-safety {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffc107' stroke-width='2'%3E%3Cpath d='M12 2L3 7v6c0 5.5 3.8 10.7 9 12 5.2-1.3 9-6.5 9-12V7l-9-5z'/%3E%3Cline x1='12' y1='8' x2='12' y2='13'/%3E%3Ccircle cx='12' cy='16' r='0.5' fill='%23ffc107'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Identification Icon */
.icon-identification {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a7c59' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3Cpath d='M11 8v6'/%3E%3Cpath d='M8 11h6'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Trip/Experience Icon */
.icon-trip {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 1v6'/%3E%3Cpath d='M12 17v6'/%3E%3Cpath d='M4.22 4.22l4.24 4.24'/%3E%3Cpath d='M15.54 15.54l4.24 4.24'/%3E%3Cpath d='M1 12h6'/%3E%3Cpath d='M17 12h6'/%3E%3Cpath d='M4.22 19.78l4.24-4.24'/%3E%3Cpath d='M15.54 8.46l4.24-4.24'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Microscopy Icon */
.icon-microscopy {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a7c59' stroke-width='2'%3E%3Cpath d='M6 18h8'/%3E%3Cpath d='M3 22h12'/%3E%3Cpath d='M14 22a7 7 0 1 0 0-14h-1'/%3E%3Cpath d='M9 8h2'/%3E%3Cpath d='M9 12v-2c0-.6.4-1 1-1h1c.6 0 1 .4 1 1v2'/%3E%3Cpath d='M10 14l.01 0'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Spore Print Icon */
.icon-spore-print {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b4513' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='1' fill='%238b4513'/%3E%3Ccircle cx='9' cy='9' r='0.5' fill='%238b4513'/%3E%3Ccircle cx='15' cy='9' r='0.5' fill='%238b4513'/%3E%3Ccircle cx='9' cy='15' r='0.5' fill='%238b4513'/%3E%3Ccircle cx='15' cy='15' r='0.5' fill='%238b4513'/%3E%3Ccircle cx='7' cy='12' r='0.5' fill='%238b4513'/%3E%3Ccircle cx='17' cy='12' r='0.5' fill='%238b4513'/%3E%3Ccircle cx='12' cy='7' r='0.5' fill='%238b4513'/%3E%3Ccircle cx='12' cy='17' r='0.5' fill='%238b4513'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Taxonomy Icon */
.icon-taxonomy {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a7c59' stroke-width='2'%3E%3Cpath d='M12 2v6'/%3E%3Cpath d='M12 8l-4 4'/%3E%3Cpath d='M12 8l4 4'/%3E%3Cpath d='M8 12v6'/%3E%3Cpath d='M16 12v6'/%3E%3Ccircle cx='12' cy='2' r='1'/%3E%3Ccircle cx='8' cy='18' r='1'/%3E%3Ccircle cx='16' cy='18' r='1'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Community Icon */
.icon-community {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a7c59' stroke-width='2'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Icon Grid Display */
.mushroom-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 1rem;
  padding: 1rem;
}

.mushroom-icon-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: 0.5rem;
  background: var(--bg-light, #f8f9fa);
  transition: all 0.3s ease;
  cursor: pointer;
}

.mushroom-icon-grid__item:hover {
  background: var(--bg-hover, #e9ecef);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.mushroom-icon-grid__label {
  font-size: 0.75rem;
  text-align: center;
  color: var(--text-secondary, #6c757d);
}

[data-theme='dark'] .mushroom-icon-grid__item {
  background: var(--bg-dark, #2a2a2a);
}

[data-theme='dark'] .mushroom-icon-grid__item:hover {
  background: var(--bg-hover, #3a3a3a);
}

/* Responsive */
@media (max-width: 768px) {
  .mushroom-icon-grid {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 0.75rem;
  }

  .mushroom-icon-grid__item {
    padding: 0.75rem;
  }
}