Hi, I'm creating simple input with icon. I have common block for all inputs, named 'input' that is setting padding alongside of another styles, like color, border, etc. For input with icon, I’ve created another block named ‘input-icon’. In order to create space for the icon, I must override left padding in the input when used in ‘input-icon’ block. To do this, I’ve created input modifier ‘input—with-icon’. But now I have tied blocks where if someone uses ‘input-icon’, he must remember to also put ‘input—with-icon’ modifier on the input. Is there any better way? Thanks.

<div class="input-icon">
    <span class="input-icon__icon">X</span>
    <input class="input-icon__input input input--with-icon">
</div>

.input {
    padding: 7px 7px;
    /*..*/
}
.input--with-icon {
    padding-left: 30px;
}
.input-icon {
    position: relative;
}
.input-icon__icon {
    position: absolute;
    z-index: 1;
    left: 7px;
    /* .. */
}