Некорректная работа @extend на псевдоклассе :focus

В проекте стала использовать наследование/расширение Sass - @extend (в данном случае - для стилизации интерактивных состояний), но столкнулась со следующей проблемой.

Сами шаблоны наследования я указываю в отдельном файле - extensions.scss, а потом уже добавляю их через @extend в scss-файл конкретного элемента.

Для состояний :hover, :active всё работает отлично.

Для :focus то работает, то через полчаса - не работает, причем на разных элементах по-разному. Опытным путем выяснила, что:

1. изменение имени переменной не помогает;
2. перенос шаблона наследования в файл стилизуемого элемента не помогает;
3. помогает создание второго такого же шаблона, но с другим именем и использование уже его (второго)! При этом через некоторое время этот второй перестает работать и начинает работать по первому (т.е. перестало работать - указала имя первого шаблона - заработало).

• Что за дичь?)

• Что я делаю не так?

• Почему именно с :focus такая проблема?

• И как исправить?

Пример кода:

// extensions.scss

%hover-shared {
  opacity: 0.6;
}

%active-shared {
  opacity: 0.3;
}

%focus-shared {
  outline: 2px solid $color-purple;
  outline-offset: 2px;
}

// дубль шаблона выше
%focus-all {
  outline: 2px solid $color-purple;
  outline-offset: 2px;
} 


// logo.scss

.logo {
  display: inline-block;

  &:hover {
    @extend %hover-shared;
  }

  &:active {
    @extend %active-shared;
  }

  &:focus-visible {
    @extend %focus-shared;
  }
}