How to correctly implement many differences between blocks and dependencies of other elements on these BEM differences?

Question

css

Hello! Be patient, please, but I really need advice
. There are form components (select, input, textarea). Select is not default, but needs to be styled. It so happened that depending on the page, the elements change their appearance, and I thought that all these blocks are different (in terms of functionality), but the groups of elements have the same appearance, and I did so.
Created a form-element block, the only purpose of which is to be a mixin for styling groups of entities, because I found it strange to create the same styles for each component, DRY our everything After that, I began to look for differences between the elements and came up with something incredible
7 different component heights
7 different component font sizes
5 different bg values, including the absence of bg
2 border-radius values, 1 by 10px, another by 16 Whether
or not there is a border
2 border thickness
values ​​3 border color values
​​3 different shadow position values
I needed and created 5 modifiers, namely: form-elementboder(normal || bold) responsible only for the thickness of the frame
form-elementrounded(md || lg) responsible for the values ​​10 and 16
form-elementshadow(md || lg) responsible for for the shadow
form-elementsize(many values) responsible for the height and size of the font
form-elementtheme(many values) responsible for the background color, font color, border color
Created a separate input block, as a result the code looks something like this

<div class="
    input form-element
    form-element_theme_first
    form-element_size_md
    form-element_rounded_md
    form-element_border_normal
">
    <input type="text" class="input__field">
</div>


.input__field {
    padding: 0 16px;
    margin: 0;
    height: 100%;
    width: 100%;
    border: none;
    outline: none;
    background: none;
    color: inherit;
}

And everything would be fine, but it's time to create a select that now looks like this

<div class="
    select
    select_opened
    form-element
    form-element_theme_first
    form-element_size_md
    form-element_rounded_md
    form-element_border_normal
">
     <select name=""></select>
     <div class="select__header">
         <p class="select__value">Product</p>
         <span class="arrow arrow_bottom select__arrow"></span>
      </div>
      <ul class="select__body">
          <li class="select__option">Product</li>
          <li class="select__option">Product</li>
      </ul>
</div>

And here I realized that I was finished, because depending on the form-element modifiers, I need to change the elements of the select component, and this is wrong, because there will be .class .class selectors, but worst of all, the modifier of one block will affect elements of another block that is not at all related to it. What I mean is, depending on the form-element_size_md, the size of the select__option should change, depending on the frame it should be added or left, also about the border-radius, but at least about anything, plus there are slightly different styles when the select is expanded. As a result, I'm at a dead end and don't know what to do, my options were like this, to create all the components separately select, input, textarea and stupidly each would have its own modifiers, BUT they would be identical, because. select_size_md, input_size_md, textarea_size_md meant the same thing, that's bad, the same implementations. Then I thought, what if I take the select out of this whole heap and add modifiers for it, I would get something like select_size_md for selects and form-element_size_md for input and textarea, but then we still have 2 identical implementations. I could write them like this select_size_md, form-element_size_md, but then there was no point in creating form-element as a separate entity at all.
And I have exactly 3 questions
1) Have I correctly divided all the differences between the elements into modifiers, it’s just that there are so many of them and they are almost everything in 1 line that I doubt the correctness?
2) How can I deal with the features of the select component (the problem description is given most of the text)?
PS Maybe I didn't write the title of the question correctly, but my head is boiling. Thanks in advance

Answer 1

Norm modifiers, in BEM you can use a cascade (only with the mind), as for the second question, you can abandon the select, input, textarea blocks and make one - field, which can be both a select and an input.