How to deal with the Single Responsibility Principle?

Question

css

Help deal with the principle of sole responsibility for bam.

in BEM CSS means that each CSS implementation should have one responsibility.
Responsibility: external geometry and positioning (we will set the external geometry and positioning for the button block through the header__button element).

For example, we have such buttons

<div class="form__buttons">
            <button class="form__btn-send">Отправить на модерацию</button>
            <button class="form__btn-cancel">Отмена</button>
            <button class="form__btn-save">Сохранить в мои черновики</button>
          </div>
        </form>

.form {
  &__buttons {
    width: 100%;
    margin: 32px 0px 145px 0px;
  }
  &__btn-cancel {
    width: 92px;
    height: 45px;
    margin-left: 30px;
    background: #e9e9e9;
    border-radius: 2px;
    cursor: pointer;

    font-weight: 500;
    font-size: 14px;
    line-height: 16px;

    color: #333333;
  }

  &__btn-save {
    width: 231px;
    height: 45px;
    position: relative;
    left: 54%;
    background: #e9e9e9;
    border-radius: 2px;
    cursor: pointer;

    font-weight: 500;
    font-size: 14px;
    line-height: 16px;

    color: #333333;

    &:hover {
      background: #dbdbdb;
    }
    &:active {
      background: #c4c4c4;
    }
    &:focus {
      background: #e9e9e9;
      border: 2px solid #dbdbdb;
      border-radius: 2px;
    }
  }
  &__btn-send {
    width: 216px;
    height: 45px;
    background: #2f80ed;
    border-radius: 2px;
    cursor: pointer;

    font-weight: 500;
    font-size: 14px;
    line-height: 16px;

    color: #ffffff;

    &:hover {
      background: #2974d9;
      border-radius: 2px;
    }
    &:active {
      background: #236acb;
      border-radius: 2px;
    }
    &:focus {
      background: #2f80ed;
      border: 2px solid rgba(47, 128, 237, 0.5);
      border-radius: 2px;
    }
  }
}

I wrote like this, but the single responsibility principle is violated. If I try to fix this, I end up with large classes, several per element. How to separate responsibility? For example, I will put one class for all buttons, but they have different text color and background. And as I understand it, in one class it is impossible to describe, for example, text color, text style and element sizes? There must be another class for this. Who can give an example of how to write correctly with styles with scss, I'm confused (((

Answer 1

Buttons they are everywhere buttons
blue
gray
gray with :disabled
and no duplicate styles
width: 216px; (and now change the text in the button)
height: 45px; (either paddings or height)
and why .form? buttons not only in the form can be
A in the picture

<button class="btn is-primary">text</button>
<button class="btn is-secondary">text</button>
или
<button class="btn btn--primary">text</button>
<button class="btn btn--secondary">text</button>