/*
 * Иконки инструментов, окрашенные в цвет своей категории.
 *
 * Раньше иконка вставлялась как <img>, а цвет был ЖЁСТКО ЗАШИТ внутрь SVG
 * (fill="#17a2b8" и т.п.). Поэтому одна и та же иконка у инструментов из разных
 * категорий светила чужим цветом, а переиспользовать иконку было нельзя без
 * копии файла в другом цвете.
 *
 * Теперь SVG используется как МАСКА: форму берём из файла, а цвет — из CSS
 * (currentColor), то есть из цвета категории, заданного инлайном на элементе.
 * Цвета внутри самих SVG при этом игнорируются.
 */
/* Размеры повторяют прежние: 48px в карточках /tools (там <img> рисовался в
   натуральную величину 48x48) и 26px в виджете «Похожие инструменты». */
.tool-icon {
    display: inline-block;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask-image: var(--tool-icon);
            mask-image: var(--tool-icon);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}

/* Браузеры без mask-image (очень старые): показываем исходный SVG как картинку,
   без перекраски — лучше, чем сплошной цветной квадрат. */
@supports not ((-webkit-mask-image: url('')) or (mask-image: url(''))) {
    .tool-icon {
        background-color: transparent;
        background-image: var(--tool-icon);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
}

/* В карточках /tools иконка — тоже <span>, а там уже есть правило
   ".text_tools span { margin-top: 15px; min-height: 48px; display: block }"
   для ПОДПИСИ инструмента. Оно бы растянуло иконку — перебиваем его. */
.text_tools .tool-icon,
.card_tool_body .tool-icon {
    display: inline-block;
    margin-top: 0;
    min-height: 0;
    line-height: 0;
    white-space: normal;
    width: 48px;
    height: 48px;
}

/* В виджете «Похожие инструменты» иконка лежит в цветной плашке */
.related_card .tool-icon {
    position: relative;
    width: 26px;
    height: 26px;
}