Blocks dependency (modifier)

[pruttned]

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;
    /* .. */
}

[Guria]

<div class="input input--icon">
    <span class="input__icon">X</span>
    <input class="input__field">
</div>
<input class="input input__field" />

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

I from phone, so can't sort css rules. Hope you will get an idea.

[pruttned]

Yes. Thank you.