/* ============================================
   КАСТОМНЫЕ SVG-ИКОНКИ
   ============================================ */

/* ---------- БАЗОВЫЙ КЛАСС ДЛЯ ВСЕХ ИКОНОК ---------- */
.icon {
  display: inline-block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  
  -webkit-mask-image: var(--icon);
  mask-image: var(--icon);
  
  -webkit-mask-size: contain;
  mask-size: contain;
  
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  
  -webkit-mask-position: center;
  mask-position: center;
  
  transition: background-color 0.2s ease;
}

/* ---------- ВСПОМОГАТЕЛЬНЫЙ КЛАСС ДЛЯ ВСТРОЕННЫХ ИКОНОК ---------- */
.icon-inline {
  display: inline-block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 8px;
}

/* ---------- НАВИГАЦИЯ ---------- */
.icon-home { --icon: url('../icons/home.svg'); }
.icon-courses { --icon: url('../icons/courses.svg'); }
.icon-visual { --icon: url('../icons/visual.svg'); }
.icon-templates { --icon: url('../icons/templates.svg'); }
.icon-tests { --icon: url('../icons/tests.svg'); }
.icon-profile { --icon: url('../icons/profile.svg'); }

/* ---------- ТЕСТЫ (ИЗБРАННОЕ) ---------- */
.icon-favorite-off { --icon: url('../icons/favorite-off.svg'); }
.icon-favorite-on { --icon: url('../icons/favorite-on.svg'); }

/* ---------- ПРОФИЛЬ (аватар-плейсхолдер) ---------- */
.icon-avatar-placeholder { --icon: url('../icons/avatar-placeholder.svg'); }

/* ---------- ПОДПИСКИ ---------- */
.icon-free { --icon: url('../icons/free.svg'); }
.icon-gift { --icon: url('../icons/gift.svg'); }

/* ---------- ТЕСТЫ ---------- */
.icon-timer { --icon: url('../icons/timer.svg'); }
.icon-random { --icon: url('../icons/random.svg'); }
.icon-exam { --icon: url('../icons/exam.svg'); }
.icon-folder { --icon: url('../icons/folder.svg'); }
.icon-difficulty { --icon: url('../icons/difficulty.svg'); }
.icon-theme { --icon: url('../icons/theme.svg'); }
.icon-back { --icon: url('../icons/back.svg'); }
.icon-lock { --icon: url('../icons/lock.svg'); }
.icon-check { --icon: url('../icons/check.svg'); }
.icon-cross { --icon: url('../icons/cross.svg'); }
.icon-warning { --icon: url('../icons/warning.svg'); }
.icon-info { --icon: url('../icons/info.svg'); }
.icon-chart { --icon: url('../icons/chart.svg'); }
.icon-progress { --icon: url('../icons/progress.svg'); }
.icon-comment { --icon: url('../icons/comment.svg'); }
.icon-diamond { --icon: url('../icons/diamond.svg'); }

/* ---------- УРОВНИ СЛОЖНОСТИ ---------- */
.icon-level-novice { --icon: url('../icons/level-novice.svg'); }
.icon-level-experienced { --icon: url('../icons/level-experienced.svg'); }
.icon-level-specialist { --icon: url('../icons/level-specialist.svg'); }
.icon-level-top { --icon: url('../icons/level-top.svg'); }
.icon-level-expert { --icon: url('../icons/level-expert.svg'); }