Проблема

Предположим, у меня есть следующий html:

<header class="header header_main">
    <button class="header__button button">
        <svg class="button__icon">
            <!-- SVG contents -->
        </svg>
        <span class="button__text">Button</span>
    </button>
</header>

И я хочу изменить элемент button__text у header__button. Предположим, изменить font-size. Я не уверен, но вроде вот так:

.header__button .button__text {
    font-size: 20px;
}

...делать нельзя. Потому что элемент button__text - часть внутренней реализации блока button. Поэтому, следующее что приходит в голову, просто сделать модификатор для button, что-то вроде этого:

.button_big-font .button__text {
    font-size: 20px;
}

Вроде все ок, добавляем модификатор, наслаждаемся. Но появляется следующего рода задача: нужно скрыть текст кнопок в шапке на мобильных устройствах. Вроде реализуется просто (конкретно в моем случае нужен именно display: none):

@media screen and (max-width: 575px) {
    .button_big-font .button__text {
        display: none;
    }
}

Вот только я могу применять модификатор big-font еще где-то вне header. И там я не хочу скрывать текст. Создавать модификатор, который можно применить только в определенном контексте (т.е. big-font только для header__button), тоже как-то не очень.

Попытки решения

Пробовал использовать css-переменные. Что-то вроде:

.button__text {
    display: var(--button_text-display, inline);
}
@media screen and (max-width: 575px) {
    .header__button {
        --button_text-display: none;
    }
}

Но все-таки скрытие текста - это вопрос внутренней реализации блока button. Там может использоваться как display: none, так и visibility: hidden, или вообще font-size: 0. А здесь я не только намертво вбиваю значение none, которое может использоваться только для display, но и позволяю применить другие значения, вроде flex, что не допустимо.

Также пробовал использовать правила @extend в sass. Но во-первых, они работают только в текущей области @media, а альтернативные решения плодят много css-кода на выходе. Во-вторых, @extend'ы чего-либо, относящегося к другому блоку, несколько ломают всю модульность.

Собственно вопрос

Есть ли способ изменить внутрянку (в частности элементы) блока в контексте другого блока либо элемента, без создания дополнительных модификаторов и прочих извращений?