:root {
    --original-size: 128;
}

[data-icon] {
    background-image: url(/i/icons/icons.png);
    background-repeat: no-repeat;
    display: inline-block;
    image-rendering: pixelated;
    background-color: transparent;
    
    /* По умолчанию оригинал */
    width: 128px;
    height: 128px;
    
    /* Атлас в 7 раз шире блока (так как 7 иконок в ряду) */
    background-size: 700% auto; 
}

/* Модификаторы размера — теперь просто меняем ширину/высоту */
[data-icon-size="16"] { width: 16px; height: 16px; }
[data-icon-size="32"] { width: 32px; height: 32px; }
[data-icon-size="64"] { width: 64px; height: 64px; }

/* ПОЗИЦИОНИРОВАНИЕ В ПРОЦЕНТАХ */
/* Формула: (номер_колонки - 1) / (всего_колонок - 1) * 100% */

[data-icon="close"] {
    background-position: 100% 57%;
}

[data-icon="delete"] {
    background-position: 50% 0%;
}

[data-icon="plus"] {
    background-position: -1% 42%;
}
[data-icon="minus"] {
    background-position: -1% 42%;
}

[data-icon="survivor"] {
    background-position: -1% 29%;
}
[data-icon="stalker"] {
    background-position: 15% 29%;
}
[data-icon="prospector"] {
    background-position: 33% 29%;
}
[data-icon="corsair"] {
    background-position: 50% 29%;
}
[data-icon="engineer"] {
    background-position: 65% 29%;
}
[data-icon="mercenary"] {
    background-position: 83% 29%;
}
[data-icon="trader"] {
    background-position: -1% -1%;
}