/* =============================================================
   COMPONENT / ICON
   
   Базовый размер — из переменной --icon-size.
   Её значение по умолчанию — --icon-md (24px).
   
   Контексты переопределяют ТОЛЬКО переменную, а не width/height.
   Это даёт чистую кастомизацию без конфликтов специфичности.
   ============================================================= */

/* --- Базовая иконка --- */
svg.icon {
    min-width: var(--icon-size, var(--icon-md));
    height: var(--icon-size, var(--icon-md));
    fill: none;
    stroke: var(--text-primary);
}

/* --- Filled-иконка --- */
svg.icon.big {
    stroke: none;
    margin: auto;
}

/* --- Модификатор: маленькая --- */
svg.icon.sm {
    --icon-size: var(--icon-sm);
}

/* --- Модификатор: большая --- */
svg.icon.lg {
    --icon-size: var(--icon-lg);
}

/* --- Внутри кнопки — размер по умолчанию md --- */
.btn svg.icon {
    fill: none;
    stroke: currentColor;
    pointer-events: none;
}

/* --- Иконки-плашки в таблицах --- */
svg.comment.icon {
    --icon-size: var(--icon-sm);
    vertical-align: middle;
    fill: var(--yellow-500);
    stroke: none;
    margin-left: var(--space-2);
}

svg.image2.icon {
    --icon-size: var(--icon-sm);
    vertical-align: middle;
    fill: var(--blue-500);
    stroke: none;
    margin-left: var(--space-2);
}