Существует 2 блока .button и .item У блока .button есть оформление hover состояния .button:hover

Когда .button находится в блоке .item, это выглядит так:

<div class="item">
    ...
    <button class="item__button button/>
</div>

Вопрос: при наведении на .item, .button должен выглядеть, как .button:hover. Как это сделать правильно? На проекте используется SCSS.

Мои мысли:

1. extend использовать не вариант, т.к. .item начинает зависеть от существования button.
2. Создавать модификатор .button_hover и добавлять его через js при наведении на .item? Не хочется для такой простой задачи писать js.
3. копипаст стилей button:hover в item__button:hover. Сейчас именно так.